父子页面的 iframe 如何通信?

写这篇文章的原因是跟同事讨论了这个问题,我们持有不同的看法,他坚持在一个 iframe 里调用另一个 iframe 的方法,也可能触及 dom 操作;我认为简单传数据过去就好,隔离一下运行环境。跨 iframe 执行代码会有一些坑,比如使用 instanceof 操作符的时候,数组不是一个数组的实例,用 Array.isArray 不会有这个问题。

demo

See the Pen frame-out by zeng (@zengxiaoluan) on CodePen.

上面的例子,简单介绍了应该怎么去写代码,具体查看控制台的输出和示例代码。父页面执行子页面可以这样:

document.querySelector('#iframe-child').contentWindow.receive()

子页面执行父页面:

window.parent.bubble(’blabla‘)

传递 primitive 的数据类型过去,避免下面这种代码。

console.log(arrFromAnotherIframe instanceof Array) // false
console.log(objFromAnotherIframe instanceof Object) // false

使用 postMessage

2020-01-09 补充:昨天忘记写使用 postMessage 的例子了。

iframe 页面的外面:

<p><button onclick="send()">向 iframe 里发送一段数据</button></p>
<iframe id="iframe" src="./iframe-in.html" frameborder="0"></iframe>

<script>
function send(){
    document.querySelector('#iframe').contentWindow.postMessage('dddddd')
}

window.onmessage = function (e) {
    console.log(e)
}
</script>

iframe 里面的代码:

<p><button onclick="bubble()">向外发出数据</button></p>
<script>
    function bubble() {
        window.parent.postMessage({msg:'from in'})
    }

    window.onmessage = function (e) {
        console.log(e)
    }
</script>

我要分享

曾小乱

作者: 曾小乱

喜欢写点有意思的东西

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据