iframe通信—postMessage

Ho95

已于 2024-08-07 14:17:35 修改

阅读量318

点赞数 4

文章标签： javascript

于 2024-08-07 14:16:44 首次发布

本文链接：https://blog.csdn.net/weixin_40803490/article/details/140990845

版权

通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为 https），端口号（443 为 https 的默认值），以及两个页面的域名Document.domain设置为相同的值时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，可以实现跨源通信。

父页面url：http://10.9.0.89:8080/index.html

<!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>
  <div>
    <div>父页面</div>
    <iframe id="page1" src="http://10.9.0.89:8081/index.html" frameborder="0"></iframe>
  </div>
  <script lang="javascript">
    window.onload = function(){
      console.log("父页面加载成功");
      window.addEventListener("message", (event) =>{
        if(event.origin !== "http://10.9.0.89:8081")return;
        console.log("父页面接收到的数据", event.data);
      })
      // 向子页面发送消息
      document.getElementById("page1").contentWindow.postMessage({value: "parent"}, "http://10.9.0.89:8081")
    };
  </script>
</body>
</html>

子页面url：http://10.9.0.89:8081/index.html

<!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>
  <div>子页面</div>
  <script lang="javascript">
    window.onload = function(){
      console.log("子页面加载成功");
    };
    window.addEventListener("message", function(event) {
      if(event.origin !== "http://10.9.0.89:8080") return;
      console.log("页面1接收到数据", event.data);
      // 向父页面发送消息
      window.parent.postMessage({value: "son"}, 'http://10.9.0.89:8080')
    })
  </script>
</body>
</html>

postMessage() 参数具体使用方法参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage