同源窗口之间通讯

最新推荐文章于 2024-04-23 16:07:46 发布

夕心o

最新推荐文章于 2024-04-23 16:07:46 发布

阅读量136

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/qq_38779317/article/details/134622368

版权

本文介绍了如何在两个同源的HTML页面间使用JavaScript的BroadcastChannelAPI进行异步通信，通过`postMessage`发送消息并监听`message`事件来实现数据交换。

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

// page1.html
<script >
  const oBtn = document.querySelector('#btn');
  const channel1 = new BroadcastChannel('72'); // 设置通讯频道 id, 连个通讯页面通讯频道需要一致
  
  oBtn.addEventListener('click', () => {
    channel1.postMessage({  // 通过 postMessage 发送消息
      title: '同源窗口通信-测试'
    })
	// broadCastChannel1.close()  // 关闭通讯
  })

// page2.html
<script>
   const channel2 = new BroadcastChannel('72'); // 与发送页面频率要一致
   console.log(321, broadCastChannel2)

   channel2.addEventListener('message', (e) => { // 通过监听 message 事件获取数据
     console.log(123, e)
   })
 </script>