postMessage是window的方法，可以通过这个方法实现两个窗口之间的通信，总结下俩大概有两种类型
1.两个页面之间发送信息
/* page two */
....
<body>
<h1>page two</h1>
<h1>
<a href="javascript:;" onclick="window.open('./page-one.html')">
open page one
</a>
</h1>
<script type="text/javascript">
window.addEventListener('message', function(event) {
console.log('event: ', event);
}, false);
</script>
</body>
...
/* end */
/* page one */
...
<body>
<h1>page one</h1>
<script type="text/javascript">
const targetWin = window.opener; // 获取创建当前窗口的window对象的引用
window.onload = function() {
// 注意是绑定在要向某个窗口发送信息的那个窗口引用，而不是单纯的window；
// window 是当前窗口的引用
targetWin.postMessage('hahale','http://127.0.0.1:8848');
}
</script>
</body>
...
/* end */
以上代码的意思是在page2中打开page1，并且在page1中通过postMessage向page2发送信息，page2页面通过绑定message事件获取page1发送过来的信息。
2.页面向页面中的iframe发送信息
/* main page */
...
<h1>page main</h1>
<iframe id="iframe" src="./page-sub.html" width="300" height="300"></iframe>
<script type="text/javascript">
window.onload = function() {
// 获取iframe的窗口引用
var iframeWin = document.getElementById('iframe').contentWindow;
// console.log('iframeWin: ', iframeWin)
iframeWin.postMessage('this is message from main', 'http://127.0.0.1:8848');
}
</script>
...
/* end */
/* sub page */
...
<h1 id="title">page sub</h1>
<script type="text/javascript">
window.addEventListener('message', function(e) {
document.getElementById('title').innerText = e.data;
}, false);
</script>
...
/* end */
上面代码的意思是给iframe发送信息，iframe接受信息，并在子页面中展示出来发送的信息
通过上边两个简单的例子可知，进行这种通信只需要简单的两个方法
第一步：分发消息，及把消息发送给相应的窗口
otherWindow.postMessage(message, targetOrigin, transfer);
otherWindow：你要发送消息给哪个窗口就是哪个窗口的引用，注意不是当前窗口，可以是iframe的窗口对象，或者是window.open返回的窗口对象。如果获取不到otherWindow是没法对相应的窗口发送信息的。
message：将要发送给otherWindow的数据。
targetOrigin：指定哪些窗口可以获取到发送的数据（可以使用“*”表示无限制）。
transfer：是一串和message 同时传递的Transferable对象，可选。
第二步：监听message事件，获取另一个窗口发送给当前窗口的信息
window.addEventListener('message', function, useCapture);
message：事件类型。
function: 'message'事件发生时调用的函数。
useCapture：布尔值，使用事件冒泡还是事件捕获，可选。
通过上面接单的两步就可以实现一个简单的通信
网友评论