web通信之跨文档通信实例页面

展示

代码

左侧iframe JS代码：

var eleForm = document.querySelector("form");
eleForm.onsubmit = function() {
    var message = document.querySelector("input[type='text']").value;
    // 这里是关键，发送信息
    window.parent.frames[1].postMessage(message, '*');
    return false;    
}
            

右侧iframe JS代码：

var eleBox = document.querySelector("#message");
var messageHandle = function(e) {
    eleBox.innerHTML = '接受到的信息是：' + e.data;
};
if (window.addEventListener) {
    // 接受信息
    window.addEventListener("message", messageHandle, false);
} else if (window.attachEvent) {
    // 接受信息，兼顾IE8之流
    window.attachEvent('onmessage', messageHandle);
}