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

回到相关文章 »

代码:

本页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);