iframe 之间跨域互传参数-一点快乐

当父页面与子页面，使用不是相同的域名，或不同的端口，两个页面之间受到同源策略限制。

直接调用跨域页面的方法，会出现类似错误： Uncaught DOMException: Blocked a frame with origin "http://127.0.0.1:5500" from accessing a cross-origin frame

子页面传给父页面

子页面执行 window.parent.postMessage 方法传递参数，父页面监听 message 事件，接收参数。

子页面执行，发送参数

window.parent.postMessage('要传的参数','目标页面的地址')

window.parent.postMessage(data,'http://127.0.0.1:5500')

在父页面监听 message 事件，接收参数

window.addEventListener(
  'message',
  function (e) {
    console.log('子传父message', e.data);
  },
  false
);

父页面传给子页面

方法类似于子页面传给父页面

父页面发送

function toChild() {
  var data = '发送给子页面的内容';
  document
    .getElementById('iframe')
    .contentWindow.postMessage(data, 'http://127.0.0.1:8080');
}

子页面接收

window.addEventListener(
  'message',
  function(e) {
    console.log('收到来自父页面的内容：', e.data);
  },
  false
);

完整代码

父页面

http://127.0.0.1:5500/index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <div>父页面 <button onclick="toChild()">父传子</button></div>
      <iframe
        id="iframe"
        width="700"
        height="500"
        src="http://127.0.0.1:8080/child.html"
        frameborder="1"
      ></iframe>
    </div>

    <script>
      window.addEventListener(
        'message',
        function(e) {
          console.log('子传父 message', e.data);
        },
        false
      );

      function toChild() {
        var data = '发送给子页面的内容';
        document
          .getElementById('iframe')
          .contentWindow.postMessage(data, 'http://127.0.0.1:8080');
      }
    </script>
  </body>
</html>

子页面

http://127.0.0.1:8080/child.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>子页面<button onclick="toParent()">子传父</button></div>

    <script>
      function toParent() {
        var data = {
          name: '测试内容',
        };
        window.parent.postMessage(data, 'http://127.0.0.1:5500');
      }

      window.addEventListener(
        'message',
        function(e) {
          console.log('收到来自父页面 message:', e.data);
        },
        false
      );
    </script>
  </body>
</html>

参考链接：

浏览器的同源策略 - 跨源脚本API访问