当前位置: 首页 > 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);
});

http://www.lryc.cn/news/2383419.html

相关文章:

  • springboot3+vue3融合项目实战-大事件文章管理系统-文章分类也表查询(条件分页)
  • Canvas进阶篇:鼠标交互动画
  • Mac下载bilibili视频
  • Unity editor文件数UI(支持勾选框)
  • 【Node.js】Web开发框架
  • 使用Vite创建一个动态网页的前端项目
  • 系统架构设计师案例分析题——web篇
  • MySQL--day5--多表查询
  • 【Redis】AOF日志的三种写回机制
  • leetcode hot100刷题日记——7.最大子数组和
  • 基于Spring Boot和Vue的在线考试系统架构设计与实现(源码+论文+部署讲解等)
  • MySQL Workbench 工具导出与导入数据库:实用指南
  • Android 绘制折线图
  • 自建srs实时视频服务器支持RTMP推流和拉流
  • ubuntu22.04 卸载ESP-IDF
  • Spring IOCDI————(2)
  • 80. Java 枚举类 - 使用枚举实现单例模式
  • 融云 uni-app IMKit 上线,1 天集成,多端畅行
  • Java中的集合详解
  • 利用 Java 爬虫根据关键词获取某手商品列表
  • Axure项目实战:智慧运输平台后台管理端-订单管理2(多级交互)
  • 篇章五 项目创建
  • Ntfs!ATTRIBUTE_RECORD_HEADER结构$INDEX_ROOT=0x90的一个例子
  • AGI大模型(30):LangChain链的基本使用
  • 代码随想录算法训练营第六十六天| 图论11—卡码网97. 小明逛公园,127. 骑士的攻击
  • [创业之路-364]:企业战略管理案例分析-5-战略制定-宇树科技的使命、愿景、价值观的演变过程
  • React--函数组件和类组件
  • Flask 路由装饰器:从 URL 到视图函数的优雅映射
  • DDoS防护实战——从基础配置到高防IP部署
  • aws平台s3存储桶夸域问题处理