海口网站建设品牌大全,企业网站做seo,赣州新闻发布会,广州个性化网站建设文章目录 一、Broadcast Channel1、创建实例2、监听消息3、发送消息4、关闭5、示例演示5.1、主控页面5.2、受控页面 二、postMessage1、语法1.1、targetWindow1.2、message1.3、targetOrigin1.4、transfer#xff08;可选的#xff09; 2、示例演示2.1、parent页面2.2、child… 文章目录 一、Broadcast Channel1、创建实例2、监听消息3、发送消息4、关闭5、示例演示5.1、主控页面5.2、受控页面 二、postMessage1、语法1.1、targetWindow1.2、message1.3、targetOrigin1.4、transfer可选的 2、示例演示2.1、parent页面2.2、child页面 三、总结四、应用场景 一、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、主控页面
templatedivdiv classflexdiv classbox v-foritem in 10 clickitemClick(item)img :altitem src../assets/logo.png/div/div/div
/templatescript
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 thisthis.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 nullthis.isBroadcastChannel null}
}
/script5.2、受控页面
templatedivh1This 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.postMessagemessagetargetOrigin[ transfer ];1.1、targetWindow
对将接收消息的窗口的引用。获得此类引用的方法包括
Window.open 生成一个新窗口然后引用它Window.opener 引用产生这个的窗口HTMLIFrameElement.contentWindowiframe从其父窗口引用嵌入式Window.parent从嵌入式内部引用父窗口iframeWindow.frames 索引值命名或数字。
1.2、message
要发送到其他窗口的数据。使用结构化克隆算法序列化数据。这意味着您可以将各种各样的数据对象安全地传递到目标窗口而无需自己序列化。
1.3、targetOrigin
指定要调度的事件的targetWindow的原点可以是文字字符串*表示没有首选项也可以是URI。
1.4、transfer可选的
是与消息一起传输的Transferable对象序列。这些对象的所有权将提供给目标端并且它们在发送端不再可用。
2、示例演示
2.1、parent页面
textarea idmessage/textarea
input typebutton value向子窗口发送消息 onclicksendPostToChild()
iframe srcchild.html idchildPage/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);
/script2.2、child页面
textarea idmessage/textarea
input typebutton value向父窗口发送消息 onclicksendPostToParent()
scriptfunction 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 窗口通信在实时协作、数据同步、通知提醒等方面都能发挥重要作用为用户提供更流畅、便捷的交互体验。
