window.postMessage() 父子之间的窗口通信

最新推荐文章于 2025-03-10 15:34:42 发布

Daisukes

最新推荐文章于 2025-03-10 15:34:42 发布

阅读量5.9k

点赞数 2

文章标签： vue postMessage

本文链接：https://blog.csdn.net/Daisukes/article/details/100080483

版权

本文介绍了一个使用iframe嵌入页面并实现跨窗口通讯的例子。详细展示了如何在A.html中通过按钮触发向B.html发送消息，以及B.html如何响应并回传信息至A.html，实现了双向通讯。文中涉及了postMessage API的使用，适用于需要在不同源或域间进行通讯的场景。

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

A.html ,b.html A通过iframe嵌入B

接收消息vue都可以在mounted中获取

// A.html
<body>
<button id="button">发送到B</button>
<iframe src="B.html" id='myframe'></iframe>
 </body>

<script>
// A 向B传递信息
document.getElementById("button").contentWindow.postMessage("sendMessage", '*');
 
// A 接收B的信息
window.addEventListener("message", function(e){
      if (e.data === 'reimbClose') {
        // 事件
      }
    }, false);
<script>

B.html

<body>
<button id="button">发送A</button>
</body>
<script>
var button = document.getElementById('button');
// B 向A传递信息
button.addEventListener('click',function(){
        window.parent.postMessage('reimbClose','*');
},false)
 
// B 接收A的信息
window.addEventListener('message', function(e) {
  if(e.data === 'sendMessage'){//关闭窗口停止websocket
    // 事件
  }
})
</script>