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