window.postMessage()实现跨域通信和页面间数据通信

window.postMessage() 方法可以安全地实现跨域通信和页面间数据通信。

postMessage 可用于解决以下方面的问题：

页面和其打开的新窗口的数据传递 页面与嵌套的 iframe 消息传递 多窗口之间消息传递

接口参数

otherWindow.postMessage(message, targetOrigin, [transfer]);

targetOrigin：

• 同源的话："/"
• 无限制：“*”

不同页面间通讯

A.html

// 发送消息
var child = window.open("B.html");

setTimeout(function () {
    child.postMessage("你好", "*");
}, 3000);

// 接收消息
window.addEventListener("message", receiveMessage);

function receiveMessage(event) {
    console.log(event.data);
}

B.html

// 接收消息
window.addEventListener("message", receiveMessage);

function receiveMessage(event) {
    event.source.postMessage(event.data, "*");
    console.log(event);
}

iframe父子通讯

A.html

    

  var iframe = document.getElementById("iframe");

  iframe.onload = function () {
    // 发送跨域数据
    iframe.contentWindow.postMessage("你好", "*");
  };

  // 接收消息
  window.addEventListener("message", receiveMessage);
  function receiveMessage(event) {
    console.log(event.data);
  }

B.html

// 接收消息
window.addEventListener("message", receiveMessage);

function receiveMessage(event) {
    event.source.postMessage(event.data, "*");
    console.log(event);
}

参考 前端 postMessage