iframe嵌入页面跨域通信_iframe跨域问题嵌入别人的网站

作者：一键难忘520 | 2024-06-30 23:55:39

踩

iframe跨域问题嵌入别人的网站

在项目中可能会通过iframe直接将另一个页面嵌入进来，某些场景下还可能会进行一些消息的传递通信。之前做过一次，就是我们开发的主系统，然后下面还有很多子系统，子系统都是通过iframe嵌入进来的，然后为了实现某些需求，需要将token传递给子系统，拱子系统使用，但是当时一直忙着开发，忘记记录了，所以这篇算是补上吧

嵌入进来的页面的window跟我们现在的window已经不是同一个了，更不是同一个document。

然后跨域通信的话，父窗口向子窗口我们通过 iframe.contentWindow.postMessage 发送消息；子窗口向父窗口我们通过 window.parent.postMessage 发送消息；然后接受的话都是监听window的message事件，如下：

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

message

是我们发送的信息，一般我会传个JSON，也可以是个对象、字符串。。

targetOrigin

表示目标窗口的源，协议+域名+端口号，如果设置为“ * ”，则表示可以传递给任意窗口。

第三个我暂时还没用过，感兴趣的伙伴可以自行找找看奥

父窗口向子窗口发送消息


iframe.contentWindow.postMessage(JSON.stringify({
  type: 'www',
  ctx: '给你消息，收到了嘛?'
}), '*')

子窗口向父窗口发送消息


window.parent.postMessage(JSON.stringify({
  type: 'yes',
  ctx: '我收到您发送的消息了！'
}), '*')

接受消息

包括父窗口发送给子窗口的和子窗口发送给父窗口的，都一样，都是通过监听window的message事件


// 接受消息
window.addEventListener('message', receiveMessage, false)
 
function receiveMessage(event) {
  const msg = JSON.parse(event.data)
  console.log(msg, '----->>>')
}

测试的完整代码

父窗口


<!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>Document</title>
</head>
<body>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    .content {
      width: 100vw;
      height: 100vh;
      position: relative;
    }
    .content button {
      position: absolute;
      top: 150px;
      left: 50%;
      transform: translateX(-50%);
    }
    .iframe {
      width: 500px;
      height: 500px;
      border: 1px solid #ccc;
      border-radius: 6px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
 
  <div class="content">
    <button id="btn">SEND</button>
    <div class="iframe">
      <iframe id="my-iframe" src="./iframe.html" style="width: 100%;height: 100%;" frameborder="0"></iframe>
    </div>
  </div>
 
  <script>
    const $ = name => document.querySelector(name)
    
    // 发送消息到子窗口
    $('#btn').onclick = function(e) {
      $('#my-iframe').contentWindow.postMessage(JSON.stringify({
        type: 'www',
        ctx: '给你消息，收到了嘛?'
      }), '*')
    }
 
    // 接受子窗口的消息
    window.addEventListener('message', receiveMessage, false)
 
    function receiveMessage(event) {
      const msg = JSON.parse(event.data)
      console.log(msg, '----->>>')
    }
  </script>
</body>
</html>

子窗口（iframe.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>Document</title>
</head>
<body>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    .iframe-content {
      width: 100vw;
      height: 100vh;
      background-color: #f5f5f5;
      text-align: center;
      line-height: 100vh;
    }
  </style>
 
  <div class="iframe-content">
    <span>我是Iframe</span>
    <button id="iframe-btn">SEND</button>
  </div>
  <script>
 
    // 接受父窗口的消息
    window.addEventListener('message', receiveMessage, false)
 
    function receiveMessage(event) {
      const msg = JSON.parse(event.data)
      console.log(msg, '----->>>')
    }
 
    // 10s后发送消息到父窗口
    setTimeout(() => {
      window.parent.postMessage(JSON.stringify({
        type: 'yes',
        ctx: '我收到您发送的消息了！'
      }), '*')
    }, 5000)
  </script>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/一键难忘520/article/detail/774426

iframe嵌入页面跨域通信_iframe跨域问题 嵌入别人的网站