文章目录
-
-
- [一、Broadcast Channel](#一、Broadcast Channel)
- 二、postMessage
- 三、总结
- 四、应用场景
-
一、Broadcast Channel
在前端，我们经常会用postMessage来实现页面间的通信，但这种方式更像是点对点的通信。对于一些需要广播（让所有页面知道）的消息，用postMessage不是非常自然。Broadcast Channel 就是用来弥补这个缺陷的。
音乐播放器 PC 页面，在列表页面进行歌曲播放点击，如果当前没有音乐播放详情页，则打开一个新的播放详情页。但是，如果页面已经存在一个音乐播放详情页，则不会打开新的音乐播放详情页，而是直接使用已经存在的播放详情页面。这样就需要用到浏览器跨 Tab 窗口通信。
Broadcast Channel 是一个较新的 Web API，用于在不同的浏览器窗口、标签页或框架之间实现跨窗口通信。它基于发布-订阅模式，允许一个窗口发送消息，并由其他窗口接收。
其核心步骤如下：
-
创建一个 BroadcastChannel 对象：在发送和接收消息之前，首先需要在每个窗口中创建一个 BroadcastChannel 对象，使用相同的频道名称进行初始化。
-
发送消息：通过 BroadcastChannel 对象的 postMessage() 方法，可以向频道中的所有窗口发送消息。
-
接收消息：通过监听 BroadcastChannel 对象的 message 事件，可以在窗口中接收到来自其他窗口发送的消息。
同时，Broadcast Channel 遵循浏览器的同源策略。这意味着只有在同一个协议、主机和端口下的窗口才能正常进行通信。如果窗口不满足同源策略，将无法互相发送和接收消息。
1、创建实例
const bc = new BroadcastChannel('BroadcastChannel1');
可以接受一个DOMString作为 name，用以标识这个 channel。在其他页面，可以通过传入相同的 name 来使用同一个广播频道。
该 name 值可以通过实例的.name属性获得
console.log(bc.name);
2、监听消息
BroadcastChannel 创建完成后，就可以在页面监听广播的消息：
bc.onmessage = function(e) {
console.log('receive:', e.data);
};
对于错误也可以绑定监听：
bc.onmessageerror = function(e) {
console.warn('error:', e);
}
除了为.onmessage赋值这种方式，也可以使用addEventListener来添加message监听。
3、发送消息
BroadcastChannel 实例也有一个对应的postMessage用于发送消息：
bc.postMessage('hello')
4、关闭
bc.close();
5、示例演示
5.1、主控页面
<template>
<div>
<div class="flex">
<div class="box" v-for="item in 10" @click="itemClick(item)">
<img :alt="item" src="../assets/logo.png">
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
editorChannel: null,//BroadcastChannel实例
isBroadcastChannel: 0,//窗口数
};
},
methods: {
itemClick(id) {
console.log('是否有窗口：', this.isBroadcastChannel)
//是否有打开的窗口
if (this.isBroadcastChannel * 1 > 0) {
this.editorChannel.postMessage({
type: 'data', data: id
})
} else {
window.open(`/shoukong/${id}`, 'BroadcastChannel1');
}
}
},
mounted() {
let that = this
this.editorChannel = new BroadcastChannel('BroadcastChannel1');
//监听消息
this.editorChannel.onmessage = function (e) {
if (e.data.type == 'load') {
that.isBroadcastChannel += 1
}
if (e.data.type == 'unload') {
that.isBroadcastChannel -= 1
}
console.log('窗口数：', that.isBroadcastChannel)
};
},
beforeDestroy() {
//关闭
this.editorChannel.close()
this.editorChannel = null
this.isBroadcastChannel = null
}
}
</script>
5.2、受控页面
<template>
<div>
<h1>This is an shoukong page - {{ id }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
editorChannel: null,//BroadcastChannel实例
id: 0 //参数
};
},
methods: {
},
created() {
//新打开窗口时接受的参数
this.id = this.$route.params.id || 0
},
mounted() {
//监听浏览器窗口关闭
window.onunload = () => {
this.editorChannel.postMessage({
type: 'unload', data: '1'
})
this.editorChannel = null
};
this.editorChannel = new BroadcastChannel('BroadcastChannel1');
//发送消息，告知有新窗口打开了
this.editorChannel.postMessage({
type: 'load', data: '1'
})
let that = this
//监听消息，收到的消息
this.editorChannel.onmessage = function (e) {
that.id = e.data.data
};
},
//组件卸载
beforeDestroy() {
this.editorChannel.postMessage({
type: 'unload', data: '1'
})
this.editorChannel = null
}
}
</script>
二、postMessage
postMessage() 方法可以在不同源的情况下，任意页面之间进行通信，它提供了一种受控机制来规避跨域的限制。
1、语法
targetWindow.postMessagemessage，targetOrigin，[ transfer ]）;
1.1、targetWindow
对将接收消息的窗口的引用。获得此类引用的方法包括：
- Window.open （生成一个新窗口然后引用它），
- Window.opener （引用产生这个的窗口），
- HTMLIFrameElement.contentWindow（<iframe>从其父窗口引用嵌入式），
- Window.parent（从嵌入式内部引用父窗口<iframe>）
- Window.frames +索引值（命名或数字）。
1.2、message
要发送到其他窗口的数据。使用结构化克隆算法序列化数据。这意味着您可以将各种各样的数据对象安全地传递到目标窗口，而无需自己序列化。
1.3、targetOrigin
指定要调度的事件的targetWindow的原点，可以是文字字符串"*"（表示没有首选项），也可以是URI。
1.4、transfer（可选的）
是与消息一起传输的Transferable对象序列。这些对象的所有权将提供给目标端，并且它们在发送端不再可用。
2、示例演示
2.1、parent页面
<textarea id="message"></textarea>
<input type="button" value="向子窗口发送消息" onclick="sendPostToChild()">
<iframe src="child.html" id="childPage"></iframe>
<script>
// sendPostToChild 通过postMessage实现跨域通信将表单信息发送到 child.html 上,
// 并取得返回的数据
function sendPostToChild() {
// 获取id为childPage的iframe窗口对象
var iframeWin = document.getElementById("childPage").contentWindow;
// 向该窗口发送消息
iframeWin.postMessage(document.getElementById("message").value, '*');
}
// 监听跨域请求的返回
window.addEventListener("message", function (event) {
console.log("parent:", event);
}, false);
</script>
2.2、child页面
<textarea id="message"></textarea>
<input type="button" value="向父窗口发送消息" onclick="sendPostToParent()">
<script>
function sendPostToParent() {
// 向父窗口发送消息
window.parent.postMessage(document.getElementById("message").value, '*');
}
// 监听message事件，如果有监听到消息内容就执行以下内容
window.addEventListener("message", (e) => {
console.log("children:", e)
});
</script>
三、总结
基于 BroadcastChannel，就可以实现每个 Tab 内的核心信息互传， 再基于这些信息去完成我们想要的动画、交互等效果。
- Broadcast Channel 与 window.postMessage 都能进行跨页面通信
- Broadcast Channel 只能用于同源页面之间进行通信，而window.postMessage可以任何页面之间通信
- 基于 Broadcast Channel 的同源策略，它无法完成跨域的数据传输；跨域的情况，我们只能使用window.postMessage 来处理
- Broadcast Channel 更加安全，一般推荐使用 Broadcast Channel 来进行跨页面通信
四、应用场景
实际业务中，还有许多场景是它可以发挥作用的。这些场景利用了跨 Tab 通信技术，增强了用户体验并提供了更丰富的功能。
-
实时协作：多个用户可以在不同的 Tab 页上进行实时协作，比如编辑文档、共享白板、协同编辑等。通过跨Tab通信，可以实现实时更新和同步操作，提高协作效率。
-
多标签页数据同步：当用户在一个标签页上进行了操作，希望其他标签页上的数据也能实时更新时，可以使用跨 Tab 通信来实现数据同步，保持用户在不同标签页上看到的数据一致性。
-
跨标签页通知：在某些场景下，需要向用户发送通知或提醒，即使用户不在当前标签页上也能及时收到。通过跨 Tab 通信，可以实现跨页面的消息传递，向用户发送通知或提醒。
-
多标签页状态同步：有些应用可能需要在不同标签页之间同步用户的状态信息，例如登录状态、购物车内容等。通过跨 Tab 通信，可以确保用户在不同标签页上看到的状态信息保持一致。
-
页面间数据传输：有时候用户需要从一个页面跳转到另一个页面，并携带一些数据，通过跨Tab通信可以在页面之间传递数据，实现数据的共享和传递。
总之，跨 Tab 窗口通信在实时协作、数据同步、通知提醒等方面都能发挥重要作用，为用户提供更流畅、便捷的交互体验。