前端跨页面通信方案介绍

在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个“独立”的运行环境,即使是全局对象也不会在多个Tab间共享。然而有些时候,我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。这就是本文说说的跨页面通信方案,那么目前有哪些跨页面的通信方案呢?本文重点介绍一下。

同源页面之间跨页面通信一般有如下几种方案。

一、BroadCast Channel

目前查了一下兼容性,除了ie之外,所有浏览器基本都支持这个api了,所以可以大胆用起来,假如确实要支持ie,也可以用polyfill。

具体语法和websocket有点像如下:

  const bc = new BroadcastChannel('haorooms');//可以接受一个DOMString作为 name,用以标识这个 channel。在其他页面,可以通过传入相同的 name 来使用同一个广播频道。只用同样标识的页面才能收到广播,不同的收不到。console.log(bc.name) // 输出构造实例的标识,haorooms。bc.onmessage = function(e) {// 通过onmessage监听事件console.log('receive:', e.data);};bc.addEventListener('message',(e)=>{// 通过addEventLister监听事件,和上面的onmessage都可以,二选一,我个人倾向addEventlisterconsole.log('receivebyaddEventlistener:', e.data);})bc.onmessageerror = function(e) {console.warn('error:', e);}bc.postMessage('hello haorooms test broadcastchannel')

关闭

bc.close();

备注:这种方式好处是发送广播之后,自己 不会再收到,其他使用了相同实例的页面可以时时收到。用起来也很方便,非常简单和易用。

二、Service Worker

PWA的Service Worker也可以实现 不同页面之间的通信。

步骤如下:

首先,需要在页面注册 Service Worker:

/* 页面逻辑 */
navigator.serviceWorker.register('../haorooms.sw.js').then(function () {console.log('Service Worker 注册成功');
});

其中../haorooms.sw.js是对应的 Service Worker 脚本。Service Worker 本身并不自动具备“广播通信”的功能,需要我们添加些代码,将其改造成消息中转站:

/* ../haorooms.sw.js Service Worker 逻辑 */
self.addEventListener('message', function (e) {console.log('service worker receive message', e.data);e.waitUntil(self.clients.matchAll().then(function (clients) {if (!clients || clients.length === 0) {return;}clients.forEach(function (client) {client.postMessage(e.data);});}));
});

处理完 Service Worker,我们需要在页面监听 Service Worker 发送来的消息。

/* 页面逻辑 */
navigator.serviceWorker.addEventListener('message', function (e) {const data = e.data;const text = '[receive] ' + data.msg + ' —— haorooms_tab' + data.from;console.log('[Service Worker] receive message:', text);
});

最后,当需要同步消息时,可以调用 Service Worker 的postMessage方法:

/* 页面逻辑 */
navigator.serviceWorker.controller.postMessage(mydata);

三、LocalStorage

作为前端,LocalStorage是再熟悉不过了,但是用这个作为页面通信,还是头一次。这里通信其实只是简单的通信,主要通过LocalStorage的事件来完成的。

当 LocalStorage 变化时,会触发storage事件。利用这个特性,我们可以在发送消息时,把消息写入到某个 LocalStorage 中;然后在各个页面内,通过监听storage事件即可收到通知。

window.addEventListener('storage', function (e) {if (e.key === 'haorooms_localstoragekey') {const data = JSON.parse(e.newValue);const text = '[receive] ' + data.msg + ' —— haorooms_tab1 ' + data.from;console.log('[Storage I] receive message:', text);}
});

四、其他

之所以写其他,是因为方案只是可以完成页面通信,但是不是实际意义上面的通信,例如Shared Worker、IndexedDB、cookie,可以通过共享存储的方式来完成通信。window.open + window.opener这种方式可以通过扣扣相传的方式完成通信,还有websocket方式可以通过服务中转方案完成通信。 这里不详细展开介绍,感兴趣的可以搜索。

非同源页面之间的通信

非同源通信相对较麻烦一些,我们可以使用一个用户不可见的 iframe 作为“桥”。由于 iframe 与父页面间可以通过指定origin来忽略同源限制,因此可以在每个页面中嵌入一个 iframe (例如:haorooms.com/bridge.html),而这些 iframe 由于使用的是一个 url,因此属于同源页面,其通信方式可以复用上面第一部分提到的各种方式。

/* iframe 内代码 */
const bc = new BroadcastChannel('haorooms_bc');
// 收到来自页面的消息后,在 iframe 间进行广播
window.addEventListener('message', function (e) {bc.postMessage(e.data);
}); 其他 iframe 收到通知后,则会将该消息同步给所属的页面:
/* iframe 内代码 */
// 对于收到的(iframe)广播消息,通知给所属的业务页面
bc.onmessage = function (e) {window.parent.postMessage(e.data, '*');
};

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

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

相关文章

算法学习——LeetCode力扣动态规划篇2(343. 整数拆分、96. 不同的二叉搜索树、416. 分割等和子集、1049. 最后一块石头的重量 II)

算法学习——LeetCode力扣动态规划篇2 343. 整数拆分 343. 整数拆分 - 力扣(LeetCode) 描述 给定一个正整数 n ,将其拆分为 k 个 正整数 的和( k > 2 ),并使这些整数的乘积最大化。 返回 你可以获得…

构建第一个JS应用(FA模型)

创建JS工程 若首次打开DevEco Studio,请点击Create Project创建工程。如果已经打开了一个工程,请在菜单栏选择File > New > Create Project来创建一个新工程。选择Application应用开发(本文以应用开发为例,Atomic Service对…

openGauss 分布式数据库能力

分布式数据库能力 可获得性 本特性自openGauss 2.1.0版本开始引入。 特性简介 基于分布式中间件shardingsphere使openGauss具备分布式数据库能力。使用32个鲲鹏920(128核)节点组网(1*shardingsphere-proxy ,11*shardingsphere-jdbc,20*openGauss)时,完美shardin…

【网络基础】一文搞懂,什么是三次握手与四次挥手

文章目录 三次握手过程为什么要三次握手而不是两次握手呢? 四次挥手过程为什么客户端需要等待超时时间?为什么要四次挥手? 参考 三次握手过程 当客户端向服务端发起连接时,会先发一包 SYN 包连接请求数据,进行询问&am…

【智能算法】蜣螂优化算法(DBO)原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献 1.背景 2022年,Xue等人受到自然界中蜣螂生存行为启发,提出了蜣螂优化算法(Dung beetle optimizer, DBO)。 2.算法原理 2.1算法思想 DBO模拟了自然界蜣螂种…

基于8086温度监控报警系统设计

**单片机设计介绍,基于8086温度监控报警系统设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于8086的温度监控报警系统设计概要主要涵盖了该系统的基本组成、工作原理、设计特点以及应用前景等方面。以下是对该…

HarmonyOS 应用开发之RelationalStore开发

场景介绍 RelationalStore提供了一套完整的对本地数据库进行管理的机制,对外提供了一系列的增、删、改、查等接口,也可以直接运行用户输入的SQL语句来满足复杂的场景需要。 基本概念 谓词:数据库中用来代表数据实体的性质、特征或者数据实体…

HTTP响应头和请求头信息对照

HTTP请求头提供了关于请求,响应或者其他的发送实体的信息。HTTP的头信息包括通用头、请求头、响应头和实体头四个部分。每个头域由一个域名,冒号(:)和域值三部分组成。 通用头标:即可用于请求,也可用于响应…

字典树基础(Java实现)

字典树也叫Trie,是一种树形结构,其中每个节点可以存储一些变量表示该字符串出现的数量。每条边表示一个字符,如节点9存储一个变量cnt,说明存在三个字符串为“cbc” 例题:前缀判定 import java.math.BigInteger; impor…

set/ multiset 容器(二)

一、set查找和统计 函数原型&#xff1a; find(key); //查找key是否存在,若存在&#xff0c;返回该键的元素的迭代器&#xff1b;若不存在&#xff0c;返回 set.end(); count(key); //统计key的元素个数代码示例&#xff1a; #include<iostream> using namespace std;…

【Java入门教程】第十八讲:String类的常见操作及其应用

Java是一种广泛使用的编程语言&#xff0c;它的标准库中包含了大量的类和方法&#xff0c;以支持各种编程任务。在这些类中&#xff0c;String类无疑是最常用、最重要的类之一。 String类在Java中用于表示和操作字符串&#xff0c;即字符序列。本文将详细介绍String类的基本概…

算法刷题记录 Day34

算法刷题记录 Day34 Date: 2024.03.30 lc 63. 不同路径II class Solution { public:int uniquePathsWithObstacles(vector<vector<int>>& G) {// dp[i][j]表示从&#xff08;0&#xff0c;0&#xff09;到&#xff08;i,j&#xff09;的路径数&#xff1b;/…

Kubernetes(k8s):网络插件之Calico安装与详解

Kubernetes&#xff08;k8s&#xff09;&#xff1a;网络插件之Calico安装与详解 1、什么是Calico&#xff1f;2、安装和配置Calico&#xff08;控制节点-master执行&#xff09;3、配置网络策略4、 Calico 的 yaml 文件部分详解1、ConfigMap配置2、DaemonSet 配置 5、calico-k…

Vue自定义组件中使用CSS变量设置样式?

在 Vue 自定义组件中使用 CSS 变量来设置样式&#xff0c;你可以通过在组件的样式中使用 var(–variable-name) 来引用 CSS 变量。然后&#xff0c;在组件的根元素或具体的元素上&#xff0c;使用 :style 绑定来动态设置 CSS 变量的值。以下是一个示例代码。 子组件 (CustomCo…

基于mqtt的物联网控制移动应用程序开发

具体实现问题 MQTT模型、特点、服务质量、报文、消息类型表 java实现mqtt两种方式&#xff1a;Paho Java原生库、spring boot MQTT与HTTP&#xff1a;哪一个最适合物联网&#xff1f; mqtt协议和http协议区别 应用是如何实现mqtt协议 通过调用安卓的MQTT库来实现MQTT协议&…

【智能算法】蜜獾算法(HBA)原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献 1.背景 2021年&#xff0c;FA Hashim等人受到自然界中蜜獾狩猎行为启发&#xff0c;提出了蜜獾算法&#xff08;(Honey Badger Algorithm&#xff0c;HBA&#xff09;。 2.算法原理 2.1算法思想 蜜獾以其…

【力扣】80.删除有序数组中的重复项Ⅱ

80.删除有序数组中的重复项Ⅱ 题目描述 给你一个有序数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使得出现次数超过两次的元素只出现两次&#xff0c;返回删除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须在 原地 修改输入数组 并在使用…

Mysql 常用SQL语句

1、查看mysql中所有的数据库&#xff0c; show databases; 2、创建库 create database 库名;&#xff08;也可以用 create database if not exists 库名; 表示如果库不存在再创建&#xff09; 例&#xff1a;create database if not exists ecology; 3、删除库 …

负载均衡:实现高效稳定的网络服务

随着互联网技术的快速发展&#xff0c;网络应用服务的规模和复杂性日益增加。为了满足日益增长的用户需求&#xff0c;确保服务的高可用性和稳定性&#xff0c;负载均衡技术应运而生。本文将详细介绍负载均衡的概念、原理、分类以及应用场景&#xff0c;帮助读者深入了解这一关…

[网鼎杯 2020 朱雀组]Nmap1

打开题目 在源代码中看到了提示 先随便输入127.0.0.1 那我们试试输入 127.0.0.1 | ls 可以看到 | 被转义符号\所转义 那我们输入 127.0.0.1 /| ls 得到三条反斜线 我们猜测&#xff0c;我们输入的东西是被escapeshellarg和escapeshellcmd处理过后的结果 我们输入的东西必须…