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

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

news 2025/12/16 18:05:03

前提须知

  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

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/11/6 5:46:16

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2025/12/12 16:29:02

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/8/27 0:58:09

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/12/13 4:20:30

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...

编程新知 2025/12/11 6:17:00

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2025/12/13 8:47:33

TSN交换机正在重构工业网络，PROFINET和EtherCAT会被取代吗？

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

编程新知 2025/12/14 23:52:18

9-Oracle 23 ai Vector Search 特性 知识准备

很多小伙伴是不是参加了 免费认证课程&#xff08;限时至2025/5/15&#xff09; Oracle AI Vector Search 1Z0-184-25考试&#xff0c;都顺利拿到certified了没。 各行各业的AI 大模型的到来&#xff0c;传统的数据库中的SQL还能不能打&#xff0c;结构化和非结构的话数据如何和…...

编程新知 2025/12/9 13:03:38

实战设计模式之模板方法模式

概述 模板方法模式定义了一个操作中的算法骨架&#xff0c;并将某些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的前提下&#xff0c;重新定义算法中的某些步骤。简单来说&#xff0c;就是在一个方法中定义了要执行的步骤顺序或算法框架&#xff0c;但允许子类…...

编程新知 2025/12/15 13:25:45

2025年低延迟业务DDoS防护全攻略：高可用架构与实战方案

一、延迟敏感行业面临的DDoS攻击新挑战 2025年&#xff0c;金融交易、实时竞技游戏、工业物联网等低延迟业务成为DDoS攻击的首要目标。攻击呈现三大特征&#xff1a; AI驱动的自适应攻击&#xff1a;攻击流量模拟真实用户行为&#xff0c;差异率低至0.5%&#xff0c;传统规则引…...

编程新知 2025/8/29 1:00:19