Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

HTML5 Cross-Browser iframe postMessage: Child ส่งข้อมูลไป Parent

การสื่อสารระหว่าง Parent และ Child iframe ด้วย postMessage

Parent สามารถฟังข้อความจาก Child ได้โดยไม่ต้องส่งข้อความเริ่มต้นก่อน

โค้ดฝั่ง Parent (Listener)

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

eventer(messageEvent, function(e) {
    var key = e.message ? "message" : "data";
    var data = e[key];
    console.log("Received from child:", data);
}, false);

โค้ดฝั่ง Child (Sender - ส่งทุก 3 วินาที)

setInterval(function() {
    parent.postMessage("Hello from child", "*");
}, 3000);

ใช้ postMessage ร่วมกับ event listener เพื่อความปลอดภัยข้ามโดเมน