跨文档通信之窗体通信实例页面

代码：

本页JS代码：

var message = '';

document.querySelector("#boy").onclick = function() {
    message = '我是男生，帅气的男生！';
};
document.querySelector("#girl").onclick = function() {
    message = '我是女生，漂亮的女生！';
};


window.addEventListener('message', function(e) {
    var interval;
    // 检测来源
    if (e.origin == 'https://www.zhangxinxu.com')
        switch (e.data) {
            case 'ready':
                // e.source 为发送的 window 对象
                interval = setTimeout(function(win) {
                    win.postMessage(message,'https://www.zhangxinxu.com');    
                }, 2000, e.source);
                break;
    
            case 'closed':
                clearInterval(interval);
                break;
    }
 }, false);

效果：

男生点这个女生点这个

打开页JS代码：

window.addEventListener('message', function(e) {
    document.querySelector("#message").innerHTML = "接受到的信息是：" + e.data;
}, false);

// 当文档加载完毕, 给父级来源发送信息。
window.addEventListener('load', function(e){
    e.currentTarget.opener.postMessage('ready', 'https://www.zhangxinxu.com');
}, false);

// 当窗体关闭，告诉父级窗体已经关闭了。
window.addEventListener('unload', function(e){
    e.currentTarget.opener.postMessage('closed', 'https://www.zhangxinxu.com');
}, false);