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

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

news 2026/5/31 18:57:49

前提须知

  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…...

编程日记 2023/8/3 13:02:16

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

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

编程日记 2023/8/3 13:01:15

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…...

编程日记 2023/8/3 13:00:14

RocketMQ详解及注意事项

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

编程日记 2023/8/3 12:59:13

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

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

编程日记 2023/8/3 12:58:12

linux基础命令-cd

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

编程日记 2023/8/3 12:57:11

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 检验备份路径是否存在&#…...

编程日记 2023/8/3 12:56:10

PyTorch 中的累积梯度

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

编程日记 2023/8/3 12:55:08

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

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

编程日记 2023/8/3 12:54:06

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

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

编程日记 2023/8/3 12:53:05

postman和jmeter的区别何在？

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

编程日记 2023/8/3 12:52:04

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:…...

编程日记 2023/8/3 12:51:03

自学安全卷不动，是放弃还是继续？

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

编程日记 2023/8/3 12:50:02

Django实现音乐网站 ⑶

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

编程日记 2023/8/3 12:48:58

（13） Qt事件系统（two）

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

编程日记 2023/8/3 12:47:57

PHP的知识概要

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

编程日记 2023/8/3 12:46:55

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

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

编程日记 2023/8/3 12:45:54

【ASP.NET MVC】MYSQL安装配置（4）

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

编程日记 2023/8/3 12:44:53

前端框架学习-Vue（二）

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

编程日记 2023/8/3 12:43:50

sublime配置less的一些坑(1)

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

编程日记 2023/8/3 12:42:48

③ AI副业第一步：如何找到适合自己的AI赚钱赛道

③ AI副业第一步&#xff1a;如何找到适合自己的AI赚钱赛道选对赛道&#xff0c;努力才有意义。选错赛道&#xff0c;越努力离钱越远。前言&#xff1a;为什么大多数人AI副业做不起来&#xff1f; 我观察了100想做AI副业的人&#xff0c;失败的原因高度一致&#xff1a; 失败路…...

编程新知 2026/5/26 3:09:56

OpenClaw用户如何快速接入Taotoken并开始Agent工作流

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 OpenClaw用户如何快速接入Taotoken并开始Agent工作流 对于使用OpenClaw框架构建AI智能体的开发者而言&#xff0c;快速接入稳定、多…...

编程新知 2026/5/26 0:32:21

2027考研全套资料免费分享

备战27考研最全备考资料整理完毕&#xff0c;一路走来深知备考搜集资料耗费大量时间&#xff0c;浪费不少精力。特意整理2027考研全科完整版资源&#xff0c;全部打包汇总&#xff0c;零基础考生直接拿来就能使用&#xff0c;省去四处搜集资料的烦恼。资料内含&#xff1a;&…...

编程新知 2026/5/25 23:18:56

DIY四路自动音频源切换器：从信号检测到继电器隔离的完整设计

1. 项目概述与核心需求解析作为一个喜欢在工作室里捣鼓各种音频设备的玩家&#xff0c;我经常遇到一个挺烦人的问题&#xff1a;我的功放只有一组输入&#xff0c;但我想接的设备却有好几个——台式电脑、平板、蓝牙接收模块&#xff0c;还有一台树莓派。每次想切换音源&#x…...

编程新知 2026/5/25 20:59:15

告别依赖冲突：在Debian12上为特定项目搭建Python2.7.18独立运行环境

告别依赖冲突&#xff1a;在Debian12上为特定项目搭建Python2.7.18独立运行环境 当现代Linux系统已全面拥抱Python3的时代&#xff0c;突然需要维护一个仅支持Python2.7的遗留项目&#xff0c;这种场景对开发者而言无异于一场噩梦。本文将带你用工程化的思维&#xff0c;在Deb…...

编程新知 2026/5/25 17:10:43

Arduino土壤湿度监测仪制作：从传感器原理到自动灌溉实现

1. 项目概述&#xff1a;用Arduino Uno和LCD屏打造你的土壤湿度监测仪作为一个喜欢在阳台种点番茄、辣椒的业余园丁&#xff0c;我经常为浇水这事儿头疼。浇多了怕烂根&#xff0c;浇少了又怕旱着&#xff0c;光靠手指插土里感觉&#xff0c;实在是不准。后来玩上了Arduino&…...

编程新知 2026/5/27 0:06:55

3分钟快速上手：bilibili-parse视频解析API终极指南

3分钟快速上手&#xff1a;bilibili-parse视频解析API终极指南 【免费下载链接】bilibili-parse bilibili Video API 项目地址: https://gitcode.com/gh_mirrors/bi/bilibili-parse bilibili-parse是一款高效专业的B站视频解析工具&#xff0c;为开发者和内容创作者提供…...

编程新知 2026/5/25 15:54:17

NBT数据可视化编辑解决方案：NBTExplorer技术解析与应用指南

NBT数据可视化编辑解决方案&#xff1a;NBTExplorer技术解析与应用指南 【免费下载链接】NBTExplorer A graphical NBT editor for all Minecraft NBT data sources 项目地址: https://gitcode.com/gh_mirrors/nb/NBTExplorer NBTExplorer是一款面向Minecraft数据管理的…...

编程新知 2026/5/25 15:41:42

基于ATmega328P与TFT屏的园艺环境监控系统：硬件选型与软件架构详解

1. 项目概述&#xff1a;打造你的家庭园艺数据监控中心如果你和我一样&#xff0c;是个喜欢在阳台或后院捣鼓花草的园艺爱好者&#xff0c;同时又对电子DIY有点兴趣&#xff0c;那么这个项目绝对会让你兴奋。我们不是在简单地种花&#xff0c;而是在用数据“聆听”植物的需求。…...

编程新知 2026/5/25 14:47:29

FModel完整部署指南：UE5资源提取与逆向解析实战

1. 为什么FModel不是“另一个UE资源查看器”&#xff0c;而是虚幻项目逆向分析的起点FModel虚幻引擎资源提取工具完整部署指南——这标题里藏着三个被多数人忽略的关键信号&#xff1a;“FModel”不是泛指&#xff0c;“虚幻引擎”特指UE4/UE5原生资产体系&#xff0c;“完整部…...

编程新知 2026/5/25 14:29:49