【插件】不同页面上下文之间（如标签页或窗口之间）的消息通信

amtath

情境

存在这么一种情况，标签页使用母版页，标签页内的页面也使用母版页。此时想让标签内的页面给标签页的母版页传递一个消息。

嵌套.png590078124.png

解决办法

BroadcastChannel介绍
BroadcastChannel 是一种 Web API，允许同一来源的不同浏览上下文（如标签页、iframe 或 Web worker）之间进行消息传递。这种机制使得在同一站点的不同页面之间同步数据变得非常简单和高效。

特性
• 同源策略：BroadcastChannel 只允许同一来源的页面之间进行通信。
• 实时通信：消息传递是即时的，没有显著延迟。
• 简洁易用：API 简单直观，易于上手。

使用场景
• 多标签页同步：用户在一个标签页中进行的操作可以实时同步到其他标签页。
• 跨 iframe 通信：在不同的 iframe 之间传递消息，无需通过父页面中转。
• Web worker 通信：在主线程和多个 Web worker 之间实现高效通信。

原文链接：https://blog.csdn.net/qq_41292756/article/details/140458313

复制代码

广播频道插件

基于BroadcastChannel开发了一组前端命令来实现我想要的效果。其实在最开始只是复制的JS代码直接以JavaScript命令的方式调用。

image.png887640075.png

广播频道在关闭页面后就会被销毁，一般不用手动销毁。此外广播频道被创建在一个集合中，当涉及到创建的时候都会判断一下，防止浪费。需要注意的是不要传输重量级数据，会导致性能开销过大。最后说明一点，BroadcastChannel 设计用于解决在不同页面上下文之间（如标签页或窗口之间）的消息通信问题，无法在同一页面的同一个执行上下文中生效。

image.png146257933.png