跨域通信iframe+postMessage

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我是主框架页面</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <section style="padding: 10px; min-height: 100px">
      <div>我是主框架页面</div>
      <div>我接收到的信息如下：</div>
      <div class="received"></div>
    </section>

    <iframe id="iframe" src="http://192.168.0.100:3002/son.html" width="100%" height="100%" frameborder="0"></iframe>

    <script>
      const received = document.querySelector('.received');
      const iframe = document.getElementById('iframe');

      // 监听子页面发送过来的信息
      const receivedMessage = function (event) {
        console.log('received message from son: ', event);
        const data = event.data;
        received.innerHTML = JSON.stringify(data);
        iframe.contentWindow.postMessage({ data: '我已经收到你发送的数据啦' + data.message }, { targetOrigin: '*' });
      };
      window.addEventListener('message', receivedMessage, false);

      localStorage.setItem('parent', '主框架页面数据');
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>子系统页面</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .son {
        width: 100%;
        height: 100%;
        background-color: #e4e4e4;
      }
      .content {
        padding: 20px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body class="son">
    <section class="content">
      <h2>我是子系统页面区域</h2>
      <input type="text" class="inputMessage" placeholder="输入待发送的信息" />
      <button class="sendMessageToParent">向父容器发送信息</button>
      <section>接收数据如下：</section>
      <div class="received"></div>
    </section>

    <script>
      const inputMessage = document.querySelector('.inputMessage');
      const sendMessageToParent = document.querySelector('.sendMessageToParent');
      const received = document.querySelector('.received');

      // 发送信息
      const sendMessage = function () {
        const value = inputMessage.value;
        if (value) {
          window.parent.postMessage({ message: value }, { targetOrigin: '*' });
        }
      };
      sendMessageToParent.addEventListener('click', sendMessage, false);
      localStorage.setItem('son', 'son数据');

      // 接收信息
      const receivedMessage = function (event) {
        console.log('received message from parent: ', event);
        received.innerHTML = JSON.stringify(event.data);
      };
      window.addEventListener('message', receivedMessage, false);
    </script>
  </body>
</html>

// 对于多层嵌套的iframe向最外层发送消息的解决通信方案如下：
/**
 * iframe嵌套页面向最外层发送消息
 * @param message 
 */
function postMessageFromIFramePage(message) {
    var top = window.top;
    while(top.top != top.self){
        top = top.top
    }
    top.postMessage(message, '*');
}

跨域通信iframe+postMessage

推荐阅读更多精彩内容