父子页面的 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>