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", "*");
    }
}
...