前端跨界面之间的通信解决方案

news2025/1/22 19:43:50

主要是这两个方案,其他的,还有 SharedWorkerIndexedDBWebSocketService Worker
如果是,父子嵌套 iframe 还可以使用 window.parent.postMessage(“需要传递的参数”, ‘*’)

1、localStorage

核心点

  1. 同源,不能跨域(协议、端口、域名三者有一个不一样)
  2. 使用storage事件监听localStorage变化

示例代码
pageA 界面

<body>
  <h1>1、localStorage</h1>
  <h2>pageA</h2>
  <script>
    window.addEventListener("storage", (e) => {
      console.info("localStorage发生变化:", e)
    })
  </script>
</body>

pageB 界面

<body>
  <h1>1、localStorage</h1>
  <h2>pageB</h2>
  <button id="btnB">添加数据到 localStorage</button>
</body>
<script>
  let btnB = document.getElementById("btnB");
  let num = 0;
  btnB.addEventListener("click", () => {
    localStorage.setItem("num", num++)
  })
</script>

当在 B界面上,点击添加的时候,A界面会输出结果

在这里插入图片描述

2、BroadcastChannel

核心点

在这里插入图片描述

  1. 同源
  2. 两个界面,务必保证频道名称一样

示例代码
pageA界面

<body>
  <h1>1、localStorage</h1>
  <h2>pageA</h2>
  <h1>2、BroadcastChannel</h1>
  <span id="span2">发送广播</span>
  <script>
    window.addEventListener("storage", (e) => {
      console.info("localStorage发生变化:", e)
    })


    document.querySelector('#span2').addEventListener('click', () => {
      // 创建 某个频道
      var bc = new BroadcastChannel("test_channel");
      bc.postMessage({ msg: "A界面发送来的" })
    })

  </script>
</body>

pageB 界面

<body>
 <h1>1、localStorage</h1>
 <h2>pageB</h2>
 <button id="btnB">添加数据到 localStorage</button>
</body>
<script>
 let btnB = document.getElementById("btnB");
 let num = 0;
 btnB.addEventListener("click", () => {
   localStorage.setItem("num", num++)
 })


 var bc = new BroadcastChannel("test_channel");
 bc.onmessage = function (ev) {
   console.log('收到了消息', ev);
 };
</script>

在这里插入图片描述

window.parent.postMessage

<!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>
  <iframe src="./son.html" frameborder="0"></iframe>
  <script>

    //监听单个事件
    window.addEventListener('message', function (msg) {
      console.log(msg, '发生了变化')
    })
  </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>
  <h2>发送请求</h2>
  <script>
    // window.parent 是 iframe 子页面获取父页面的 window 对象

    document.querySelector('h2').addEventListener('click',()=>{
      window.parent.postMessage("需要传递的参数", '*')
    })
    // 后面的 * 号就是处理跨域问题的,任何域名都不会出现跨域问题
 

    // 也可以指定传送域名地址,这个域名不会出现跨域问题,写父页面(接收)域名地址
    // window.parent.postMessage("需要传递的参数", 'http://0.0.0.0:8080')
    // 传递的参数可以是数组,对象,字符串等
  </script>
</body>

</html>

3、参考连接

BroadcastChannel MDN 介绍

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1214816.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

9.MyBatis-Plus

1、前期准备 a. 创建数据库 CREATE TABLE USER (id BIGINT(20)NOT NULL COMMENT 主键ID,NAME VARCHAR(30)NULL DEFAULT NULL COMMENT 姓名,age INT(11)NULL DEFAULT NULL COMMENT 年龄,email VARCHAR(50)NULL DEFAULT NULL COMMENT 邮箱,PRIMARY KEY (id) );INSERT INTO user…

短路语法 [SUCTF 2019]EasySQL1

打开题目 输入字符的时候啥也不回显。只有输入数字的时候页面有回显 但是当我们输入union&#xff0c;from&#xff0c;sleep&#xff0c;where&#xff0c;order等&#xff0c;页面回显nonono&#xff0c;很明显过滤了这些关键词 最开始我的思路是打算尝试双写绕过 1;ununion…

TS-08-A-2D、TS-08-B-1H插装式电磁比例溢流阀放大器

TS-08-A-2D、TS-08-B-1H插装式电磁比例溢流阀放大器持续的电磁铁、高效能的电磁铁结构、可选的线圈电压和终端、工业化通用插孔、紧凑的结构。 螺纹插装式、先导滑阀式减压溢流阀&#xff0c;利用可变电流输入可实现指定范围内的输出压力连续调节。输出压力与 DC 电流输入成比…

[Jenkins] 物理机 安装 Jenkins

这里介绍Linux CentOS系统直接Yum 安装 Jenkins&#xff0c;不同系统之间类似&#xff0c;操作命令差异&#xff0c;如&#xff1a;Ubuntu用apt&#xff1b; 0、安装 Jenkins Jenkins是一个基于Java语言开发的持续构建工具平台&#xff0c;主要用于持续、自动的构建/测试你的软…

Linux学习教程(第三章 Linux文件和目录管理)1

第三章 Linux文件和目录管理&#xff08;初识Linux命令&#xff09; 对初学者来说&#xff0c;管理 Linux 系统中的文件和目录&#xff0c;是学习 Linux 至关重要的一步。 为了方便管理文件和目录&#xff0c;Linux 系统将它们组织成一个以根目录 / 开始的倒置的树状结构。Li…

【架构师】的修炼之道都需要学习哪些?看看这些就够了

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…

代码随想录图论|130. 被围绕的区域 417太平洋大西洋水流问题

130. 被围绕的区域 **题目&#xff1a;**给你一个 m x n 的矩阵 board &#xff0c;由若干字符 ‘X’ 和 ‘O’ &#xff0c;找到所有被 ‘X’ 围绕的区域&#xff0c;并将这些区域里所有的 ‘O’ 用 ‘X’ 填充。 题目链接&#xff1a;130. 被围绕的区域 解题思路&#xff1a…

《向量数据库指南》——2023云栖大会现场,向量数据库Milvus Cloud成关注焦点

近期,广受关注的2023 云栖大会正式收官,来自全球各地的开发者集聚一堂,共同探索 AI 时代的更多可能性。 云栖大会是由阿里巴巴集团主办的科技盛宴,是中国最早的开发者创新展示平台。据悉,今年云栖大会的主题为“计算,为了无法计算的价值”,共吸引了全球 44 个国家和地区…

用封面预测书的价格【图像回归】

今天&#xff0c;我将介绍计算机视觉的深度学习应用&#xff0c;用封面简单地估算一本书的价格。 我没有看到很多关于图像回归的文章&#xff0c;所以我为你们写这篇文章。 距离我上一篇文章已经过去很长时间了&#xff0c;我不得不承认&#xff0c;作为一名数据科学家&#x…

OceanBase杨冰:完全自研,才能逢山开路遇水搭桥

11月16日&#xff0c;在OceanBase2023年度发布会上&#xff0c;OceanBase CEO杨冰介绍&#xff0c;中国数字经济的蓬勃发展催生了对分布式数据库的强大需求&#xff0c;这种需求也牵引了OceanBase坚定投入自主研发&#xff0c;从而推动树立了分布式数据库的四项新标准。 据了解…

Harmony SDK API 版本 与 Harmony OS 版本对照表,及如何查看鸿蒙手机Harmony SDK Api 版本

Harmony SDK API 版本 与 Harmony OS 版本对照表 Harmony OSHarmony SDK APIHarmony 4.09Harmony 3.19Harmony 3.08Harmony 3.0 pre7Harmony 2.2.06Harmony 2.1.05Harmony 2.04 具体到真机上可能会有差异&#xff0c;如我的手机OS版本是2.0&#xff0c;按照上面表应该是4&…

jsp中使用PDF.js实现pdf文件的预览

本文介绍的是在使用jsp作为模板引擎的spring-mvc项目中&#xff0c;如何利用 PDF.js实现pdf文件的预览。 1、下载 PDF.js Getting Started (mozilla.github.io) 下载解压后其中有两个目录&#xff0c;直接将这两个文件夹放到项目的web资源目录中。此时相当于把PDF.js这个项目也…

使用Kohya_ss训练Stable Diffusion Lora

Stable Diffusion模型微调方法 Stable Diffusion主要有 4 种方式&#xff1a;Dreambooth, LoRA, Textual Inversion, Hypernetworks。 Textual Inversion &#xff08;也称为 Embedding&#xff09;&#xff0c;它实际上并没有修改原始的 Diffusion 模型&#xff0c; 而是通过…

Android 14 Beta 1

Android 14的第一个 Beta 版&#xff0c;围绕隐私、安全、性能、开发人员生产力和用户定制等核心主题构建&#xff0c;同时继续改进平板电脑、可折叠设备等大屏幕设备的体验。我们一直在完善 Android 14 的功能和稳定性方面取得稳步进展&#xff0c;现在是时候向开发者和早期采…

软件系统集成指南

软件产品集成是将各种软件组件、模块和代码组装成最终可执行、可应用的软件产品的过程。这个过程涉及到将工作产品转化为产品的组装过程。在软件工程中&#xff0c;产品集成是一个重要的环节&#xff0c;通过持续性集成&#xff0c;将产品集成的过程常态化、自动化。做好产品集…

收集整理微信小程序源码精选8500套(不同行业的源码集合)/带后台+含搭建开发教程

这下面分享的是精心收集整理的微信小程序源码精选8500套&#xff0c;它含有不同行业的源码集合&#xff0c;带后台&#xff0c;而且含搭建开发教程。可以转存起来&#xff0c;需要的时候直接搜索关键词查找就行了&#xff0c;方便得很。 很多伙伴学习小程序不知怎么开始&#…

【Vue-Demo】倒计时3秒后返回首页

首页path:/ 倒计时结束后要清除计时器&#xff0c;防止内存泄漏&#xff1a; if (this.count 0) {clearInterval(this.timer); }<!-- ErrorJump.vue --> <template><h2>Error&#xff1a;找不到页面&#xff01;</h2><h4>{{ count }}S后<R…

01序列 卡特兰数

解法&#xff1a; 将01序列置于坐标轴上&#xff0c;起始点为原点。0表示向右走&#xff0c;1表示向上走。这样就可以将前缀0的个数不少于1的个数就可以转换为路径上的点&#xff0c;横坐标大于纵坐标&#xff0c;也就是求合法路径个数。 注意题目mod的数是质数&#xff0c;所…

【嵌入式项目应用】__单片机STM32有什么好的裸机程序架构思路推荐?

目录 前言 没设计好程序架构&#xff0c;根本做不稳定。 按照我的思维&#xff0c;我会这样去设计程序&#xff1a; 那这样的好处是什么&#xff1f; (*&#xffe3;︶&#xffe3;)创作不易&#xff01;期待你们的 点赞、收藏和评论喔。 前言 在我刚出来的时候&#x…

Android笔记(十三):结合JetPack Compose和CameraX实现视频的录制和存储

在“Android笔记&#xff08;八&#xff09;&#xff1a;基于CameraX库结合Compose和传统视图组件PreviewView实现照相机画面预览和照相功能”&#xff0c;文中介绍了拍照功能的实现&#xff0c;在本文中将介绍结合JetPack Compose和CameraX实现视频的录制。 新建一个项目 在项…