การสื่อสารสองทิศทางระหว่าง Browsing Contexts ใน HTML5

การสื่อสารสองทิศทางระหว่าง browsing contexts เรียกว่า Channel Messaging ซึ่งมีประโยชน์สำหรับการสื่อสารข้ามหลาย origin

ขณะสร้าง MessageChannel จะสร้างพอร์ตสองอันขึ้นมาเพื่อส่งข้อมูลและส่งต่อไปยัง browsing context อื่น

• postMessage() - ส่งข้อความผ่านช่องทาง
• start() - เริ่มส่งข้อมูล
• close() - ปิดพอร์ต

ในสถานการณ์นี้ เราส่งข้อมูลจาก iframe หนึ่งไปยังอีก iframe โดยเรียกข้อมูลในฟังก์ชันและส่งต่อไปยัง DOM

var loadHandler = function(){
  var mc, portMessageHandler;
  mc = new MessageChannel();
  window.parent.postMessage('documentAHasLoaded','https://foo.example',[mc.port2]);
  portMessageHandler = function(portMsgEvent){
    alert(portMsgEvent.data);
  }
  mc.port1.addEventListener('message', portMessageHandler, false);
  mc.port1.start();
}
window.addEventListener('DOMContentLoaded', loadHandler, false);