跨域

最新推荐文章于 2022-11-26 20:51:55 发布

weixin_33729196

最新推荐文章于 2022-11-26 20:51:55 发布

阅读量125

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yayaxuping/p/10955566.html

博客介绍了跨域方式，提及使用iframe，还给出了a页面和b.html相关内容，并标注转载自https://www.cnblogs.com/yayaxuping/p/10955566.html 。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，跨域方式

iframe

+postMessage+message

a页面

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>parent</title>
</head>

<body>
  <p>this is parent window</p>
  <input type="text" id="parentMsg">
  <button id="sendParentMsg">发送信息到iframe</button>
  <div class="contents">
    <p>这里会展示收到的信息</p>
  </div>
  <iframe src="b.html" frameborder="2" id="childIframe" height="500" width="800"></iframe>
  <script>
    var origin, win;
    // 为父页面绑定message事件，接受来自iframe发送的消息
    window.addEventListener('message', event => {
      document.querySelector('.contents').innerHTML += `<p> 收到信息：${event.data}, 来自于${event.origin}</p>`;
    });
    // win可以是iframe的引用，也可以是通过通过父页面打开的子页面的window引用，比如子页面是通过window.open打开的，那么win可以是win = window.open(url, '_blank'),这样便可以实现两个tab页之间的通信
    win = document.querySelector('#childIframe').contentWindow;
    document.querySelector('#sendParentMsg').addEventListener('click', () => {
      var parentMsg = document.querySelector('#parentMsg').value.trim();
      if (parentMsg) {
        win.postMessage(parentMsg, '*');
        document.querySelector('#parentMsg').value = '';
      }
    })
    
  </script>
</body>

</html>
iframe页面代码

b.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>child</title>
</head>

<body>
  <p>this is iframe page</p>
  <label for="subpageInput"> 请输入信息</label>
  <input type="text" id="subpageInput">
  <button class="sendSubpage">发送信息到父页面</button>
  <div class="contents">
  </div>
  <script>
    var parentWin, parentOrigin;
    // 监听来自父页面的消息
    window.addEventListener('message', event => {
      parentOrigin = event.origin; // 获取发送方页面的origin，通过判断此属性来识别发送方的身份
      parentWin = event.source; // 获取发送发window对象的引用，可以通过这个对象调用postMessage方法实现父子页面互相通信。
      document.querySelector('.contents').innerHTML += `<p>iframe 收到信息：${event.data}, 来自于${event.origin}</p>`;
    });
    document.querySelector('.sendSubpage').addEventListener('click', () => {
      var subMessage = document.querySelector('#subpageInput').value.trim();
      if (subMessage) {
        // submessage为要发送的信息，'*'为指定某个域接受信息
        parentWin.postMessage(subMessage, '*')
        document.querySelector('#subpageInput').value = '';
      }
    })
  </script>
</body>

</html>