iframe使用postmessage实现父子页面和子页面间的跨域通信，以及window.parent.document 跨域错误

iframe使用postmessage实现父子页面和子页面间的跨域通信，以及window.parent.document 跨域错误

postmessage的API

发送数据：

targetWindow.postMessage(message, targetOrigin, [transfer])

• message: 要发送的数据，【只能传普通对象，对于Error以及Function等是不能传递的，会导致克隆数据出错。】；
• targetOrigin：指定哪些窗口能接收到消息事件，其值可以是 *（表示无限制）或者一个 URI。
• transfer： 可选，是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

接收数据：

window.addEventListener('message', function (e) {  // 监听 message 事件
    if (e.origin !== "lol") {  // 验证消息来源地址
        return;
    }
    messageEle.innerHTML = "从"+ e.origin +"收到消息： " + e.data;
});

父子页面传送数据

父页面接收：
window.addEventListener('message', function (event) {
    console.log(event)
})

子页面发送：
window.parent.postMessage({ isDialog: false }, '*')

子页面之间传送数据

子页面A接收：
window.addEventListener('message', function (event) {
    console.log(event)
})
子页面B发送：
window.parent.frames['iframeName'].postMessage(_obj, '*')
// iframeName 为要接收数据的iframe的name属性值；

注意：
当使用window.parent.document.getElementById(‘iframeId’).contentWindow.postMessage传递消息的时候，需要确保子页面和父页面是否是同源，否则会报跨域的错误。因为对于不同源的父子页面，使用window.parent.会获取不到document元素，这时建议用name的方式通过==window.parent.frames[name]==获取iframe元素

代码007普通

打赏 收藏 海报 链接