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,随着使用的深入发现我对于它的了解还是太少了,以至于踩了一些坑。所以在这里记录一下,愿看到的小伙伴不迷路。 路径传参并发问题 一、路径传参 这是对上一个传参…...
龙虎榜——20250610
上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...
MPNet:旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中,iftop是网络管理的得力助手,能实时监控网络流量、连接情况等,帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件: 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
工程地质软件市场:发展现状、趋势与策略建议
一、引言 在工程建设领域,准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具,正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...
Caliper 配置文件解析:config.yaml
Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...
C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj,再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...
中医有效性探讨
文章目录 西医是如何发展到以生物化学为药理基础的现代医学?传统医学奠基期(远古 - 17 世纪)近代医学转型期(17 世纪 - 19 世纪末)现代医学成熟期(20世纪至今) 中医的源远流长和一脉相承远古至…...
人机融合智能 | “人智交互”跨学科新领域
本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...
