BroadCast Channel


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

下面的方式就可以创建一个标识为AlienZHOU的频道:
const bc = new BroadcastChannel(‘AlienZHOU’);

复制代码各个页面可以通过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);

Service Worker

Service Worker 是一个可以长期运行在后台的 Worker,能够实现与页面的双向通信。多页面共享间的 Service Worker 可以共享,将 Service Worker 作为消息的处理中心(中央站)即可实现广播效果。

image.png
image.png

LocalStorage

image.png

Shared Worker

image.png
image.png
image.png

IndexedDB

image.png
image.png
image.png

window.open + window.opener

image.png
image.png

非同源页面之间的通信

image.png
image.png
image.png