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

【场景方案】我所积累的一些跨页面的数据传递方式，持续更新，欢迎补充~

news 2026/4/1 11:02:05

文章目录

  • Iframe内嵌相互传递
  • BroadcastChannel同标签页数据传递
  • localStorage中间人传递
  • 未完待续...

Iframe内嵌相互传递

使用window.postMessage()的这个html5特性去跨域传递数据，不受跨域限制。

父层：

sendMes(){ // 向iframe发送let iframdom = this.$refs.iframdom // 拿到iframe的domlet _window = iframdom.contentWindow // 拿到iframe的window对象let _document = iframdom.contentDocument // 拿到iframe的document对象_window.postMessage({type: 'sendMes', text: '内容'}, '*') // 注意点：1 第一个参数传内容用对象装，因为webpack会默认主动触发一次，// 即使sendMes没执行，这样被第一次触发的时候我们能通过对象的内容去区分。// 2 第二个参数写传入的地址是什么，如果不限制地址写*即可
}window.addEventListener("message", (e) => { // 接收子层// e.data及postMessage的第一个参数，e.origin及postMessage的第二个参数
})

子层：

window.addEventListener("message", (e) => { // 接收父层// e.data及postMessage的第一个参数，e.origin及postMessage的第二个参数
})sendOut(){ // 向父层发送window.top.postMessage({type: 'sendMes', text: '内容'}, '*') 
}

个人对这个api的看法：

  • 能够支持跨域，这样不同项目的网站都能相互通信了。
  • 当传输的内容多了，整个工程到处都是postMessage，到处监听，会非常的混乱（建议监听统一放到类似App.vue的组文件中）。
  • 父层与子层需要定好规则，例如你的项目是子层，就要去问负责开发父层网站的开发人员，怎么按照他们的规范去传递数据和获取回数据

这里推荐篇基础使用文章：【记录postMessage的详细使用】
再推荐篇补充的：【终于搞懂了 Iframe （跨窗口通信）】

BroadcastChannel同标签页数据传递

这个api适合同一个浏览器中，访问多个标签页，标签页之间的通信：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><button id="btn">点击</button><script>let btnDom = btnconst channel = new BroadcastChannel('card')btnDom.onclick = function () {channel.postMessage({a: 1})}channel.onmessage = (e) => {console.log('监听到信息', e.data);}</script>
</body></html>

当a标签页点击了按钮，b标签页就能够接收到数据。兼容性也很好。

当然在框架中使用有些注意事项：

用添加监听器的方式去监听channel的信息传递，这样好销毁内存

channel.addEventListener('message', handler)
channel.removeEventListener('message', handler) // 销毁

还有一个要注意的，如果postMessage时传入的是框架里的响应式变量是会报错的，传入的时候用…处理下。

综上，最好单独写个js文件去调用BroadcastChannel：

const channel = new BroadcastChannel('demo')export function sendMsg(type, content) {channel.postMessage({type,content,})
}export function listenMsg(callback) {const handler = (e) => {callback && callback(e.data)}channel.addEventListener('message', handler)return ()=>{channel.removeEventListener('message', handler) // 让组件在使用的时候能够得到销毁函数，在生命周期钩子中销毁}
}

localStorage中间人传递

localStorage是可以跨页签的，只要是同域的都共用一个localStorage缓存，利用这个特性可以：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><button id="setData">存储</button><button id="getData">获取</button><script>let setDataDom = setDatalet getDataDom = getDatasetDataDom.onclick = function () {localStorage.setItem('a', 1)}getDataDom.onclick = function () {console.log(localStorage.getItem('a'));}</script>
</body></html>

iframe嵌套相同域名的页面应该也是可以正常使用的，不过

  • 多占用localStorage资源
  • 无法做到主动接收

这里提个醒sessionStorage每个页签都是独立的

未完待续…

相关文章：

【场景方案】我所积累的一些跨页面的数据传递方式，持续更新，欢迎补充~

文章目录 Iframe内嵌相互传递BroadcastChannel同标签页数据传递localStorage中间人传递未完待续... Iframe内嵌相互传递 使用window.postMessage()的这个html5特性去跨域传递数据&#xff0c;不受跨域限制。 父层&#xff1a; sendMes(){ // 向iframe发送let iframdom this…...

编程日记 2023/9/2 21:11:05

ASP.NET Core 的错误页面

异常处理 Developer 环境的异常页面 ASP.NET Core App 会可以在开发阶段用UseDeveloperExceptionPage启用 Developer 异常页面&#xff1a; app.UseDeveloperExceptionPage();当遇到Unhandled 异常信息时&#xff0c;可以输出异常信息页面&#xff1a; 异常信息包括&#xf…...

编程日记 2023/9/2 21:10:03

Android静态ip设置的坑

Android静态ip设置的坑 Android静态ip设置&#xff0c;对于这个功能&#xff0c;如果没有接触过&#xff0c;会给人感觉是个特别简单的功能&#xff0c;直接调用系统的接口即可&#xff0c;其实这个功能还是有许多坑的&#xff0c;因为谷歌在Android SDK中对相关的API进行非系…...

编程日记 2023/9/2 21:09:01

电源管理（PMIC）TPS63070RNMR、TPS650942A0RSKR、LM5175RHFR器件介绍、应用及特点。

一、TPS63070RNMR&#xff0c;降压升压 开关稳压器 IC 正 可调式 2.5V 1 输出 3.6A&#xff08;开关&#xff09; 15-PowerVFQFN 1、概述 TPS63070高输入电压降压-升压转换器是一款高效的低静态电流降压-升压转换器。这些器件适用于输入电压高于或低于输出电压的应用。升压模式…...

编程日记 2023/9/2 21:08:00

k8s(kubernetes)介绍篇

一、Kubernetes 是什么 Kubernetes 是一个全新的基于容器技术的分布式架构解决方案&#xff0c;是 Google 开源的一个容器集群管理系统&#xff0c;Kubernetes 简称 K8S。 Kubernetes 是一个一站式的完备的分布式系统开发和支撑平台&#xff0c;更是一个开放平台&#xff0c;对…...

编程日记 2023/9/2 21:06:58

gRPC + Spring Boot 编程教程 - piot

在本文中&#xff0c;您将学习如何实现通过 gRPC 通信的 Spring Boot 应用程序。gRPC 是一个现代开源远程过程调用 (RPC) 框架&#xff0c;可以在任何环境中运行。默认情况下&#xff0c;它使用 Google 的 Protocol Buffer 来序列化和反序列化结构化数据。当然&#xff0c;我们…...

编程日记 2023/9/2 21:05:57

新建Spring Boot项目

使用IDEA 来创建: 文件-新建-项目 填写项目元数据 选择依赖项 此处可以先选 web-spring web 关于这些依赖项&#xff0c;更多可参考&#xff1a; IDEA创建Spring boot项目时各依赖的说明&#xff08;Developer Tools篇&#xff09;[1] 项目结构介绍 展开项目&#xff0c;此时…...

编程日记 2023/9/2 21:04:55

Python数据分析的第三方库

ython作为一种简单易学、功能强大的编程语言&#xff0c;逐渐成为数据分析领域的首选工具。在Python数据分析中&#xff0c;有许多优秀的第三方库可以帮助我们进行数据处理、可视化和建模。 常用第三方库&#xff1a; NumPy&#xff1a;提供了高性能的多维数组对象和用于数组…...

编程日记 2023/9/2 21:03:53

EF列表分页查询(单表、多表)，排除参数为空的条件

在日常使用EF框架查询数据库时&#xff0c;有时传入的参数为空,那么我们应该把该条件排除&#xff0c;不应列入组装的sql中&#xff0c;本篇文件以分页查询为例介绍EF框架的单表、多表的多条件查询&#xff0c;参数为空时排除条件。 首先我们要有派生自DBContext类的数据上下文…...

编程日记 2023/9/2 21:02:51

VisualStudio配置pybind11-Python调用C++方法

个人测试下来Debug生成的dll改pyd&#xff0c;py中import会报错gilstate->autoInterpreterState 如果遇到同样问题使用Release吧 目录 1.安装pybind11 1.pip&#xff1a; 2.github&#xff1a; 2.配置VS工程 2.在VC目录中的包含目录添加&#xff1a; 3.在VC目录中的库目录…...

编程日记 2023/9/2 21:01:49

ZZULIOJ 1164: 字符串加密，Java

ZZULIOJ 1164: 字符串加密&#xff0c;Java 题目描述 输入一串字符&#xff08;长度不超过100&#xff09;和一个正整数k&#xff0c;将其中的英文字母加密并输出加密后的字符串&#xff0c;非英文字母不变。加密思想&#xff1a;将每个字母c加一个序数k&#xff0c;即用它后…...

编程日记 2023/9/2 21:00:48

联合体（共用体）的简单介绍

目录 概念&#xff1a; 联合的声明&#xff1a; 类比结构体&#xff1a; 联合体的大小&#xff1a; 联合的⼤⼩⾄少是最⼤成员的⼤⼩ 联合体的空间是共用的 联合体内部成员的赋值&#xff1a; 当最⼤成员⼤⼩不是最⼤对⻬数的整数倍的时候&#xff0c;就要对⻬到最⼤对⻬…...

编程日记 2023/9/2 20:59:47

Ansible学习笔记8

group模块&#xff1a; 创建一个group组&#xff1a; [rootlocalhost ~]# ansible group1 -m group -a "nameaaa gid5000" 192.168.17.105 | CHANGED > {"ansible_facts": {"discovered_interpreter_python": "/usr/bin/python"}…...

编程日记 2023/9/2 20:58:46

五子棋游戏禁手算法的改进

五子棋游戏禁手算法的改进 五子棋最新的禁手规则&#xff1a; 1&#xff0e;黑棋禁手判负、白棋无禁手。黑棋禁手有“三三”&#xff08;包括“四三三”&#xff09;、“四四”&#xff08;包括“四四三”&#xff09;和“长连”。黑棋只能以“四三”取胜。 2&#xff0e;黑方…...

编程日记 2023/9/2 20:57:44

基于 Debian 12 的 Devuan GNU+Linux 5 为软件自由爱好者而生

导读Devuan 开发人员宣布发布 Devuan GNULinux 5.0 “代达罗斯 “发行版&#xff0c;它是 Debian GNU/Linux 操作系统的 100% 衍生版本&#xff0c;不包含 systemd 和相关组件。 Devuan GNULinux 5 基于最新的 Debian GNU/Linux 12 “书虫 “操作系统系列&#xff0c;采用长期支…...

编程日记 2023/9/2 20:56:43

算法系列-力扣234-回文链表判定

回文链表判定 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为回文链表。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 方法一&#xff1a;栈反转对比法 解题思路&#xff1a;找到中间节点后用栈辅助反转对比 解题方法&#xff1…...

编程日记 2023/9/2 20:55:41

算法通关村——海量数据场景下的热门算法题的处理方法

1. 从40个亿中产生一个不存在的整数 题目要求&#xff1a;给定一个输入文件&#xff0c;包含40亿个非负整数&#xff0c;请设计一个算法&#xff0c;产生一个不存在该文件中的整数&#xff0c;假设你有1GB的内存来完成这项任务。 ● 进阶&#xff1a;如果只有10MB的内存可用&a…...

编程日记 2023/9/2 20:54:40

【C++从0到王者】第二十五站：多继承的虚表

文章目录 前言一、多继承的虚函数表二、菱形继承与菱形虚拟继承的虚函数表1.菱形继承2.菱形虚拟继承的虚函数表 三、抽象类1.抽象类的概念2.接口继承与实现继承 总结 前言 其实关于单继承的虚函数表我们在上一篇文章中已经说过了&#xff0c;就是派生类中的虚表相当于拷贝了一…...

编程日记 2023/9/2 20:53:39

老程序员教你如何笑对问题，轻松培养逻辑思考和解决问题的能力

原文链接 ​​​​​​​老程序员教你如何笑对问题&#xff0c;轻松培养逻辑思考和解决问题的能力 故事发生在一个阳光明媚的午后&#xff0c;我们的主人公&#xff0c;老李&#xff0c;一位拥有十年工作经验的 Python 老程序员&#xff0c;正悠哉地在喝着咖啡。 这时&#x…...

编程日记 2023/9/2 20:52:38

Omni Recover for Mac(专业的iPhone数据恢复软件)

Omni Recover for Mac是一款专业的Mac数据恢复软件&#xff0c;能够帮助用户快速找回被误删除、格式化、病毒攻击等原因造成的文件和数据&#xff0c;包括图片、视频、音频、文档、邮件、应用程序等。同时&#xff0c;Omni Recover for Mac还具有数据备份和清理功能&#xff0c…...

编程日记 2023/9/2 20:51:37

耦合详解-模块

耦合详解 耦合（Coupling）是衡量软件模块之间相互依赖程度的指标。低耦合是优秀软件设计的核心目标之一，它使系统更易于维护、测试和扩展。 1. 耦合的本质 耦合描述的是两个模块（类、组件、服务）之间的依赖关系强度。当修改一个模块时，需要修改其他模块的程度越高，耦合…...

编程新知 2026/4/1 10:20:44

千问3.5-2B在VSCode中的集成应用：基于CodeX的智能编程助手搭建

千问3.5-2B在VSCode中的集成应用&#xff1a;基于CodeX的智能编程助手搭建 1. 引言 作为一名开发者&#xff0c;你是否经常在编码过程中遇到这些问题&#xff1a;记不清某个API的具体用法&#xff1f;需要快速生成重复性代码片段&#xff1f;遇到报错信息却找不到清晰的解释&…...

编程新知 2026/4/1 10:04:33

避开生产计划大坑：不懂MPS和MRP的区别，你的SAP PP模块白学了

避开生产计划大坑&#xff1a;不懂MPS和MRP的区别&#xff0c;你的SAP PP模块白学了 在制造业数字化转型的浪潮中&#xff0c;SAP PP模块作为生产计划的核心枢纽&#xff0c;常常成为企业运营的"隐形战场"。许多实施顾问和计划专员在MD41和MD02这两个相似的事务码前陷…...

编程新知 2026/4/1 10:02:28

解锁Unity游戏定制潜能：MelonLoader全方位应用指南

解锁Unity游戏定制潜能&#xff1a;MelonLoader全方位应用指南 【免费下载链接】MelonLoader The Worlds First Universal Mod Loader for Unity Games compatible with both Il2Cpp and Mono 项目地址: https://gitcode.com/gh_mirrors/me/MelonLoader 副标题&#xff…...

编程新知 2026/4/1 9:38:05

NVIDIA Profile Inspector 终极指南：免费解锁显卡隐藏性能的完整教程

NVIDIA Profile Inspector 终极指南&#xff1a;免费解锁显卡隐藏性能的完整教程 【免费下载链接】nvidiaProfileInspector 项目地址: https://gitcode.com/gh_mirrors/nv/nvidiaProfileInspector 想要让游戏画面更流畅、画质更清晰吗&#xff1f;NVIDIA Profile Inspe…...

编程新知 2026/4/1 7:27:12

Git从入门到精通：完整学习路线图，全面详细一次过

Git超详细使用教程&#xff1a;从入门到高级&#xff08;全面详解&#xff5c;目录结构&#xff5c;口语化专业双轨&#xff5c;长文警告&#xff09; ⚠️ 长文警告&#xff1a;全文共 6218 字&#xff0c;覆盖 Git 全生命周期操作&#xff0c;含 18 个核心章节、7 张结构化对…...

编程新知 2026/4/1 7:10:48

别再只数步数了！深入聊聊ADXL345计步算法里的‘动态阈值’与‘最活跃轴’

别再只数步数了&#xff01;深入聊聊ADXL345计步算法里的‘动态阈值’与‘最活跃轴’ 当你盯着智能手环上的步数统计时&#xff0c;有没有想过这串数字背后藏着怎样的算法智慧&#xff1f;ADXL345作为一款经典的三轴加速度传感器&#xff0c;其计步算法远非简单的阈值比较那么简…...

编程新知 2026/4/1 4:28:06

协方差矩阵可视化指南：如何用Seaborn热力图解读变量关系（附完整代码）

协方差矩阵可视化指南&#xff1a;如何用Seaborn热力图解读变量关系&#xff08;附完整代码&#xff09; 在数据分析的实际工作中&#xff0c;我们常常需要向非技术背景的决策者解释复杂的统计结果。这时候&#xff0c;一张直观的热力图往往比几十页的统计报告更有说服力。协方…...

编程新知 2026/4/1 2:50:25

AD5144A数字电位器I²C驱动库深度解析与工程实践

1. AD5144A数字电位器驱动库深度解析&#xff1a;面向嵌入式工程师的IC控制实践指南AD5144A是ADI公司推出的四通道非易失性数字电位器&#xff0c;属于AD51xx系列中功能完备、应用灵活的代表型号。该器件通过IC接口实现对四个独立通道的精确电阻调节&#xff0c;支持256级&…...

编程新知 2026/4/1 2:36:19

【独家首发】基于eBPF+Java Agent+Istio Telemetry V2的零侵入式调试框架（已落地金融级生产环境，QPS＞50K场景验证）

第一章&#xff1a;零侵入式调试框架的演进逻辑与金融级落地价值传统调试方式依赖代码埋点、日志增强或代理注入&#xff0c;不仅增加系统耦合度&#xff0c;更在高敏感、强一致性的金融核心系统中引入不可控风险。零侵入式调试框架应运而生——它不修改业务字节码、不依赖特定…...

编程新知 2026/4/1 1:02:26