跨页面通信BroadcastChannel

最新推荐文章于 2025-10-10 12:00:54 发布

原创最新推荐文章于 2025-10-10 12:00:54 发布 · 755 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

js 专栏收录该内容

26 篇文章

订阅专栏

BroadcastChannel API允许在同一原始域名和用户代理下的不同窗口、iframe之间进行实时通信，类似于广播机制。通过创建BroadcastChannel对象并发送消息，可以实现在网页的各个部分之间传递数据。例如，父页面创建并发送数据，子页面则可以监听并接收这些数据，从而实现跨窗口的数据交互。

BroadcastChannel，这个方式，只要是在同一原始域和用户代理下，所有窗口、iframe之间都可以进行交互。这个感觉就有点类似于广播了。

 1，父页面发送数据

var BroadcastChanne1 = new BroadcastChannel('name');//创建一个名字是name BroadcastChannel对象
//广播值
BroadcastChanne1.postMessage("data")
 
2，子页面接收

var BroadcastChanne1 = new BroadcastChannel('name');//要接收到数据，BroadcastChannel对象的名字必须相同
BroadcastChanne1.onmessage = function(event){
	console.log(event.data);//发送的数据
	//逻辑处理
}