前端中的广播通信——BroadcastChannel_new broadcastchannel-CSDN博客

本文链接：https://blog.csdn.net/weixin_44691513/article/details/114434589

我们经常会用postMessage来实现页面间的通信，但这种方式更像是点对点的通信。但是当我们使用广播通信时我们只要在一个页面发送信息，其他所有的页面都能接收到这条信息，但是前提是同源页面。
下面的方式就可以创建一个标识为kevin的频道：

const bc = new BroadcastChannel('kevin');

各个页面可以通过onmessage来监听被广播的消息：

bc.onmessage = function (e) {
    const data = e.data;
    const text = '[receive] ' + data.msg + ' —— tab ' + data.from;
    console.log('[BroadcastChannel] receive message:', text);
};

要发送消息时只需要调用实例上的postMessage方法即可：

bc.postMessage(mydata);

看个实例：
第一个页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="button">点击</button>
    <script>
        let button=document.getElementById('button')
        button.onclick=function(){
            let cast = new BroadcastChannel('mychannel'); //创建一个名字是mychannel的对象。记住这个名字，下面会用到
            myObj = { from: "children1", content: "add" };
            cast.postMessage(myObj);
        }
       
    </script>
</body>
</html>

第二个页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        let cast1 = new BroadcastChannel('mychannel');//创建一个和刚才的名字一样的对象
        cast1.onmessage = function (e) {
            //e.data就是刚才的信息; 
            console.log(e.data);
        };
    </script>
</body>
</html>