window.postMessage跨窗口通讯实践，以及监听窗口关闭的操作

window.postMessage(message, targetOrigin, [transfer])，message： 将要发送到其他 window的数据，targetOrigin： 指定哪些窗口能接收到消息事件，其值可以是 * （表示无限制）或者一个 URI，transfer： 可选，是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

一、通过window.open打开子窗口的方式。

父传子示例：

父窗口代码：

window.onload = function () {
  var openBtn = document.getElementById("open");
  var sendBtn = document.getElementById("sendMessage");
  var openner;
  openBtn.addEventListener("click", function (e) {
    e.preventDefault();
    openner = window.open('./child.html');
  });
  sendBtn.addEventListener('click',function(e){
    openner.postMessage('我是父窗口传递给子窗口的数据','*')
  })
};

子窗口代码：

    function receiveMessageFromIndex(event) {
        console.log("打印父窗口发送的数据", event);
    }
    // 监听父窗口发送的数据
    window.addEventListener("message", receiveMessageFromIndex, false); 

子传父示例：

父窗口代码：

    function receiveMessageFromIndex(event) {
        console.log("打印子窗口发送的数据", event);
    }
    // 监听父窗口发送的数据
    window.addEventListener("message", receiveMessageFromIndex, false); 

子窗口代码

window.onload = function () {
  var sendBtn = document.getElementById("sendMessage");
  sendBtn.addEventListener('click',function(e){
     window.opener.postMessage("我是子窗口传递的数据", "*");
  })
};

二、通过iframe打开子窗口的方式

父传子示例：

父窗口代码：

<iframe id="myIframe" src="./child.html" width="300" height="360">
  <p>你的浏览器不支持 iframe。</p>
</iframe>
<script>
     var myIframe = document.getElementById("myIframe").contentWindow;
     myIframe.postMessage('我是父窗口传递给子窗口的数据','*')
</script>

子窗口代码：

function receiveMessageFromIndex(event) {
  console.log("打印父窗口发送的数据", event);
}
// 监听父窗口发送的数据
window.addEventListener("message", receiveMessageFromIndex, false); 

子传父示例：

父窗口代码：

    function receiveMessageFromIndex(event) {
        console.log("打印子窗口发送的数据", event);
    }
    // 监听父窗口发送的数据
    window.addEventListener("message", receiveMessageFromIndex, false); 

子窗口代码：

window.onload = function () {
  var sendBtn = document.getElementById("sendMessage");
  sendBtn.addEventListener('click',function(e){
     window.parent.postMessage("我是子窗口传递的数据", "*");
  })
};

三、监听浏览器子窗口关闭之后给父窗口发送关闭信息

浏览器关闭和刷新都会执行onbeforeunload和onunload方法，关闭的时候，两个方法的间隔时间非常短，所以通过时间差的这种方式来判断是不是关闭浏览器窗口。

let beginTime = 0;
let differTime = 0;
window.onbeforeunload = function() {
  beginTime = new Date().getTime();
}
window.onunload = function() {
  differTime = new Date().getTime() - beginTime;
  if (differTime <= 4) {
    window.opener.postMessage("子窗口关闭之后传递的数据", "*");
  }
}