iframe 与主应用页面之间如何互相通信传递数据

news2024/11/13 8:44:48

背景

当我们的Web页面需要复用现有网站的页面时,我们通常会考虑代码层面的抽离引用,但是对于一些过于复杂的页面,通过 iframe 嵌套现有的网站页面也是一种不错的方式,。目前我就职的项目组就有多个业务利用 iframe 完成业务的复用。

虽然对于用户而言,看到的页面其实是一个整体,但是本质上是两个甚至多个页面的组装,那么页面跟页面之间的交互就避免不了相互通信。

问题

比如下图中的组合方式,B页面即父页面是主站点页面,这个页面中有一部分功能是A页面已经运行运行很久的功能。为了让B页面直接能够使用A页面的内容, iframe 是不错的技术选型。

现在有两个问题

  1. A页面成功加载后通知B页面;
  2. B页面有个按钮,点击后希望A页面中切换页面;

根据上面的两个问题,我们不难想到这就是父页面跟子页面直接互相通信的问题,那么如何实现iframe嵌套页面之间的互相通信呢?

通信方式

父页面 ⇒ 子页面

💡 主页面向iframe页面传参

首先需要在子页面中注册 message事件的监听

window.addEventListener('message', function (event) {
  params = JSON.parse(event.data);

	// 处理父页面的信息,然后做对应的逻辑

})

父页面向子页面发送 message信息:

  1. 获取到iframe的实例
  2. 向iframe实例发送消息
<iframe id="child-page" src={src} />


function sendMessage(){
   const childPageIframe = document.getElementById('child-page');
   const params = { type:"switch-page", message: "切换页面"}

   childPageIframe.contentWindow.postMessage(JSON.stringify(params))
}

子页面 ⇒ 父页面

💡 iframe页面向主页面传参

首先在父页面中注册 message事件的监听

window.addEventListener('load', function (e) {
	 const handleEvent = (e: MessageEventParams) => {
            const { type, event, params } = e.data || {}
            if (acceptEvents && (acceptEvents.includes(type) || acceptEvents.includes(event))) {
                onMessageChange?.(type || event, params)
            }
        }
        window.addEventListener('message', handleEvent)
}

子页面向父页面发送 message信息

// iframe
window.parent.postMessage(JSON.stringify({
  from: 'auth',
  event: 'close',
  code: 1
}), '*')

总结

iframe 页面之间的通信主要是通过监听页面的全局 message事件,然后其他页面通过 postMessage方法向目标页面发送信息。双向通信都是这样的逻辑,所以掌握了这个核心,iframe页面间的通信可就太简单了。

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

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

相关文章

【数据结构】堆的模拟实现

前言:前面我们学习了顺序表、单链表、栈、队列&#xff0c;今天我们就开始新的学习吧&#xff0c;今天我们将进入堆的学习&#xff01;(最近博主处于低谷期)一起加油吧各位。 &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; 专栏分类:数据结构 &…

在AWS EC2中部署和使用Apache Superset的方案

大纲 1 Superset部署1.1 启动AWS EC21.2 下载Superset Docker文件1.3 修改Dockerfile1.4 配置管理员1.5 结果展示1.6 检查数据库驱动1.7 常见错误处理 2 Glue&#xff08;可选参考&#xff09;3 IAM与安全组3.1 使用AWS Athena3.2 使用AWS RedShift或AWS RDS3.2.1 查看AWS Reds…

MySQL8.0默认配置详解--持续更新中

binlog日志的默认保留数量和大小 在MySQL 8.0中&#xff0c;您可以使用以下SQL命令来查询binlog日志的默认保留数量和大小&#xff1a; SHOW VARIABLES LIKE binlog_expire_logs_seconds; SHOW VARIABLES LIKE max_binlog_size;binlog_expire_logs_seconds 变量表示binlog日志…

食品进销存系统哪个好?亿发商品信息管理系统,操作简单好用,可定制

元旦将近&#xff0c;年的味道也越来越浓厚。年货置办的人越来越多&#xff0c;食品店也迎来年底的生意旺季。但众所周知&#xff0c;食品行业作为一个商品品类众多、品牌繁多且商品销售价格波动频繁的领域&#xff0c;常常面临商品批次管理的挑战&#xff0c;特别是需要注意避…

智能优化算法应用:基于群居蜘蛛算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于群居蜘蛛算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于群居蜘蛛算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.群居蜘蛛算法4.实验参数设定5.算法结果6.…

【LuatOS】简单案例网页点灯

材料 硬件&#xff1a;合宙ESP32C3简约版&#xff0c;BH1750光照度模块&#xff0c;0.96寸OLED(4P_IIC)&#xff0c;杜邦线若干 接线&#xff1a; ESP32C3.GND — OLED.GND — BH1750.GND ESP32C3.3.3V — OLED.VCC — BH1750.VCC ESP32C3.GPIO5 — OLED.SCL — BH1750.SCL E…

人工智能导论习题集(1)

第二章&#xff1a;知识表示 题1题2题3题4题5 题1 题2 题3 题4 题5

【从零开始学习JVM | 第六篇】快速了解 直接内存

前言&#xff1a; 当谈及Java虚拟机&#xff08;JVM&#xff09;的内存管理时&#xff0c;我们通常会想到堆内存和栈内存。然而&#xff0c;还有一种被称为"直接内存"的特殊内存区域&#xff0c;它在Java应用程序中起着重要的作用。直接内存提供了一种与Java堆内存和…

DRBD分布式存储实验

DRBD DRBD的全称为&#xff1a;Distributed Replicated Block Device (DRBD) 分布式块设备复制 与心跳连接结合使用&#xff0c;构建高可用性(HA)的集群。 实现方式是通过网络来镜像(mirror)整个设备。它允许用户在远程机器上建立一个本地块设备的实时镜像。DRBD负责接收数据…

[Linux] Tomcat

一、Tomcat相关知识 1.1 Tomcat的简介 Tomcat 是 Java 语言开发的&#xff0c;Tomcat 服务器是一个免费的开放源代码的 Web 应用服务器&#xff0c;是 Apache 软件基金会的 Jakarta 项目中的一个核心项目&#xff0c;由 Apache、Sun 和其他一些公司及个人共同开发而成。Tomc…

Python从入门到精通九:Python异常、模块与包

了解异常 什么是异常 当检测到一个错误时&#xff0c;Python解释器就无法继续执行了&#xff0c;反而出现了一些错误的提示&#xff0c;这就是所谓的“异常”, 也就是我们常说的BUG bug单词的诞生 早期计算机采用大量继电器工作&#xff0c;马克二型计算机就是这样的。 19…

元素定位,年轻人在 Web UI 自动化成长道路上吃的第一个亏

元素定位&#xff0c;对于 Web UI 自动化而言&#xff0c;绝对是大家成长道路上的一道绊脚石。很多初学者&#xff0c;都“死”在了元素定位上&#xff0c;从而失去了学习的兴趣。导致职业规划不得不半途而废~那么&#xff0c;今天&#xff0c;我们就使用 Katalon Studio&#…

我的创作三周年纪念日

今天收到CSDN官方的来信&#xff0c;创作三周纪念日到了。 Dear: Hann Yang &#xff0c;有幸再次遇见你&#xff1a; 还记得 2020 年 12 月 12 日吗&#xff1f; 你撰写了第 1 篇技术博客&#xff1a; 《vba程序用7重循环来计算24》 在这平凡的一天&#xff0c;你赋予了它…

Python编程技巧 – 使用组合运算符

Python编程技巧 – 使用组合运算符 Python Programming Skills – Using Combined Operators Python通过赋值过程&#xff0c;将声明变量与赋值和而为之&#xff0c;可谓讲求效率。此外&#xff0c;在Python赋值运算符里&#xff0c;也有一个强大高效的功能&#xff0c;即复合…

Python 神奇解码器:pyWhat 库全面指南

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 在当今数字化的世界中&#xff0c;理解和处理文本数据是许多应用程序的关键任务。而PyWhat库作为一个用于处理文本的Python库&#xff0c;提供了强大的功能&#xff0c;帮助开发者在文本中识别和提取有意义的信息…

n-Track Studio Suite,音频录制与编辑的新纪元

在音乐制作领域&#xff0c;n-Track Studio Suite已经成为了音频录制和编辑的新标杆。这款软件将功能强大、操作简便和艺术创新完美融合&#xff0c;为用户提供了前所未有的音乐制作体验。 n-Track Studio Suite以其先进的音频处理技术&#xff0c;提供了精确的音频录制、编辑…

【从零开始学习JVM | 第三篇】类的生命周期(高频面试)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。 在本文中&#xff0c;我们将深入探讨类的生命周期&#xff0c;从类加载到…

VUE3语法--toRefs与toRef用法

1、功能概述 ref和reactive能够定义响应式的数据&#xff0c;当我们通过reactive定义了一个对象或者数组数据的时候&#xff0c;如果我们只希望这个对象或者数组中指定的数据响应&#xff0c;其他的不响应。这个时候我们就可以使用toRefs和toRef实现局部数据的响应。 toRefs是…

【探讨】bp神经网络是前馈还是后馈

目录 一、BP神经网络简介 1.1 什么是BP神经网络 1.2 BP神经网络的结构 二、BP神经网络的前馈与后馈 2.1 什么是BP神经网络的前馈 2.2 什么是BP神经网络的后馈 三、BP神经网络前馈与后馈的关系 3.1 BP神经网络前馈与后馈的区别 3.2 BP神经网络前馈与后馈的意义 四、BP…

论文阅读三——端到端的帧到凝视估计

论文阅读三——端到端的帧到凝视估计 主要内容研究问题文章的解题思路文章的主要结构 论文实验关于端到端凝视估计的数据集3种基线模型与EFE模型的对比在三个数据集中与SOTA进行比较 问题分析重要架构U-Net 基础知识 主要内容 文章从端到端的方法出发&#xff0c;提出了根据he…