Open Samgao0312 opened 2 years ago
postMessage 是 H5 新的跨域传值方法,多用于窗口间数据通信。常见使用场景包括:
以下是 目标窗口 监听 message 事件所接收到的事件对象:
// 父页面向子页面发送消息 let data = {type: 'answerResult', data: jsonData.data}; this.$refs.iframe.contentWindow.postMessage(data, '*'); // 子页面接收信息 window.addEventListener('message', function (e) { console.log(e); })
window.parent: 返回当前窗口的父窗口;
// 子页面向父页面发送消息 let parentData = {type: 'passDataBack', data: passData}; window.parent.postMessage(parentData, '*'); // 接收消息方法 window.addEventListener('message', function (e) {})
window.open() : 该方法打开新的tab窗口或者切换到已打开的tab窗口,同时会返回目标窗口window对象。
当你使用多页应用时,需要两个页面之间进行实时的通信,而又不想通过服务端进行 websocket 之类借助服务端实现的通信,那 postMessage 将是一个很好的方式。子页面可以通过 window.open 方法打开,var win = window.open(pageurl, '_blank'); 那么这个 win 就是新打开的 tab 窗口的引用,可以同win.postMessage 方法来对新打开的tab页发送消息。
websocket
postMessage
window.open
var win = window.open(pageurl, '_blank');
win
win.postMessage
message
source
postMessage 是 H5 新的跨域传值方法,多用于窗口间数据通信。常见使用场景包括:
以下是 目标窗口 监听 message 事件所接收到的事件对象:![image](https://user-images.githubusercontent.com/18101244/175767880-8ff2d93c-b8f8-4dad-885a-7823003763f8.png)
一、父子页面 iframe
1.1 父 -> 子
1.2 子 -> 父
window.parent: 返回当前窗口的父窗口;
二、跨标签页通信
当你使用多页应用时,需要两个页面之间进行实时的通信,而又不想通过服务端进行
websocket
之类借助服务端实现的通信,那postMessage
将是一个很好的方式。子页面可以通过window.open
方法打开,var win = window.open(pageurl, '_blank');
那么这个win
就是新打开的 tab 窗口的引用,可以同win.postMessage
方法来对新打开的tab页发送消息。message
事件,便可以从message
事件对象中得到原页面发送的消息。source
,这时候就可以在新的页面上利用这个source
调用postMessage
方法来对原页面发消息。这样就实现了两个页面的实时通信。三、使用场景
参考阅读