BroadcastChannel方法跨浏览器窗口通信
1. 描述
同源 的不同浏览器窗口,Tab 页,frame 或者 iframe 下的不同文档之间可以通过 BroadcastChannel 相互通信。
2. 构造函数
通过 BroadcastChannel 类传入的参数创建实例,传入的参数将指定通道名称,在同源环境下该通道可以相互通信,一个名称只对应一个通道。
// 将创建的实例挂载到window上,可以在浏览器全局访问该方法
// channelName即为指定的通道名称, 为字符串类型
window.broadcastChannel = new BroadcastChannel(channelName);
3. 通道名称
创建后的BroadcastChannel实例可以通过name属性来访问创建的通道名称。
// broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
console.log(broadcastChannel.name);
4. 方法使用
postMessage发送信息,以 message 事件的形式发送给每一个绑定到同一个通道名称的广播频道。
// broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
// message为Object类型的消息
broadcastChannel.postMessage(message);
onmessage监听通道信息,当频道收到信息时,将触发message事件,在事件的data属性中获取同一通道发送的信息数据。
// broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
// 可以通过增加监听事件,在event.data中获取到监听的广播信息。
broadcastChannel.addEventListener('message', (event) => {console.log(event.data);
});// broadcastChannel.onmessage = (event) => {};
close关闭通道通信,让其被垃圾回收(必要的步骤,浏览器浏览器没有其他方式知道频道不再被需要)。
// broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
// 当完成后,断开与频道的连接
broadcastChannel.close();
messageerror一条无法反序列化的消息时将会触发该事件。
// broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
// 可以通过增加监听事件,在event.data中获取到监听的无法反序列化的广播信息。
broadcastChannel.addEventListener('messageerror', (event) => {console.log(event.data);
});// broadcastChannel.onmessageerror = (event) => {};
5. 题外话
在vue项目使用时,可以在根组件上通过BroadcastChannel创建的对象监听message和播报postMessage同源同信道的广播信息,组件销毁时通过close关闭通信并垃圾回收。项目内部通过eventBus、父子事件触发、注入方式等其他方式处理信息传递和监听,这样收口在一处,形成逻辑闭环。
相关文章:
BroadcastChannel方法跨浏览器窗口通信
1. 描述 同源 的不同浏览器窗口,Tab 页,frame 或者 iframe 下的不同文档之间可以通过 BroadcastChannel 相互通信。 2. 构造函数 通过 BroadcastChannel 类传入的参数创建实例,传入的参数将指定通道名称,在同源环境下该通道可以…...
山石网科国产化防火墙,打造全方位边界安全解决方案
互联网的快速发展促进了各行各业的信息化建设,但也随之带来了诸多网络安全风险。大部分组织机构采用统一互联网接入方案,互联网出口承担着内部用户访问互联网的统一出口和对外信息服务的入口,因此在该区域部署相匹配的安全防护手段必不可少。…...
AVL 树
文章目录 一、AVL 树的概念二、AVL 树的实现1. AVL 树的存储结构2. AVL 树的插入 一、AVL 树的概念 在 二叉搜索树 中,当我们连续插入有序的数据时,二叉搜索树可能会呈现单枝树的情况,此时二叉搜索树的查找效率为 O(N) 俄罗斯的两位数学家 …...
ggplot2做图(填坑中)
数据 df <- data.frame(x 1:10, y 1:10, f c(rep("A", 5), rep("B", 5))) 做图 1. 散点图 (scatter plot) # scatter plot scatter_plot <- function(df, metadata) {identical(rownames(df), rownames(metadata))data <- cbind(df, metada…...
Python日志处理器,同时打印到控制台和保存到文件中,并保证格式一致
使用logging模块的时候,默认是输出到控制台的,当然也可以配置输出到文件中,但是当你配置了文件后,控制台的输出就消失了,所以,需要一个策略即能保存到文件中,又能输出到控制台中。 下面是我做的…...
JavaWeb后端开发登录操作 登录功能 通用模板/SpringBoot整合
登录功能的思路 前端会传入两个参数:用户名和密码 在用户表中查询用户名,并校对相应的密码(涉及查询操作) SQL语句 select * from emp where username jingyong and password 123456; 如果有则成功,没有则登录失败.不可能为多个,因为添加了unique唯一约束,最终只会有一条 …...
The 2023 ICPC Asia Regionals Online Contest (1)(A D I J K L)
The 2023 ICPC Asia Regionals Online Contest (1)(A D I J K L) PTA | 程序设计类实验辅助教学平台 A Qualifiers Ranking Rules(模拟) 考虑先对第一场和第二场分别去重(取最好) , 归并排序后再次去重即可。 #include<bits/stdc.h> using namespace std;…...
C++ PrimerPlus 复习 第七章 函数——C++的编程模块(上)
第一章 命令编译链接文件 make文件 第二章 进入c 第三章 处理数据 第四章 复合类型 (上) 第四章 复合类型 (下) 第五章 循环和关系表达式 第六章 分支语句和逻辑运算符 第七章 函数——C的编程模块(上ÿ…...
2.求循环小数
题目 对于任意的真分数 N/M ( 0 < N < M ),均可以求出对应的小数。如果采用链表表示各个小数,对于循环节采用循环链表表示,则所有分数均可以表示为如下链表形式。 输入: N M 输出: 转换…...
zabbix监控告警邮箱提醒,钉钉提醒
一、注册网易邮箱及其配置邮箱 1、开启POP3/SMTP/IMAP 二、service端配置邮件服务 1.安装 mailx dos2unix yum install -y mailx dos2unix mailx:邮件服务 mos2unix:用于转换文本文件格式的实用工具 查看mailx版本 2.配置mailx配置文件 编辑…...
典型数据结构-栈/队列/链表、哈希查找、二叉树(BT)、线索二叉树、二叉排序树(BST树)、平衡二叉树(AVL树)、红黑树(RB树)
目录 典型数据结构列举 栈/队列/链表 树 二叉树 线索二叉树 二叉排序树 平衡二叉树(AVL树) 红黑树 其它树种和应用介绍 典型数据结构列举 栈/队列/链表 描述略。 一些基本的简单实现参考/数据结构简单实现/文件夹里面。 线性表详解ÿ…...
pyarmor 加密许可证的使用
一 pyarmor 许可证的用处 文档:5. 许可模式和许可证 — Pyarmor 8.3.6 文档 试用版本有如下的限制: 加密功能对脚本大小有限制,不能加密超过限制的大脚本。 混淆字符串功能在试用版中无法使用。 RFT 加密模式,BCC 加密模式在试…...
网络路径监控分析
不间断的连接应该是任何企业的首要任务。然而,确保网络中的源和目标之间持续、不间断的联系一直是网络通信中一个劳动密集型的过程。了解网络路径中的障碍、识别它们并迅速解决它们以维护健康、不间断的网络至关重要。 为什么要监控网络路径 维护网络运行状况是任…...
vue双向数据绑定是如何实现的?
Vue中的双向数据绑定主要是通过数据劫持和发布订阅模式来实现的。 数据劫持: Vue通过使用Object.defineProperty()方法来对data对象中的属性进行劫持,从而实现对数据的双向绑定。具体实现方式为: (1)在Vue实例化时&a…...
el-date-picker 封装一个简单的日期组件, 主要是禁用日期
子组件 <template><div><el-date-pickerv-model"dateModel"type"datetimerange":picker-options"pickerOptions"range-separator"至"ref"picker"start-placeholder"开始日期"end-placeholder&quo…...
保研复习-计算机组成原理
计算机组成原理 计算机组成冯诺依曼体系结构计算机系统的层次结构计算机的五大组成部件编译和解释的区别 CPUCPU的组成寄存器的类型指令类型指令功能指令执行过程 存储器存储器的层次结构寻址方式 输入和输出io方式有哪几种IO接口的基本结构 计算机组成 冯诺依曼体系结构 存储…...
linux环境安装redis(亲测完成)
linux环境安装redis 亲测完成 前言一、redis简介Redis 与其他 key - value 缓存产品有以下三个特点:Redis 优势 二、安装redis1.下载安装包2.创建服务器安装路径3.上传安装包4.解压安装包5.依赖安装6.编译 三、启动1)默认启动错误解决方式 2)指定配置启动2.1&#x…...
关于命令行交互自动化,及pyinstaller打包wexpect的问题
Python自动化工具 用来执行命令并进行交互,比如需要输入账号密码或者确认的场景 linux平台可以用pexpect,但是windows平台有一些差异,比较好用的是pexpect的变种wexpect,如果脚本中用了wexpect,并且要打包成onefile&a…...
8.4 【MySQL】文件系统对数据库的影响
因为 MySQL 的数据都是存在文件系统中的,就不得不受到文件系统的一些制约,这在数据库和表的命名、表的大小和性能方面体现的比较明显,比如下边这些方面: 数据库名称和表名称不得超过文件系统所允许的最大长度。 每个数据库都对应…...
Python WEB框架FastAPI (二)
Python WEB框架FastAPI (二) 最近一直在使用fastapi,随着使用的深入发现我对于它的了解还是太少了,以至于踩了一些坑。所以在这里记录一下,愿看到的小伙伴不迷路。 路径传参并发问题 一、路径传参 这是对上一个传参…...
Linux应用开发之网络套接字编程(实例篇)
服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架,它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用,和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候,遇到了一些问题,记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用,可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器,能够帮助开发者更好地管理复杂的依赖关系,而 GraphQL 则是一种用于 API 的查询语言,能够提…...
家政维修平台实战20:权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系,主要是分成几个表,用户表我们是记录用户的基础信息,包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题,不同的角色…...
如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同,结合所安装的tensorflow的目录结构修改from语句即可。 原语句: from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后: from tensorflow.python.keras.lay…...
用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会,玩音乐的本质就是玩电网。火电声音偏暖,水电偏冷,风电偏空旷。至于太阳能发的电,则略显朦胧和单薄。 不知你是否有感觉,近两年家里的音响声音越来越冷,听起来越来越单薄? —…...
SQL慢可能是触发了ring buffer
简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...
云原生安全实战:API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关(API Gateway) API网关是微服务架构中的核心组件,负责统一管理所有API的流量入口。它像一座…...
