场景说明

想象一下,目前你在浏览某个网站,打开了两个窗口,这两个窗口都是同一个网站的不同页面内容,我们暂且叫做 A、B 页面. 当我们在 A 页面登录的时候, 我们想要操作 B 页面,就会发现 B 页面没有登录,我们需要手动刷新一下页面才可以将登陆状态应用到 B 页面.

这是很影响体验的,所以 我们现在有了 Broadcast Channel Api 我们就可以实现登陆状态的同步,甚至其他相似的操作. 接下来 我们来看看这个神奇的 Api

Broadcast Channel

hello 大家好 今天的主题是 Broadcast Channel Api

先来看看这个 Api 是一个什么功能的 Api 哪? 按照官方一点的说明,此 Api 可以实现同源下浏览器不同窗口,Tab 页，frame 或者 iframe 下的 浏览器上下文 (通常是同一个网站下不同的页面) 之间的简单通讯。

这个 Api 的设计模式依然是我们熟悉的监听者模式, 安全性考量下, 官方依然准守同源的安全防护策略,

此 Api 也是运行在 Worker 中的,所以对 UI 渲染展示性能没有任何影响,

还有就是 此 Api 支持双向访问的.

浏览器支持说明

事例

var bc = new BroadcastChannel("test_local_channel");
bc.onmessage = function (msg) {
  alert(msg.data);
};
bc.onmessageerror = function (err) {
  alert(err);
};

实战演练(视频)

实战的部分我通过录屏讲解的方式发布到了 抖音 上,大家可以去关注我一下哦. 😄 👉 传送门