BroadcastChannel 实现浏览器tab无刷新通讯

最新推荐文章于 2024-07-25 09:55:03 发布

风吹一夏v

最新推荐文章于 2024-07-25 09:55:03 发布

阅读量370

点赞数

文章标签： udp 网络协议网络

本文链接：https://blog.csdn.net/m0_50864962/article/details/132076312

版权

前提须知

使用 BroadcastChannel 来实现浏览器tab通讯必须是同源的
BroadcastChannel 支持多tab间通讯
mdn 链接

具体使用

发送方使用

<!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>
    <button style="all: unset" onclick="onSend()">发送</button>
  </div>
  <script>
    /**
     * BroadcastChannel 
     * 接收方和发送发必须是同源的才行进行浏览器tab的通讯
     * 
    */
    const broadcast = new BroadcastChannel('music')
    
    broadcast.onmessage = (e) => {
      console.log(e)
    }
    function onSend() {
      console.log('点击了');
      broadcast.postMessage({
        name: 'music',
        data: '发送的数据'
      })
    }
  </script>
</body>
</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>
  <script>
    const broadcast = new BroadcastChannel('music')
    broadcast.onmessage = ({data}) => {
      console.log('music接受数据了', data)
    }
  </script>
</body>
</html>