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

js不同浏览器标签页、窗口或 iframe 之间可以相互通信

一、创建一个广播通道

// 创建一个名为 'vue-apps-channel' 的广播通道
const channel = new BroadcastChannel('vue-apps-channel');

二、发送消息

channel.postMessage({type: 'popup', message: false});

三、接收消息(也需要创建广播通道)

// 也创建一个名为 'vue-apps-channel' 的广播通道
const channel = new BroadcastChannel('vue-apps-channel');channel.onmessage = function(event) {console.log('收到消息:', event.data);
};

三、接收消息(也可以使用 addEventListener 方法来监听消息)

// 也创建一个名为 'vue-apps-channel' 的广播通道
const channel = new BroadcastChannel('vue-apps-channel');channel.addEventListener('message', function(event) {console.log('收到消息:', event.data);
});

相关文章:

js不同浏览器标签页、窗口或 iframe 之间可以相互通信

一、创建一个广播通道 // 创建一个名为 vue-apps-channel 的广播通道 const channel new BroadcastChannel(vue-apps-channel);二、发送消息 channel.postMessage({type: popup, message: false}); 三、接收消息(也需要创建广播通道) // 也创建一个…...

springboot3+vue3融合项目实战-大事件文章管理系统-文章分类也表查询(条件分页)

在pojo实体类中增加pagebean实体类 Data NoArgsConstructor AllArgsConstructor public class PageBean <T>{private Long total;//总条数private List<T> items;//当前页数据集合 }articlecontroller增加代码 GetMappingpublic Result<PageBean<Article&g…...

Canvas进阶篇:鼠标交互动画

Canvas进阶篇&#xff1a;鼠标交互动画 前言获取鼠标坐标鼠标事件点击事件监听代码示例效果预览 拖动事件监听代码示例效果预览 结语 前言 在上一篇文章Canvas进阶篇&#xff1a;基本动画详解 中&#xff0c;我们讲述了在Canvas中实现动画的基本步骤和动画的绘制方法。本文将进…...

Mac下载bilibili视频

安装 安装 yt-dlp brew install yt-dlp安装FFmpeg 用于合并音视频流、转码等操作 brew install ffmpeg使用 下载单个视频 查看可用格式 yt-dlp -F --cookies-from-browser chrome "https://www.bilibili.com/video/BV15B4y1G7F3?spm_id_from333.788.recommend_more_vid…...

Unity editor文件数UI(支持勾选框)

unity editor文件数&#xff08;支持勾选框&#xff09; 使用的时候new一个box即可 using Sirenix.OdinInspector; using Sirenix.OdinInspector.Editor; using System; using System.Collections; using System.Collections.Generic; using UnityEngine;[Serializable] publ…...

【Node.js】Web开发框架

个人主页&#xff1a;Guiat 归属专栏&#xff1a;node.js 文章目录 1. Node.js Web框架概述1.1 Web框架的作用1.2 Node.js主要Web框架生态1.3 框架选择考虑因素 2. Express.js2.1 Express.js概述2.2 基本用法2.2.1 安装Express2.2.2 创建基本服务器 2.3 路由2.4 中间件2.5 请求…...

使用Vite创建一个动态网页的前端项目

1. 引言 虽然现在的前端更新换代的速度很快&#xff0c;IDE和工具一批批的换&#xff0c;但是我们始终要理解一点基本的程序构建的思维&#xff0c;这些环境和工具都是为了帮助我们更快的发布程序。笔者还记得以前写前端代码的时候&#xff0c;只使用文本编辑器&#xff0c;然…...

系统架构设计师案例分析题——web篇

软考高项系统架构设计师&#xff0c;其中的科二案例分析题为5选3&#xff0c;总分75达到45分即合格。本贴来归纳web设计题目中常见的知识点即细节&#xff1a; 目录 一.核心知识 1.常见英文名词 2.私有云 3.面向对象三模型 4.计网相关——TCP和UDP的差异 5.MQTT和AMQP协…...

MySQL--day5--多表查询

&#xff08;以下内容全部来自上述课程&#xff09; 多表查询 1. 为什么要用多表查询 # 如果不用多表查询 #查询员工名为Abel的人在哪个城市工作? SELECT* FROM employees WHERE last_name Abel;SELECT * FROM departments WHERE department_id 80;SELECT * FROM locati…...

【Redis】AOF日志的三种写回机制

目录 1、背景2、appendfsync always&#xff08;同步写回&#xff09;【1】工作机制【2】特点【3】实现原理 3、appendfsync everysec&#xff08;每秒写回&#xff0c;默认配置&#xff09;【1】工作机制【2】特点【3】实现原理 4、appendfsync no&#xff08;操作系统控制&am…...

leetcode hot100刷题日记——7.最大子数组和

class Solution { public:int maxSubArray(vector<int>& nums) {//方法一&#xff1a;动态规划//dp[i]表示以i下标结尾的数组的最大子数组和//那么在i0时&#xff0c;dp[0]nums[0]//之后要考虑的就是我们要不要把下一个数加进来&#xff0c;如果下一个数加进来会使结…...

基于Spring Boot和Vue的在线考试系统架构设计与实现(源码+论文+部署讲解等)

源码项目获取联系 请文末卡片dd我获取更详细的演示视频 系统介绍 基于Spring Boot和Vue的在线考试系统。为学生和教师/管理员提供一个高效、便捷的在线学习、考试及管理平台。系统采用前后端分离的架构&#xff0c;后端基于成熟稳定的Spring Boot框架&#xff0c;负责数据处理…...

MySQL Workbench 工具导出与导入数据库:实用指南

目录 一、MySQL Workbench 简介二、导出数据库2.1 打开 MySQL Workbench2.2 数据库导出步骤三、导入数据库3.1 打开 MySQL Workbench3.2 数据库导入步骤四、注意事项五、总结MySQL Workbench 是一款强大的数据库管理和开发工具,它提供了直观的图形界面,方便用户进行数据库的设…...

Android 绘制折线图

用了一段时间的 Jetpack Compose ,感觉写 UI 的效率确实会提升不少 。 配合 AI 编程绘制了一个折线图。供大家学习参考! @Composable fun TemperatureChart() {val timeLabels = listOf("7:00", "8:00", "9:00", "10:00", "11:…...

自建srs实时视频服务器支持RTMP推流和拉流

文章目录 一、整体示意图二、服务器端1.srs简介及架构2.docker方式安装3.k8s方式安装4.端口 三、推流端1.OBS Studio2.ffmpeg推流3.streamlabs苹果手机4.twire安卓手机5.网络推流摄像头 四、拉流端1.vlc2.srs 参考awesome系列&#xff1a;https://github.com/juancarlospaco/aw…...

ubuntu22.04 卸载ESP-IDF

要在Ubuntu 22.04上完全卸载ESP-IDF&#xff0c;请按照以下步骤操作&#xff1a; 卸载ESP-IDF的步骤 删除ESP-IDF目录&#xff1a; # 假设ESP-IDF安装在~/esp/esp-idf目录 rm -rf ~/esp/esp-idf删除ESP-IDF工具链和下载的工具&#xff1a; rm -rf ~/.espressif从PATH中移除ESP…...

Spring IOCDI————(2)

DI详解 我们之前讲了控制反转IOC&#xff0c;也就是bean的存&#xff0c;那么我们还需要Bean的取&#xff0c;就是DI了&#xff0c;DI翻译过来就是依赖注入&#xff0c;啥意思呢&#xff0c;就是我们通过IOC容器&#xff0c;把所有的对象交给Spring管理&#xff0c;我们指定哪…...

80. Java 枚举类 - 使用枚举实现单例模式

文章目录 80. Java 枚举类 - 使用枚举实现单例模式**1️⃣ 为什么用枚举实现单例&#xff1f;****2️⃣ 枚举实现单例模式****3️⃣ 枚举单例如何防止反射攻击&#xff1f;****4️⃣ 枚举单例如何防止反序列化破坏&#xff1f;****5️⃣ 枚举单例 vs 传统单例****6️⃣ 枚举单例…...

融云 uni-app IMKit 上线,1 天集成,多端畅行

融云 uni-app IMKit 正式上线&#xff0c;支持一套代码同时运行在 iOS、Android、H5、小程序主流四端&#xff0c;集成仅需 1 天&#xff0c;并可确保多平台的一致性体验。 融云 uni-app IMKit 在 Vue 3 的高性能加持下开发实现&#xff0c;使用 Vue 3 Composition API&#x…...

Java中的集合详解

下面是文章详细介绍了 Java 集合框架的基本思路、主要接口与实现、各类集合之间的区别与各自的适用场景&#xff0c;以及一些常见的使用技巧和最佳实践&#xff0c;供你参考。 Java中的集合详解 在 Java 开发中&#xff0c;集合&#xff08;Collection&#xff09;作为存储和操…...

利用 Java 爬虫根据关键词获取某手商品列表

在电商领域&#xff0c;根据关键词获取商品列表是常见的需求。某手作为国内知名的电商平台&#xff0c;提供了丰富的商品资源。通过 Java 爬虫技术&#xff0c;我们可以高效地根据关键词获取某手商品列表&#xff0c;并提取商品的基本信息。本文将详细介绍如何利用 Java 爬虫根…...

Axure项目实战:智慧运输平台后台管理端-订单管理2(多级交互)

亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢!如有帮助请订阅专栏! Axure产品经理精品视频课已登录CSDN可点击学习https://edu.csdn.net/course/detail/40420 课程主题:订单管理2 主要内容:中继器筛选、表单跟随菜单拖动、审批数据互通等 应用场景:订单管理…...

篇章五 项目创建

目录 1.创建一个SpringBoot项目 2.创建核心类 2.1 Exchange类 2.2 MessageQueue类 2.3 Binding类 2.4 Message类 1.Message的组成 2.逻辑删除 3.工厂方法 4.序列化与反序列化 5.offsetBeg和offsetEnd 1.创建一个SpringBoot项目 1.点击 2.填写表单 3.添加依赖 2.创建…...

Ntfs!ATTRIBUTE_RECORD_HEADER结构$INDEX_ROOT=0x90的一个例子

Ntfs!ATTRIBUTE_RECORD_HEADER结构$INDEX_ROOT0x90的一个例子 1: kd> dx -id 0,0,899a2278 -r1 ((Ntfs!_FILE_RECORD_SEGMENT_HEADER *)0xc431a400) ((Ntfs!_FILE_RECORD_SEGMENT_HEADER *)0xc431a400) : 0xc431a400 [Type: _FILE_RECORD_SEGMENT_HEADER …...

AGI大模型(30):LangChain链的基本使用

为开发更复杂的应用程序,需要使用Chain来链接LangChain中的各个组件和功能,包括模型之间的链接以及模型与其他组件之间的链接。 链在内部把一系列的功能进行封装,而链的外部则又可以组合串联。 链其实可以被视为LangChain中的一种基本功能单元。 API地址:https://python.…...

代码随想录算法训练营第六十六天| 图论11—卡码网97. 小明逛公园,127. 骑士的攻击

继续补&#xff0c;又是两个新算法&#xff0c;继续进行勉强理解&#xff0c;也是训练营最后一天了&#xff0c;六十多天的刷题告一段落了&#xff01; 97. 小明逛公园 97. 小明逛公园 感觉还是有点难理解原理 Floyd 算法对边的权值正负没有要求&#xff0c;都可以处理。核心…...

[创业之路-364]:企业战略管理案例分析-5-战略制定-宇树科技的使命、愿景、价值观的演变过程

目录 一、宇树科技的使命、愿景、价值观的演变过程 初创阶段&#xff08;2016 年成立前后&#xff09;&#xff1a;以技术梦想奠基&#xff0c;明确核心使命愿景 发展阶段&#xff08;2017 - 2023 年&#xff09;&#xff1a;技术突破与市场拓展&#xff0c;价值观逐步成型 …...

React--函数组件和类组件

React 中的函数组件和类组件是两种定义组件的方式&#xff0c;它们有以下主要区别&#xff1a; 1. 语法与定义方式 函数组件&#xff1a; 是 JavaScript 函数&#xff0c;接收 props 作为参数&#xff0c;返回 JSX。 const MyComponent (props) > {return <div>Hell…...

Flask 路由装饰器:从 URL 到视图函数的优雅映射

前置知识&#xff0c;关于Python装饰器的语法&#xff0c;链接&#xff1a;Python 装饰器&#xff1a;从“语法糖”到“代码神器”的深度解析 1、路由装饰器的功能&#xff1a;给 URL 贴 “功能标签” 在 Flask 开发中&#xff0c;你一定见过这样的代码&#xff1a; from fla…...

DDoS防护实战——从基础配置到高防IP部署

一、基础防护&#xff1a;服务器与网络层加固 Linux内核优化&#xff1a; 调整TCP协议栈参数&#xff0c;缓解SYN Flood攻击&#xff1a; # 启用SYN Cookie并减少超时时间 echo 1 > /proc/sys/net/ipv4/tcp_syncookies echo 30 > /proc/sys/net/ipv4/tcp_fin_timeout…...