在前端利用Broadcast Channel实现浏览器跨 Tab 窗口通信的方法

Broadcast Channel

在前端,我们经常会用postMessage来实现页面间的通信,但这种方式更像是点对点的通信。对于一些需要广播(让所有页面知道)的消息,用postMessage不是非常自然。Broadcast Channel 就是用来弥补这个缺陷的。

音乐播放器 PC 页面,在列表页面进行歌曲播放点击,如果当前没有音乐播放详情页,则打开一个新的播放详情页。但是,如果页面已经存在一个音乐播放详情页,则不会打开新的音乐播放详情页,而是直接使用已经存在的播放详情页面。这样就需要用到浏览器跨 Tab 窗口通信。

Broadcast Channel 是一个较新的 Web API,用于在不同的浏览器窗口、标签页或框架之间实现跨窗口通信。它基于发布-订阅模式,允许一个窗口发送消息,并由其他窗口接收。

其核心步骤如下:

  • 创建一个 BroadcastChannel 对象:在发送和接收消息之前,首先需要在每个窗口中创建一个 BroadcastChannel 对象,使用相同的频道名称进行初始化。

  • 发送消息:通过 BroadcastChannel 对象的 postMessage() 方法,可以向频道中的所有窗口发送消息。

  • 接收消息:通过监听 BroadcastChannel 对象的 message 事件,可以在窗口中接收到来自其他窗口发送的消息。

同时,Broadcast Channel 遵循浏览器的同源策略。这意味着只有在同一个协议、主机和端口下的窗口才能正常进行通信。如果窗口不满足同源策略,将无法互相发送和接收消息。

使用构造函数创建一个实例
const bc = new BroadcastChannel('BroadcastChannel1');

可以接受一个DOMString作为 name,用以标识这个 channel。在其他页面,可以通过传入相同的 name 来使用同一个广播频道。

该 name 值可以通过实例的.name属性获得

console.log(bc.name);
监听消息

BroadcastChannel 创建完成后,就可以在页面监听广播的消息:

bc.onmessage = function(e) {console.log('receive:', e.data);
};

对于错误也可以绑定监听:

bc.onmessageerror = function(e) {console.warn('error:', e);
}

除了为.onmessage赋值这种方式,也可以使用addEventListener来添加message监听。

发送消息

BroadcastChannel 实例也有一个对应的postMessage用于发送消息:

bc.postMessage('hello')
关闭
bc.close();

postMessage

postMessage() 方法可以在不同源的情况下,任意页面之间进行通信,它提供了一种受控机制来规避跨域的限制。

postMessage()方法语法
targetWindow.postMessagemessage,targetOrigin,[ transfer ]);
targetWindow

对将接收消息的窗口的引用。获得此类引用的方法包括:

  • Window.open (生成一个新窗口然后引用它),
  • Window.opener (引用产生这个的窗口),
  • HTMLIFrameElement.contentWindow(从其父窗口引用嵌入式),
  • Window.parent(从嵌入式内部引用父窗口)
  • Window.frames +索引值(命名或数字)。
message

要发送到其他窗口的数据。使用结构化克隆算法序列化数据。这意味着您可以将各种各样的数据对象安全地传递到目标窗口,而无需自己序列化。

targetOrigin

指定要调度的事件的targetWindow的原点,可以是文字字符串"*"(表示没有首选项),也可以是URI。

transfer(可选的)

是与消息一起传输的Transferable对象序列。这些对象的所有权将提供给目标端,并且它们在发送端不再可用。

实例

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>

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 窗口通信在实时协作、数据同步、通知提醒等方面都能发挥重要作用,为用户提供更流畅、便捷的交互体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/597491.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DVenom:一款功能强大的Shellcode加密封装和加载工具

关于DVenom DVenom是一款功能强大的Shellcode加密封装和加载工具&#xff0c;该工具专为红队研究人员设计&#xff0c;可以帮助红队成员通过对Shellcode执行加密封装和加载实现反病毒产品的安全检测绕过。 功能介绍 1、支持绕过某些热门反病毒产品&#xff1b; 2、提供了多种…

vue中的$nextTick的作用及使用场景

文章目录 一、$nextTick的作用二、特点和用途三、使用场景&#xff1a;1、在 Vue 组件内部使用&#xff1a;2、在普通 JavaScript 代码中使用&#xff1a; 三、注意事项 一、$nextTick的作用 $nextTick() 是 Vue 提供的一个异步方法&#xff0c;用于在 DOM 更新之后执行回调函…

【React系列】react-router

本文来自#React系列教程&#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. 认识react-router 1.2. 前端路由原理 前端路由是如何做到URL和内容进行映射呢&#xff1f;监听URL的改变。 UR…

新视野英语课本复盘1

the triumpth of years of hard work 多年的辛勤付出的胜利 get by on very little sleep 靠很少的睡眠勉强维持生活或工作 pursue new passions 追求新的热爱之事 reap the benefits of this opportunity 收获这个机会带来的益处 you will not only emerge as a more broadly …

目标检测YOLO实战应用案例100讲-基于红外图像处理的无人机光伏组件故障检测(续)

目录 3.2 自适应温度阈值故障检测算法设计 3.3 基于拟合灰度曲线的故障检测方案设计

自动生成表结构screw

采用的组件 screw 操作流程&#xff1a; 1、新建springboot 项目 2、引入相关的依赖 <!-- screw核心 --><dependency><groupId>cn.smallbun.screw</groupId><artifactId>screw-core</artifactId><version>1.0.4</version><…

数据库知识汇总之NoSQL

目录 数据库常见分类关系型数据库NoSQL数据库NoSQL数据库5大类型NoSQL数据库在 大数据时代的优势 数据库常见分类 数据库可以根据不同的标准进行分类&#xff0c;以下是一些常见的数据库分类方式&#xff1a; 关系型数据库&#xff08;RDBMS&#xff09;&#xff1a;这是最常…

SwiftUI之深入解析如何使用visualEffect视图修饰符

一、visualEffect 简介 在 WWDC 23 中&#xff0c;SwiftUI 引入了一个名为 visualEffect 的新视图修饰符&#xff0c;此修饰符允许通过访问特定视图的布局信息来附加一组可动画化的视觉效果。那么&#xff0c;如何在 SwiftUI 中使用新的 visualEffect 视图修饰符呢&#xff1f…

超简单|配图详细| 双系统Ubuntu22.04 系统磁盘扩容

文章目录 1. 打开磁盘工具2. 格式化空闲分区3. 挂载该分区4. 数据迁移与备份5. 卸载原分区6. 挂载新的/home分区7. 重启系统8. 删除原来的数据8.1 直接格式化分区8.2 没有单独的/home分区1. 查看设备名2. 重新挂载该分区3. 删除原始分区/home目录中的内容4. 卸载原分区5. 重启 …

关于无人机上层控制的PID算法的思考

一、前言 背景介绍&#xff1a;PID虽然出现了很多年&#xff0c;但是目前工业界还是把PID作为主流的控制算法&#xff08;尽管学术界有很多非常时尚的控制算法&#xff0c;包括鲁邦控制&#xff0c;神经网络控制等等&#xff09;&#xff0c;PID的算法在于其不需要对系统进行复…

使用 PHP-FFMpeg 操作视频/音频文件

做音频合成的时候找到的一个php操作ffmpeg 的类库。GitHub地址&#xff1a;https://github.com/PHP-FFMpeg/PHP-FFMpeg/。本文的例子大部分都是上面的 在使用之前请安装好 FFMpeg 。如何安装&#xff1f;请看 FFmpeg 安装教程。 使用composer快速安装 > composer require …

netty使用http和webSocket

1&#xff1a;pom.xml配置 <dependency><groupId>io.netty</groupId><artifactId>netty-all</artifactId><version>4.1.73.Final</version></dependency>2&#xff1a;Netty作为HTTP服务器 import io.netty.bootstrap.Server…

【Spring实战】20 Spring Data REST+JPA构建基础的RESTful API

文章目录 1. 基础概念1&#xff09;Spring Data REST2&#xff09;JPA&#xff08;Java Persistence API&#xff09; 2. 添加依赖3. 创建JPA实体4. 创建JPA Repository5. 启用Spring Data REST6. 启动服务7. 测试8. 总结 Spring Data REST 是 Spring Framework 生态系统中的一…

加密算法和身份认证

前瞻概念 在了解加密和解密的过程前&#xff0c;我们先了解一些基础概念 明文&#xff1a;加密前的消息叫 “明文” &#xff08;plain text&#xff09;密文: 加密后的文本叫 “密文” (cipher text)密钥: 只有掌握特殊“钥匙”的人&#xff0c;才能对加密的文本进行解密,这里…

【深度学习:(Contrastive Learning) 对比学习】深入浅出讲解对比学习

对比学习允许模型从未标记的数据中提取有意义的表示。通过利用相似性和不相似性&#xff0c;对比学习使模型能够在潜在空间中将相似的实例紧密地映射在一起&#xff0c;同时将那些不同的实例分开。这种方法已被证明在计算机视觉、自然语言处理 &#xff08;NLP&#xff09; 和强…

每天刷两道题——第六天

1.1字母异位词分组 给你一个字符串数组&#xff0c;将字母异位词组合在一起。可以按任意顺序返回结果列表。字母异位词指的是由重新排列源单词的所有字母得到的一个新单词。 输入: strs [“eat”, “tea”, “tan”, “ate”, “nat”, “bat”] 输出: [[“bat”],[“nat”,…

STM32和ESP8266的WiFi模块控制与数据传输

基于STM32和ESP8266 WiFi模块的控制与数据传输是一种常见的嵌入式系统应用。在这种应用中&#xff0c;STM32作为主控制器负责控制和与外部传感器交互&#xff0c;而ESP8266 WiFi模块则用于实现无线通信和数据传输。本文将介绍如何在STM32上控制ESP8266模块&#xff0c;建立WiFi…

如何定义封装全局组件

这里以封装的svg组件为例 在src文件夹目录下创建一个index.ts文件&#xff1a;用于注册components文件夹内部全部全局组件&#xff01;&#xff01;&#xff01; import SvgIcon from ./SvgIcon/index.vue; import type { App, Component } from vue; const components: { [na…

3D 纹理的综合指南

在线工具推荐&#xff1a;3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 我们经常看到超现实主义的视频游戏和动画电影角色出现在屏幕上。他们皮肤上的…

【Redux】自己动手实现redux和react-redux

1. React提供context的作用 在class组件的世界里&#xff0c;如果后代组件共享某些状态&#xff0c;比如主题色、语言键&#xff0c;则需要将这些状态提升到根组件&#xff0c;以props的方式从根组件向后代组件一层一层传递&#xff0c;这样则需要在每层写props.someData&#…