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

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

news 2026/4/2 1:57:40

前提须知

  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

DSP题目：FFT算法的Matlab实现及其应用研究

DSP 题目&#xff1a;FFT算法的Matlab实现及应用研究最近帮室友调毕设的信号处理部分&#xff0c;他拿了个麦克风录的杂音&#xff0c;想把背景的50Hz工频噪音去掉&#xff0c;上来就问我“为啥我fft出来的峰不对”——害&#xff0c;这问题我刚学DSP的时候也踩过无数坑&#x…...

编程新知 2026/4/2 1:18:10

STM32除零运算不崩溃的机制与配置解析

1. STM32单片机除零运算不崩溃的底层机制解析 在嵌入式开发领域&#xff0c;STM32系列单片机因其出色的性能和丰富的外设资源而广受欢迎。许多从传统PC平台转向嵌入式开发的工程师都会发现一个有趣的现象&#xff1a;在STM32上执行除零操作时&#xff0c;程序竟然不会像在PC上那…...

编程新知 2026/4/2 0:02:44

开源工具TranslucentTB启动错误0x800401E3完整解决方案

开源工具TranslucentTB启动错误0x800401E3完整解决方案 【免费下载链接】TranslucentTB A lightweight utility that makes the Windows taskbar translucent/transparent. 项目地址: https://gitcode.com/gh_mirrors/tr/TranslucentTB TranslucentTB是一款广受欢迎的Wi…...

编程新知 2026/4/1 23:07:58

Phi-3 Forest Laboratory操作系统知识问答系统：从进程管理到文件系统详解

Phi-3 Forest Laboratory操作系统知识问答系统&#xff1a;从进程管理到文件系统详解 你有没有过这样的经历&#xff1f;翻开一本厚厚的操作系统教材&#xff0c;满篇都是“进程调度算法”、“虚拟内存”、“文件系统结构”这些抽象概念&#xff0c;看得人头晕眼花。或者&…...

编程新知 2026/4/1 23:05:58

Phi-3-mini-4k-instruct新手入门：Ollama部署详解，从安装到第一个对话

Phi-3-mini-4k-instruct新手入门&#xff1a;Ollama部署详解&#xff0c;从安装到第一个对话 1. 认识Phi-3-mini-4k-instruct&#xff1a;轻量级AI助手 Phi-3-mini-4k-instruct是一个仅有38亿参数的轻量级语言模型&#xff0c;由微软团队开发。虽然体积小巧&#xff0c;但它在…...

编程新知 2026/4/1 22:59:45

终极指南：如何用res-downloader一键下载全网无水印资源

终极指南&#xff1a;如何用res-downloader一键下载全网无水印资源 【免费下载链接】res-downloader 视频号、小程序、抖音、快手、小红书、直播流、m3u8、酷狗、QQ音乐等常见网络资源下载! 项目地址: https://gitcode.com/GitHub_Trending/re/res-downloader 你是否经常…...

编程新知 2026/4/1 22:23:19

火影AI绘画实战：用忍者绘卷Z-Image Turbo生成鸣人、佐助角色图教程

火影AI绘画实战&#xff1a;用忍者绘卷Z-Image Turbo生成鸣人、佐助角色图教程 1. 教程概述与准备工作 如果你是火影忍者的粉丝&#xff0c;现在可以通过AI技术轻松生成你最喜欢的角色图像。本教程将带你使用"忍者绘卷Z-Image Turbo"这个专门为火影风格优化的AI绘画…...

编程新知 2026/4/1 21:30:31

当今互联网安全的基石 - TLS/SSL

LS&#xff08;Transport Layer Security&#xff09;传输层安全协议 发展历程 TLS 是 SSL 协议的继任者。由于 SSL 协议存在一些安全漏洞&#xff0c;并且随着网络安全需求的不断提高&#xff0c;IETF&#xff08;Internet Engineering Task Force&#xff09;对 SSL 3.0 进…...

编程新知 2026/4/1 20:40:02

ESP8266天气时钟DIY全攻略：从零搭建到个性化定制

1. 硬件准备与成本控制 作为一个玩了多年智能硬件的爱好者&#xff0c;我强烈推荐从ESP8266开始入门物联网项目。这款芯片的价格实在太香了&#xff0c;9块钱就能买到NodeMCU开发板&#xff0c;性能却足够应付大多数DIY场景。我去年做过统计&#xff0c;用ESP8266搭建的天气时钟…...

编程新知 2026/4/1 20:03:36

PS插件加载失败？手把手教你用注册表修复PS2017-2022扩展未签署问题

PS插件加载失败&#xff1f;手把手教你用注册表修复PS2017-2022扩展未签署问题 当你在Photoshop中安装新插件时&#xff0c;突然弹出"扩展未经正确签署"的错误提示&#xff0c;这种挫败感我深有体会。作为一名长期与PS插件打交道的设计师&#xff0c;这个问题几乎成…...

编程新知 2026/4/1 17:29:04