当前位置: 首页 > news >正文

BroadcastChannel方法跨浏览器窗口通信

1. 描述

同源 的不同浏览器窗口,Tab 页,frame 或者 iframe 下的不同文档之间可以通过 BroadcastChannel 相互通信。

2. 构造函数

通过 BroadcastChannel 类传入的参数创建实例,传入的参数将指定通道名称,在同源环境下该通道可以相互通信,一个名称只对应一个通道。

//	将创建的实例挂载到window上,可以在浏览器全局访问该方法
//	channelName即为指定的通道名称, 为字符串类型
window.broadcastChannel = new BroadcastChannel(channelName);

3. 通道名称

创建后的BroadcastChannel实例可以通过name属性来访问创建的通道名称。

//	broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
console.log(broadcastChannel.name);

4. 方法使用

  1. postMessage 发送信息,以 message 事件的形式发送给每一个绑定到同一个通道名称的广播频道。
//	broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
//	message为Object类型的消息
broadcastChannel.postMessage(message);
  1. onmessage 监听通道信息,当频道收到信息时,将触发message事件,在事件的data属性中获取同一通道发送的信息数据。
//	broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
//	可以通过增加监听事件,在event.data中获取到监听的广播信息。
broadcastChannel.addEventListener('message', (event) => {console.log(event.data);
});//	broadcastChannel.onmessage = (event) => {};
  1. close 关闭通道通信,让其被垃圾回收(必要的步骤,浏览器浏览器没有其他方式知道频道不再被需要)。
//	broadcastChannel对象已在上面创建并挂载到浏览器全局对象下
// 当完成后,断开与频道的连接
broadcastChannel.close();
  1. 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模块的时候&#xff0c;默认是输出到控制台的&#xff0c;当然也可以配置输出到文件中&#xff0c;但是当你配置了文件后&#xff0c;控制台的输出就消失了&#xff0c;所以&#xff0c;需要一个策略即能保存到文件中&#xff0c;又能输出到控制台中。 下面是我做的…...

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(模拟) 考虑先对第一场和第二场分别去重(取最好) &#xff0c; 归并排序后再次去重即可。 #include<bits/stdc.h> using namespace std;…...

C++ PrimerPlus 复习 第七章 函数——C++的编程模块(上)

第一章 命令编译链接文件 make文件 第二章 进入c 第三章 处理数据 第四章 复合类型 &#xff08;上&#xff09; 第四章 复合类型 &#xff08;下&#xff09; 第五章 循环和关系表达式 第六章 分支语句和逻辑运算符 第七章 函数——C的编程模块&#xff08;上&#xff…...

2.求循环小数

题目 对于任意的真分数 N/M &#xff08; 0 < N < M &#xff09;&#xff0c;均可以求出对应的小数。如果采用链表表示各个小数&#xff0c;对于循环节采用循环链表表示&#xff0c;则所有分数均可以表示为如下链表形式。 输入&#xff1a; N M 输出&#xff1a; 转换…...

zabbix监控告警邮箱提醒,钉钉提醒

一、注册网易邮箱及其配置邮箱 1、开启POP3/SMTP/IMAP 二、service端配置邮件服务 1.安装 mailx dos2unix yum install -y mailx dos2unix mailx&#xff1a;邮件服务 mos2unix&#xff1a;用于转换文本文件格式的实用工具 查看mailx版本 2.配置mailx配置文件 编辑&#xf…...

典型数据结构-栈/队列/链表、哈希查找、二叉树(BT)、线索二叉树、二叉排序树(BST树)、平衡二叉树(AVL树)、红黑树(RB树)

目录 典型数据结构列举 栈/队列/链表 树 二叉树 线索二叉树 二叉排序树 平衡二叉树&#xff08;AVL树&#xff09; 红黑树 其它树种和应用介绍 典型数据结构列举 栈/队列/链表 描述略。 一些基本的简单实现参考/数据结构简单实现/文件夹里面。 线性表详解&#xff…...

pyarmor 加密许可证的使用

一 pyarmor 许可证的用处 文档&#xff1a;5. 许可模式和许可证 — Pyarmor 8.3.6 文档 试用版本有如下的限制&#xff1a; 加密功能对脚本大小有限制&#xff0c;不能加密超过限制的大脚本。 混淆字符串功能在试用版中无法使用。 RFT 加密模式&#xff0c;BCC 加密模式在试…...

网络路径监控分析

不间断的连接应该是任何企业的首要任务。然而&#xff0c;确保网络中的源和目标之间持续、不间断的联系一直是网络通信中一个劳动密集型的过程。了解网络路径中的障碍、识别它们并迅速解决它们以维护健康、不间断的网络至关重要。 为什么要监控网络路径 维护网络运行状况是任…...

vue双向数据绑定是如何实现的?

Vue中的双向数据绑定主要是通过数据劫持和发布订阅模式来实现的。 数据劫持&#xff1a; Vue通过使用Object.defineProperty()方法来对data对象中的属性进行劫持&#xff0c;从而实现对数据的双向绑定。具体实现方式为&#xff1a; &#xff08;1&#xff09;在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 缓存产品有以下三个特点&#xff1a;Redis 优势 二、安装redis1.下载安装包2.创建服务器安装路径3.上传安装包4.解压安装包5.依赖安装6.编译 三、启动1)默认启动错误解决方式 2)指定配置启动2.1&#x…...

关于命令行交互自动化,及pyinstaller打包wexpect的问题

Python自动化工具 用来执行命令并进行交互&#xff0c;比如需要输入账号密码或者确认的场景 linux平台可以用pexpect&#xff0c;但是windows平台有一些差异&#xff0c;比较好用的是pexpect的变种wexpect&#xff0c;如果脚本中用了wexpect&#xff0c;并且要打包成onefile&a…...

8.4 【MySQL】文件系统对数据库的影响

因为 MySQL 的数据都是存在文件系统中的&#xff0c;就不得不受到文件系统的一些制约&#xff0c;这在数据库和表的命名、表的大小和性能方面体现的比较明显&#xff0c;比如下边这些方面&#xff1a; 数据库名称和表名称不得超过文件系统所允许的最大长度。 每个数据库都对应…...

Python WEB框架FastAPI (二)

Python WEB框架FastAPI &#xff08;二&#xff09; 最近一直在使用fastapi&#xff0c;随着使用的深入发现我对于它的了解还是太少了&#xff0c;以至于踩了一些坑。所以在这里记录一下&#xff0c;愿看到的小伙伴不迷路。 路径传参并发问题 一、路径传参 这是对上一个传参…...

保姆级教程:在ROS2 Humble/Foxy的Gazebo中配置RGB-D相机(附解决点云颜色/坐标问题)

ROS2 Humble/Foxy中Gazebo深度相机仿真全攻略&#xff1a;从配置到点云问题解决在机器人仿真开发中&#xff0c;深度相机&#xff08;RGB-D&#xff09;是不可或缺的传感器之一。它能够同时提供彩色图像和深度信息&#xff0c;为SLAM、物体识别、避障等任务提供关键数据支持。本…...

2026年HR招聘偏好白皮书:这5项附加技能出现频率暴涨

2026 年的招聘市场&#xff0c;正在从“看你会什么岗位技能”&#xff0c;转向“看你能不能把岗位做得更智能”。HR筛简历时&#xff0c;越来越关注候选人的AI应用能力、数据化思维和业务落地能力。人社部近年发布的新职业中&#xff0c;已经出现生成式人工智能系统应用员、人工…...

Redis沙盒体验:在浏览器中零门槛掌握NoSQL核心技能

Redis沙盒体验&#xff1a;在浏览器中零门槛掌握NoSQL核心技能 【免费下载链接】try.redis A demonstration of the Redis database. 项目地址: https://gitcode.com/gh_mirrors/tr/try.redis 当你第一次听说Redis时&#xff0c;是否被那些晦涩的技术术语吓退&#xff1…...

智慧无人机巡检-无人机可见光红外数据集 无人机多模态检测数据集 红外与可见光检测数据集

智慧无人机巡检-无人机可见光红外数据集&#xff0c;已完成标注&#xff0c;可导出各种常用数据集&#xff0c;yolo&#xff0c;voc&#xff0c;coco等格式。可见光33000张&#xff0c;红外16100张&#xff0c;目标一张一个 无人机可见光红外目标数据集项目详细信息数据集名称无…...

ARM PMU性能监控单元原理与实践指南

1. ARM PMU性能监控单元概述性能监控单元&#xff08;PMU&#xff09;是现代ARM处理器中用于硬件级性能分析的核心组件。它通过一组可编程的硬件计数器&#xff0c;实现对处理器内部各种关键事件的精确测量。这些事件涵盖了从指令执行、缓存访问到内存子系统行为等处理器活动的…...

基于Arduino与nRF24L01+的无线传感器平台设计与部署指南

1. 项目概述与设计思路如果你和我一样&#xff0c;喜欢在阳台或者小院子里种点蔬菜瓜果&#xff0c;那你肯定也遇到过这样的烦恼&#xff1a;出门几天&#xff0c;心里总惦记着家里的番茄苗是不是缺水了&#xff0c;小温室里的温度会不会太高。传统的温湿度计只能让你在现场读数…...

如何用Python脚本榨干百度网盘带宽:pan-baidu-download终极指南

如何用Python脚本榨干百度网盘带宽&#xff1a;pan-baidu-download终极指南 【免费下载链接】pan-baidu-download 百度网盘下载脚本 项目地址: https://gitcode.com/gh_mirrors/pa/pan-baidu-download 在数字时代&#xff0c;百度网盘已成为我们存储和分享大型文件的默认…...

为你的Hermes Agent自定义Provider,接入Taotoken多模型池

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 为你的Hermes Agent自定义Provider&#xff0c;接入Taotoken多模型池 在构建复杂的AI应用时&#xff0c;开发者常常面临一个核心挑…...

用Python复现Nature论文:仅需100次循环数据,提前预测锂电池寿命(附完整代码与数据集)

用Python实战预测锂电池寿命&#xff1a;从数据特征到模型部署全解析锂电池作为现代能源存储的核心组件&#xff0c;其寿命预测一直是工业界和学术界关注的焦点。传统方法往往需要等待电池出现明显容量衰减才能进行判断&#xff0c;而最新研究表明&#xff0c;通过分析早期循环…...

基于MAX78000与CNN的智能螺栓巡检小车:嵌入式AI实战解析

1. 项目概述与核心思路在轨道交通的日常运维中&#xff0c;螺栓的紧固状态检查是一项繁重且关键的任务。无论是轨道上的紧固螺栓&#xff0c;还是列车转向架、轮对轴承上的关键螺栓&#xff0c;其松动或失效都可能引发严重的安全事故。传统的人工巡检方式不仅效率低下&#xff…...