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

BroadcastChannel 实现浏览器tab无刷新通讯

前提须知

  1. 使用 BroadcastChannel 来实现浏览器tab通讯必须是同源的
  2. BroadcastChannel 支持多tab间通讯
  3. mdn 链接

具体使用

  1. 发送方使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div><button style="all: unset" onclick="onSend()">发送</button></div><script>/*** BroadcastChannel * 接收方和发送发必须是同源的才行进行浏览器tab的通讯* */const broadcast = new BroadcastChannel('music')broadcast.onmessage = (e) => {console.log(e)}function onSend() {console.log('点击了');broadcast.postMessage({name: 'music',data: '发送的数据'})}</script>
</body>
</html>
  1. 接收方
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const broadcast = new BroadcastChannel('music')broadcast.onmessage = ({data}) => {console.log('music接受数据了', data)}</script>
</body>
</html>

相关文章:

BroadcastChannel 实现浏览器tab无刷新通讯

前提须知 使用 BroadcastChannel 来实现浏览器tab通讯必须是同源的BroadcastChannel 支持多tab间通讯mdn 链接 具体使用 发送方使用 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewpor…...

98. Python基础教程:try...except...finally语句

【目录】 文章目录 1. try...except...finally语法介绍2. try...except...finally执行顺序3. 捕获特定类型的异常4. 捕获所有类型的异常5. 实操练习-打开txt文件并输出文件内容 【正文】 在今天的课程中&#xff0c;我们将学习Python中的异常处理语句try...except...finally。 …...

c语言实现简单的tcp客户端

功能&#xff1a;实现一个简单的tcp客户端&#xff0c;连接本地端口8888的tcp服务端&#xff0c;并发送一条报文。 /* * File: main.c* Author: vincent** Created on 2023年8月3日, 上午9:56*/#include <stdio.h> #include <stdlib.h> #include <string.h…...

RocketMQ详解及注意事项

RocketMQ是阿里巴巴开源的一款分布式消息中间件&#xff0c;具有高吞吐量、高可用性、可扩展性和稳定性强等特点&#xff0c;广泛应用于异步消息、应用解耦、流量削峰填谷等场景。本文将详细介绍RocketMQ的基本架构、工作流程、消息模型&#xff0c;并列出在使用RocketMQ时需要…...

选择适合的项目管理系统,了解有哪些选择和推荐

随着科技的进步和全球竞争的加剧&#xff0c;项目管理已经成为企业成功的关键要素。为了更好地组织和监控项目&#xff0c;许多企业和组织正在采用项目管理系统(PMS)。本文将探讨项目管理系统的主要组成部分以及其在实际应用中的优势。 “项目管理系统有哪些?国际上比较常见的…...

linux基础命令-cd

切换当前工作目录使用 cd 命令 在 Linux 操作系统中&#xff0c;cd 是一个常用的命令&#xff0c;用于切换当前的工作目录。工作目录是用户当前所在的文件夹&#xff0c;执行命令时将会在该目录中进行操作。cd 命令的功能是更改当前工作目录到指定的目录位置。在本文中&#xf…...

MySQL数据库分库分表备份

分库备份 创建脚本并编写 [rootlocalhost scripts]# vim bak_db_v1.sh #!/bin/bash 备份的路径 bak_path/backup/db 账号密码 mysql_cmd-uroot -pRedHat123 需要排除的数据库 exclude_dbinformation_schema|mysql|performance_schema|sys 检验备份路径是否存在&#…...

PyTorch 中的累积梯度

https://stackoverflow.com/questions/62067400/understanding-accumulated-gradients-in-pytorch 有一个小的计算图&#xff0c;两次前向梯度累积的结果&#xff0c;可以看到梯度是严格相等的。 代码&#xff1a; import numpy as np import torchclass ExampleLinear(torch…...

【面试精品】运维工程师需要具备的核心能力有哪些?

运维&#xff0c;在部分没有接触过IT的小伙伴的概念中觉得是一个比较低级的职位&#xff0c;很容易从字面理解为运营、维护. 很多朋友认为&#xff0c;无论IDC机房运维、网络运维、桌面运维、Linux系统运维、数据库运维、云计算运维、等在互联网公司中的工作就是安装系统&…...

微服务实战项目-学成在线-选课学习(支付与学习中心)模块

微服务实战项目-学成在线-选课学习(支付与学习中心)模块 1 模块需求分析 1.1 模块介绍 本模块实现了学生选课、下单支付、学习的整体流程。 网站的课程有免费和收费两种&#xff0c;对于免费课程学生选课后可直接学习&#xff0c;对于收费课程学生需要下单且支付成功方可选…...

postman和jmeter的区别何在?

小伙伴们大家好呀&#xff0c;前段时间笔者做了一个小调查&#xff0c;发现软件测试行业做功能测试和接口测试的人相对比较多。在测试工作中&#xff0c;有高手&#xff0c;自然也会有小白&#xff0c;但有一点我们无法否认&#xff0c;就是每一个高手都是从小白开始的&#xf…...

maven安装(windows)

环境 maven&#xff1a;Apache Maven 3.5.2 jdk环境&#xff1a;jdk 1.8.0_192 系统版本&#xff1a;win10 一、安装 apache官网下载需要的版本&#xff0c;然后解压缩&#xff0c;解压路径尽量不要有空格和中文 官网下载地址 https://maven.apache.org/download.cgihttps:…...

自学安全卷不动,是放弃还是继续?

有天我想去搜一下怎么约女孩子看电影比较不油腻的时候&#xff0c;突然看到一个话题“自学网络安全的人都是什么感受”。 因为我的粉丝们大部分都是在自学或者是准备入行的大学生&#xff0c;所以我很认真一个一个去看了下别人的回答。基本都是劝退自学为主&#xff0c;因为自学…...

Django实现音乐网站 ⑶

使用Python Django框架制作一个音乐网站&#xff0c;在系列文章2的基础上继续开发&#xff0c;本篇主要是后台单曲、专辑、首页轮播图表模块开发。 目录 后台单曲、专辑表模块开发 表结构设计 单曲表&#xff08;singe&#xff09;结构 专辑表&#xff08;album&#xff09…...

(13) Qt事件系统(two)

目录 事件分发函数 无边框窗口拖动 自定义事件 发送事件的函数 自定义事件 系统定义的事件号 自定义事件号 自定义事件类 发送和处理事件 sendEvent与postEvent的区别 栈区对象 堆区对象 事件传播机制 事件传播的过程 事件传播到父组件 鼠标单击事件与按钮单击信…...

PHP的知识概要

PHP技术基础 1、PHP是Hypertext Preprocessor的缩写&#xff0c;是基于服务器端运行的脚本程序语言&#xff0c;可以实现数据库和网页之间的数据交互。PHP可以单独运行&#xff0c;也可镶嵌在HTML文件 中。它具有开发快速、性能稳定的优点。 2、PHP是嵌入式脚本语言&…...

JSON格式Python,Java,PHP等封装根据商品ID获取快手商品详情数据方法

快手商城是一个网上购物平台&#xff0c;售卖各类商品&#xff0c;包括服装、鞋类、家居用品、美妆产品、电子产品等。要获取拼多多商品详情数据&#xff0c;您可以通过开放平台的接口或者直接访问快手商城的网页来获取商品详情信息。以下是两种常用方法的介绍&#xff1a; 1.…...

【ASP.NET MVC】MYSQL安装配置(4)

一、安装配置 1、下载MYSQL绿色版压缩包&#xff08;略&#xff09; 2、解压到目录&#xff0c;比如E:\mysql目录 3、设置环境变量 添加bin目录到path&#xff0c;方便运行Mysql的命令 先打开系统的《环境变量》配置 双击系统变量中的Path 添加Mysql的BIN目录到path: 4、在…...

前端框架学习-Vue(二)

最近在学习Vue框架&#xff0c;Vue中的内容很多。相当于把之前后端的MVC&#xff0c;V层转移到前端来编写和部署。下面是学习Vue时的大纲。 Vue生命周期是Vue应用的生命周期Vue脚手架&#xff0c;即vue-cli&#xff0c;使用node.js 来创建和启动vue项目Vue组件知识&#xff0c;…...

sublime配置less的一些坑(1)

仅在sublime的Install Package安装保存less报错 在sublime的Install Package安装less 打开sublime软件,按住CtrlShiftP组合键,弹出的界面中选择Install Package 选中后enter或者回车。等会弹出一个弹窗,大致意思是说你已经成功安装了package control。如果你在此之前已经安装了…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

华为OD最新机试真题-数组组成的最小数字-OD统一考试(B卷)

题目描述 给定一个整型数组,请从该数组中选择3个元素 组成最小数字并输出 (如果数组长度小于3,则选择数组中所有元素来组成最小数字)。 输入描述 行用半角逗号分割的字符串记录的整型数组,0<数组长度<= 100,0<整数的取值范围<= 10000。 输出描述 由3个元素组成…...

【无标题】湖北理元理律师事务所:债务优化中的生活保障与法律平衡之道

文/法律实务观察组 在债务重组领域&#xff0c;专业机构的核心价值不仅在于减轻债务数字&#xff0c;更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明&#xff0c;合法债务优化需同步实现三重平衡&#xff1a; 法律刚性&#xff08;债…...