BroadcastChannel 实现浏览器tab无刷新通讯
前提须知
- 使用
BroadcastChannel来实现浏览器tab通讯必须是同源的 - BroadcastChannel 支持多tab间通讯
- mdn 链接
具体使用
- 发送方使用
<!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>
- 接收方
<!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文件并输出文件内容 【正文】 在今天的课程中，我们将学习Python中的异常处理语句try...except...finally。 …...
c语言实现简单的tcp客户端
功能：实现一个简单的tcp客户端，连接本地端口8888的tcp服务端，并发送一条报文。 /* * File: main.c* Author: vincent** Created on 2023年8月3日, 上午9:56*/#include <stdio.h> #include <stdlib.h> #include <string.h…...
RocketMQ详解及注意事项
RocketMQ是阿里巴巴开源的一款分布式消息中间件，具有高吞吐量、高可用性、可扩展性和稳定性强等特点，广泛应用于异步消息、应用解耦、流量削峰填谷等场景。本文将详细介绍RocketMQ的基本架构、工作流程、消息模型，并列出在使用RocketMQ时需要…...
选择适合的项目管理系统，了解有哪些选择和推荐
随着科技的进步和全球竞争的加剧，项目管理已经成为企业成功的关键要素。为了更好地组织和监控项目，许多企业和组织正在采用项目管理系统(PMS)。本文将探讨项目管理系统的主要组成部分以及其在实际应用中的优势。 “项目管理系统有哪些?国际上比较常见的…...
linux基础命令-cd
切换当前工作目录使用 cd 命令 在 Linux 操作系统中，cd 是一个常用的命令，用于切换当前的工作目录。工作目录是用户当前所在的文件夹，执行命令时将会在该目录中进行操作。cd 命令的功能是更改当前工作目录到指定的目录位置。在本文中…...
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 有一个小的计算图，两次前向梯度累积的结果，可以看到梯度是严格相等的。 代码： import numpy as np import torchclass ExampleLinear(torch…...
【面试精品】运维工程师需要具备的核心能力有哪些？
运维，在部分没有接触过IT的小伙伴的概念中觉得是一个比较低级的职位，很容易从字面理解为运营、维护. 很多朋友认为，无论IDC机房运维、网络运维、桌面运维、Linux系统运维、数据库运维、云计算运维、等在互联网公司中的工作就是安装系统&…...
微服务实战项目-学成在线-选课学习(支付与学习中心)模块
微服务实战项目-学成在线-选课学习(支付与学习中心)模块 1 模块需求分析 1.1 模块介绍 本模块实现了学生选课、下单支付、学习的整体流程。 网站的课程有免费和收费两种，对于免费课程学生选课后可直接学习，对于收费课程学生需要下单且支付成功方可选…...
postman和jmeter的区别何在？
小伙伴们大家好呀，前段时间笔者做了一个小调查，发现软件测试行业做功能测试和接口测试的人相对比较多。在测试工作中，有高手，自然也会有小白，但有一点我们无法否认，就是每一个高手都是从小白开始的…...
maven安装（windows）
环境 maven：Apache Maven 3.5.2 jdk环境：jdk 1.8.0_192 系统版本：win10 一、安装 apache官网下载需要的版本，然后解压缩，解压路径尽量不要有空格和中文 官网下载地址 https://maven.apache.org/download.cgihttps:…...
自学安全卷不动，是放弃还是继续？
有天我想去搜一下怎么约女孩子看电影比较不油腻的时候，突然看到一个话题“自学网络安全的人都是什么感受”。 因为我的粉丝们大部分都是在自学或者是准备入行的大学生，所以我很认真一个一个去看了下别人的回答。基本都是劝退自学为主，因为自学…...
Django实现音乐网站 ⑶
使用Python Django框架制作一个音乐网站，在系列文章2的基础上继续开发，本篇主要是后台单曲、专辑、首页轮播图表模块开发。 目录 后台单曲、专辑表模块开发 表结构设计 单曲表（singe）结构 专辑表（album）…...
（13） Qt事件系统（two）
目录 事件分发函数 无边框窗口拖动 自定义事件 发送事件的函数 自定义事件 系统定义的事件号 自定义事件号 自定义事件类 发送和处理事件 sendEvent与postEvent的区别 栈区对象 堆区对象 事件传播机制 事件传播的过程 事件传播到父组件 鼠标单击事件与按钮单击信…...
PHP的知识概要
PHP技术基础 1、PHP是Hypertext Preprocessor的缩写，是基于服务器端运行的脚本程序语言，可以实现数据库和网页之间的数据交互。PHP可以单独运行，也可镶嵌在HTML文件 中。它具有开发快速、性能稳定的优点。 2、PHP是嵌入式脚本语言&…...
JSON格式Python,Java,PHP等封装根据商品ID获取快手商品详情数据方法
快手商城是一个网上购物平台，售卖各类商品，包括服装、鞋类、家居用品、美妆产品、电子产品等。要获取拼多多商品详情数据，您可以通过开放平台的接口或者直接访问快手商城的网页来获取商品详情信息。以下是两种常用方法的介绍： 1.…...
【ASP.NET MVC】MYSQL安装配置（4）
一、安装配置 1、下载MYSQL绿色版压缩包（略） 2、解压到目录，比如E:\mysql目录 3、设置环境变量 添加bin目录到path，方便运行Mysql的命令 先打开系统的《环境变量》配置 双击系统变量中的Path 添加Mysql的BIN目录到path: 4、在…...
前端框架学习-Vue（二）
最近在学习Vue框架，Vue中的内容很多。相当于把之前后端的MVC，V层转移到前端来编写和部署。下面是学习Vue时的大纲。 Vue生命周期是Vue应用的生命周期Vue脚手架，即vue-cli，使用node.js 来创建和启动vue项目Vue组件知识，…...
sublime配置less的一些坑(1)
仅在sublime的Install Package安装保存less报错 在sublime的Install Package安装less 打开sublime软件,按住CtrlShiftP组合键,弹出的界面中选择Install Package 选中后enter或者回车。等会弹出一个弹窗,大致意思是说你已经成功安装了package control。如果你在此之前已经安装了…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...
【JavaEE】-- HTTP
1. HTTP是什么？ HTTP（全称为"超文本传输协议"）是一种应用非常广泛的应用层协议，HTTP是基于TCP协议的一种应用层协议。 应用层协议：是计算机网络协议栈中最高层的协议，它定义了运行在不同主机上…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版！！！6.8截至答题，大家注意呀！ 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:（ B ） A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角，以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向，距离坐标原点x个像素;第二个是y坐标，表示当前位置为垂直方向，距离坐标原点y个像素。 坐标体系-像素 …...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具
第2章 虚拟机性能监控，故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令：jps [options] [hostid] 功能：本地虚拟机进程显示进程ID（与ps相同），可同时显示主类&#x…...
Selenium常用函数介绍
目录 一，元素定位 1.1 cssSeector 1.2 xpath 二，操作测试对象 三，窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四，弹窗 五，等待 六，导航 七，文件上传 …...
LangFlow技术架构分析
🔧 LangFlow 的可视化技术栈 前端节点编辑器 底层框架：基于 （一个现代化的 React 节点绘图库） 功能： 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...
tomcat指定使用的jdk版本
说明 有时候需要对tomcat配置指定的jdk版本号，此时，我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...
通过MicroSip配置自己的freeswitch服务器进行调试记录
之前用docker安装的freeswitch的，启动是正常的， 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...