iframe跨域通信

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

在非跨域的情况下，可以通过 【父调子】 iframe的dom节点.contentWindow
【子调父】window.top/window.parent 来相互通信

在跨域情况下，可以使用postMessage()配合监听onmessage调用

// 主动调用的页面
window.top.postMessage('messageMark','*') // 该页面为iframe页面
iframeDom.contentWindow.postMessage("messageMark", "*"); // 该页面为父页面

// 被调用的页面
window.addEventListener('message',function(e) {
    if (e.data == 'messageMark') { // 传参校验
        ......
    }
})

注：需要iframe加载完成才可以调用，初始化时就要执行的功能可以放在iframe.onLoad中执行

postMessage()方法

postMessage(message,targetOrigin,arr[transfer])

message: onmessage事件中可以接受到的数据
targetOrigin: 指定哪个url能接收到消息事件（默认'*'）
transfer: 可选，是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权

message

利用此事件来监听来自你的扩展其他部分的消息

示例（vue项目）

...
created(){
    if (!this.isPhone) return
    let _this = this
    // 要执行的内容函数
    const editPhone = function(e) {
        if (e.data == 'editPhone') { // 传参校验
            _this.getDetail()
        }
    }
    window.addEventListener('message',editPhone)
    _this.$emit('hook:beforeDestroy',function() {
        window.removeEventListener('message',editPhone)
    })
}
...

另一个页面

...
methods: {
    phoneChange(){
        ...
        // 跨域通信
        this.iframeDom.contentWindow.postMessage("editPhone", "*");
    }
}
...

---

附 POSTMessage

POSTMessage被称为“跨文档消息传递”，可以通过异步消息传递的方式在不同的脚本之间进行数据传递。他的使用场景不只在iframe中

示例，POSTMassage在web worker（同步执行）中的用法

var myWorker = new Worker('work.js', options)
// 接收
worker.addEventListener('message', function (e) { ... }, false);
// 发送
worker.postMessage('...');

web worker: 使得一个Web应用程序可以在与主执行线程分离的后台线程中运行一个脚本操作。这样做的好处是可以在一个单独的线程中执行费时的处理任务，从而允许主（通常是UI）线程运行而不被阻塞。

web worker的限制：

1. 同源限制

2. 执行的脚本必须来自同源网络，无法读取本地文件

3. 不能操作DOM，也不能alert、confirm