ในบทความก่อนหน้านี้มันพูดถึงกลยุทธ์ที่คล้ายคลึงกันของเบราว์เซอร์นั่นคือการป้องกันวิธีการและคุณลักษณะของกันและกันจากการเข้าถึงหน้าของกันและกันและอธิบายการแก้ปัญหาการแก้ปัญหาการข้ามโดเมนของกลยุทธ์ที่คล้ายคลึงกัน: หน่วยงานย่อย , JSONP, JSONP, Cors บทความนี้จะอธิบายรายละเอียด HTML5 Window.postMessage
html5 window.postmessage apiHTML5 Window.postMessage เป็น API ข้อความที่ปลอดภัยและเป็นเหตุการณ์
โพสต์ข้อความส่งข้อความวิธี postmessage เรียกว่าที่หน้าต่างต้นทางที่ต้องส่งข้อความเพื่อส่งข้อความ
หน้าต่างต้นทางหน้าต่างต้นทางสามารถเป็นวัตถุหน้าต่างทั่วโลกหรือหน้าต่างประเภทต่อไปนี้:
iframe ในหน้าต่างเอกสาร:
var iframe = document.getElementById ('my-iframe');JavaScript เปิดหน้าต่างป๊อปอัพ:
var win = window.open ();
หน้าต่างพ่อของหน้าต่างเอกสารปัจจุบัน:
var win = window.parent;
เปิดหน้าต่างของเอกสารปัจจุบัน:
var win = window.opner ();
หลังจากค้นหาวัตถุหน้าต่างต้นฉบับคุณสามารถเรียก API postmessage เพื่อส่งข้อความไปยังหน้าต่างเป้าหมาย:
`` `win.postMessage ('สวัสดี', 'ttp: //jhssdemo.duapp.com/');` `` `` `` `` `` `` `` ``ฟังก์ชั่น Postmessage ได้รับสองพารามิเตอร์: ครั้งแรกคือข้อความที่จะส่งและที่สองคือแหล่งที่มาของหน้าต่างแหล่งที่มา
หมายเหตุ: เฉพาะเมื่อแหล่งที่มาของหน้าต่างเป้าหมายถูกจับคู่กับค่าพารามิเตอร์ต้นทางที่ส่งผ่านในฟังก์ชัน postmessage ข้อความสามารถรับได้
รับข้อความ postmessageในการรับข้อความจากหน้าต่างต้นทางก่อนหน้าผ่านโพสต์เมสเทอร์คุณจะต้องลงทะเบียนเหตุการณ์ข้อความในหน้าต่างเป้าหมายและผูกฟังก์ชันการตรวจสอบเหตุการณ์เพื่อรับข้อความในพารามิเตอร์ฟังก์ชัน
window.onload = function () {var text = document.getElementById ('txt'); + E.Origin); } if (window.addeVentListener) {// ลงทะเบียนเหตุการณ์ข้อความสำหรับหน้าต่างและผูกกับฟังก์ชั่นการตรวจสอบ window.addeventristener ('ข้อความ', teamiveMsg, false);} else {window.at tachevent ('ข้อความ' ;}};ฟังก์ชั่นการตรวจสอบเหตุการณ์ข้อความได้รับพารามิเตอร์อินสแตนซ์วัตถุเหตุการณ์ซึ่งมีสามแอตทริบิวต์:
หน้าต่างต้นทาง
<! # cccccc;} </style> </head> <body> <button id = btn> เปิด </button> <button id = ส่ง> ส่ง </button> <!) -> <iframe src = http: // jhssdemo.duapp.com/demo/h5_postmessage/win.html id = otherwin> </iframe> <br/> <br/> "<อินพุตประเภท = ปุ่ม = ส่งไปที่ id.com id = sendMessage/> <cript> window.onload = function () {var btn = document.getElementById ('btn'); หน้าต่างผ่าน Window.Open ('http: //jhssdemo.duapp .com/demo/h5_postmessage/win.html', 'popup');: // jhssdemo // ส่ง data document.getElementById (อื่น ๆ ) .ContentWindow .postMersage (อื่น ๆ ) D (ข้อความ) ;}; </script> </body> </html>หน้าต่างเป้าหมาย win.html
<! ;} </style> </head> <body> <h1> หน้าต่างใหม่ </h1> <div id = txt> </div> <pristm> window.onload = function () {var text = document (txt '); (Norigin: + E.Origin); text.innerhtml = ได้รับข้อความ! สำหรับเหตุการณ์ข้อความและผูกหน้าต่างฟังก์ชั่นการตรวจสอบ addeventListener ('ข้อความ', teamivemsg, false); " ทบทวนจากการศึกษาบทความนี้ฉันได้เรียนรู้เกี่ยวกับการใช้ API postmessage เพื่อใช้ HTML5 เพื่อสื่อสารระหว่างหน้าต่างและฉันก็รู้ว่ามันสามารถใช้เพื่อตระหนักถึงการสื่อสารข้ามโดเมน เช่น IE7- คุณสามารถใช้งานได้
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้