在非跨域的情况下，可以通过
【父调子】 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) returnlet _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", "*");}
}
...