前端广播式通信 BroadCast Channel(实现页面之间通信)

BroadCast Channel 可以帮我们创建一个用于广播的通信频道。当所有页面都监听同一频道的消息时,其中某一个页面通过它发送的消息就会被其他所有页面收到。它的API和用法都非常简单。

下面的方式就可以创建一个标识为AlienZHOU的频道:

const bc = new BroadcastChannel('AlienZHOU');

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

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

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

bc.postMessage(mydata);



详情参考  https://github.com/alienzhou/blog/issues/26     3分钟速览】前端广播式通信



页面之间通信其他方法           LocalStorage     vue专属 vuex

你可能感兴趣的:(前端广播式通信 BroadCast Channel(实现页面之间通信))