ฉันพบความจำเป็นในที่ทำงานเมื่อเร็วๆ นี้ สถานการณ์คือ: หน้า h5 ถูกฝังอยู่ในหน้า PC เป็นโมดูลแสดงตัวอย่าง ผู้ใช้สามารถดำเนินการบางอย่างบนหน้า PC จากนั้นหน้า h5 จะทำการเปลี่ยนแปลงแบบตอบสนองเพื่อให้ได้เอฟเฟกต์การแสดงตัวอย่าง .
สิ่งแรกที่นึกถึงคือการฝังเพจ h5 ลงในหน้าเว็บพีซีโดยใช้ iframe จากนั้นพีซีจะส่งข้อมูลที่เปลี่ยนแปลงไปยัง iframe ผ่านวิธี postMessage h5 ที่ฝังอยู่ใน iframe จะรับข้อมูลผ่าน addEventListener จากนั้นทำการเปลี่ยนแปลงข้อมูลแบบตอบสนอง
นี่คือบทสรุปของการใช้ postMessage API นั้นง่ายมาก:
otherWindow.postMessage (ข้อความ, targetOrigin, [ถ่ายโอน]);
otherWindow คือการอ้างอิงไปยังหน้าต่างเป้าหมาย ซึ่งก็คือ iframe.contentWindow ในสถานการณ์ปัจจุบัน
message คือข้อความที่ส่ง ก่อน Gecko 6.0 ข้อความจะต้องเป็นสตริง แต่เวอร์ชันที่ใหม่กว่าสามารถส่งอ็อบเจ็กต์ได้โดยตรงโดยไม่ต้องทำให้เป็นอนุกรมด้วยตนเอง
targetOrigin แสดงถึงต้นกำเนิดของหน้าต่างเป้าหมาย และค่าของหน้าต่างอาจเป็นสตริง * (ระบุไม่จำกัด) หรือ URI เมื่อส่งข้อความ หากโปรโตคอล ที่อยู่โฮสต์ หรือพอร์ตของหน้าต่างเป้าหมายไม่ตรงกับค่าที่ TargetOrigin กำหนดไว้ ข้อความจะไม่ถูกส่ง หากทั้งสามตรงกันอย่างสมบูรณ์ ข้อความจะถูกส่งไป สำหรับข้อมูลที่เป็นความลับ การตั้งค่าที่มาของหน้าต่างเป้าหมายเป็นสิ่งสำคัญมาก
เมื่อเรียก postMessage() เหตุการณ์ข้อความจะถูกส่งไปยังหน้าต่างเป้าหมาย อินเทอร์เฟซนี้มีเหตุการณ์ข้อความซึ่งมีคุณสมบัติที่สำคัญหลายประการ:
1.data: ตามชื่อ คือข้อความที่ส่งเข้ามา
2.source: วัตถุหน้าต่างที่ส่งข้อความ
3.origin: แหล่งที่มาของหน้าต่างข้อความ (โปรโตคอล + โฮสต์ + หมายเลขพอร์ต)
ด้วยวิธีนี้ เราสามารถรับข้อความข้ามโดเมน และยังสามารถส่งข้อความกลับในลักษณะเดียวกันได้อีกด้วย
การถ่ายโอนพารามิเตอร์ที่เป็นทางเลือกคือสตริงของออบเจ็กต์ที่โอนได้ซึ่งถูกส่งไปพร้อมกับข้อความ ความเป็นเจ้าของออบเจ็กต์เหล่านี้จะถูกโอนไปยังผู้รับข้อความ และผู้ส่งจะไม่รักษาความเป็นเจ้าของอีกต่อไป
จากนั้น เมื่อเริ่มต้น iframe คุณสามารถรับข้อมูลอ้างอิงไปยัง iframe และส่งข้อความผ่านโค้ดต่อไปนี้:
// โปรดทราบว่านี่ไม่ใช่เพื่อรับการอ้างอิง dom ของ iframe แต่เป็นการอ้างอิงของหน้าต่าง iframe const iframe = document.getElementById('myIFrame').contentWindow;iframe.postMessage('hello world', 'http:/ /yourhost.com' );ใน iframe สามารถรับข้อความผ่านโค้ดต่อไปนี้
window.addEventListener('ข้อความ', msgHandler, false);เมื่อได้รับ คุณสามารถกรองแหล่งที่มาของข้อความได้ตามต้องการ เพื่อหลีกเลี่ยงการโจมตี XSS ที่เกิดจากการได้รับข้อความที่มีชื่อโดเมนที่ผิดกฎหมาย
สุดท้ายนี้ สำหรับการใช้โค้ดซ้ำ การส่งและรับข้อความจะถูกห่อหุ้มไว้ในคลาส และการจำลอง API ประเภทข้อความ ซึ่งสะดวกต่อการใช้งานมาก รหัสเฉพาะมีดังนี้:
ส่งออกคลาส Messager เริ่มต้น { ตัวสร้าง (win, targetOrigin) { this.win = win; this.targetOrigin = targetOrigin; this.actions = {}; window.addEventListener('message', this.handleMessageListener, false); => { if (!event.data || !event.data.type) { return; } const type = event.data.type; (!this.actions[type]) { return console.warn(`${type}: missing Listener`); } this.actions[type](event.data.value); } บน = (ประเภท, cb) = > { this.actions[type] = cb; ส่งคืนสิ่งนี้; } ทำลาย () { window.removeEventListener('ข้อความ', this.handleMessageListener); }}ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network