Giao tiếp hai chiều giữa các ngữ cảnh duyệt web trong HTML5

Giao tiếp hai chiều giữa các ngữ cảnh duyệt web được gọi là nhắn tin kênh (channel messaging). Nó rất hữu ích cho giao tiếp qua nhiều nguồn gốc (origins) khác nhau.

Khi tạo messageChannel, nó nội bộ tạo ra hai cổng (ports) để gửi dữ liệu và chuyển tiếp đến ngữ cảnh duyệt web khác.

• postMessage() – Đăng tin nhắn qua kênh
• start() – Bắt đầu gửi dữ liệu
• close() – Đóng các cổng

Trong kịch bản này, chúng ta gửi dữ liệu từ một iframe sang iframe khác. Dữ liệu được gọi trong hàm và truyền đến 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);