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

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

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

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

接口参数
Window.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

    <iframe id="iframe" src="B.html" frameborder="0"></iframe>
        
    <script>
      var iframe = document.getElementById("iframe");
    
      iframe.onload = function () {
    
    
        // 发送跨域数据
        iframe.contentWindow.postMessage("你好", "*");
      };
    
      // 接收消息
      window.addEventListener("message", receiveMessage);
      function receiveMessage(event) {
    
    
        console.log(event.data);
      }
    </script>
    
 

B.html

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