额额。。。 2024-12-18 19:12 采纳率: 54.8%
浏览 27
已结题

iframe通信怎么不行了父页面

iframe通信怎么不行了
父页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <iframe id="iframe" src="xxxx" frameborder="0" scrolling="no"></iframe>

  <script>
  
      
      const iframe=document.getElementById('iframe').contentWindow
      iframe.postMessage('getIframeHeight','*')

      window.addEventListener('message',function(e){
        console.log(e.data,'e.data');
      })
      
  </script>
</body>
</html>

iframe页面

<script>

 window.addEventListener('message', function(e) {
        if(e.data=='getIframeHeight'){
            console.log('getIframeHeight');
        }
    });

</script>

但是打印不出来信息咋回事,src确实是目标iframe,先不管通配符,iframe打印不出来东西

  • 写回答

1条回答 默认 最新

  • 关注

    以下回复参考:皆我百晓生券券喵儿等免费微信小程序作答:

    从您提供的代码来看,您正在尝试使用 postMessagewindow.addEventListener 进行跨域 iframe 通信。然而,有几个可能的原因导致您无法成功接收来自父页面的消息。以下是一些可能的问题和解决方案:

    1. 同源策略问题

    由于跨域通信的限制,如果 iframe 中的页面和父页面不是同源(即协议、域名或端口其中之一不同),那么直接使用 contentWindow 访问或者通过 postMessage 传递消息可能会受到限制。确保您的 iframe 页面和父页面是同源的,或者 iframe 页面的服务器配置了适当的跨域头部(如 CORS)。

    2. 消息传递方向问题

    在您的代码中,您从父页面向 iframe 发送了一个消息 'getIframeHeight',但在 iframe 页面的监听器中,您只是简单地检查了消息数据并打印出来,并没有回复或执行任何操作。如果您想在接收到这个消息后返回某些数据给父页面,您需要在 iframe 的监听器中使用 e.source.postMessage() 发送回应。

    3. 监听器放置位置

    确保您的 iframe 页面中的监听器放置在可以接收消息的 DOM 节点加载完成后。可以放在 DOMContentLoaded 事件触发之后,或者在 <body> 标签的末尾。

    修改后的代码示例:

    Iframe 页面

    document.addEventListener('DOMContentLoaded', function() {
        window.addEventListener('message', function(e) {
            if (e.data === 'getIframeHeight') {
                console.log('getIframeHeight');
                // 假设你想返回iframe的高度,可以这样回复:
                e.source.postMessage({ height: document.getElementById('iframe').offsetHeight }, '*');
            }
        });
    });
    

    4. 安全性考虑

    使用通配符 '*' 作为接收消息的来源是不安全的。如果您知道 iframe 会从哪里加载内容,请尽量指定一个具体的源,以减少潜在的安全风险。或者,如果您决定使用通配符,请确保 iframe 页面的内容只接受来自可信任源的消息。同时确保服务器配置安全策略来允许此类操作。这些调整可以极大地增加跨域通信的安全性。希望这些建议能帮助您解决问题!如果有其他疑问或问题,请继续询问。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 3月4日
  • 已采纳回答 2月24日
  • 创建了问题 12月18日