postMessage是window的方法，可以通過(guò)這個(gè)方法實(shí)現(xiàn)兩個(gè)窗口之間的通信，總結(jié)下倆大概有兩種類(lèi)型
1.兩個(gè)頁(yè)面之間發(fā)送信息
/* 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; // 獲取創(chuàng)建當(dāng)前窗口的window對(duì)象的引用
window.onload = function() {
// 注意是綁定在要向某個(gè)窗口發(fā)送信息的那個(gè)窗口引用，而不是單純的window；
// window 是當(dāng)前窗口的引用
targetWin.postMessage('hahale','http://127.0.0.1:8848');
}
</script>
</body>
...
/* end */
以上代碼的意思是在page2中打開(kāi)page1，并且在page1中通過(guò)postMessage向page2發(fā)送信息，page2頁(yè)面通過(guò)綁定message事件獲取page1發(fā)送過(guò)來(lái)的信息。
2.頁(yè)面向頁(yè)面中的iframe發(fā)送信息
/* 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發(fā)送信息，iframe接受信息，并在子頁(yè)面中展示出來(lái)發(fā)送的信息
通過(guò)上邊兩個(gè)簡(jiǎn)單的例子可知，進(jìn)行這種通信只需要簡(jiǎn)單的兩個(gè)方法
第一步：分發(fā)消息，及把消息發(fā)送給相應(yīng)的窗口
otherWindow.postMessage(message, targetOrigin, transfer);
otherWindow：你要發(fā)送消息給哪個(gè)窗口就是哪個(gè)窗口的引用，注意不是當(dāng)前窗口，可以是iframe的窗口對(duì)象，或者是window.open返回的窗口對(duì)象。如果獲取不到otherWindow是沒(méi)法對(duì)相應(yīng)的窗口發(fā)送信息的。
message：將要發(fā)送給otherWindow的數(shù)據(jù)。
targetOrigin：指定哪些窗口可以獲取到發(fā)送的數(shù)據(jù)（可以使用“*”表示無(wú)限制）。
transfer：是一串和message 同時(shí)傳遞的Transferable對(duì)象，可選。
第二步：監(jiān)聽(tīng)message事件，獲取另一個(gè)窗口發(fā)送給當(dāng)前窗口的信息
window.addEventListener('message', function, useCapture);
message：事件類(lèi)型。
function: 'message'事件發(fā)生時(shí)調(diào)用的函數(shù)。
useCapture：布爾值，使用事件冒泡還是事件捕獲，可選。
通過(guò)上面接單的兩步就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的通信
