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

背景

当我们的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.mzph.cn/news/217862.shtml

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

相关文章

springboot整合websocket实现控制输入流

WebSocket 是一种在客户端和服务器之间进行实时双向通信的协议。它提供了一种更高效、更可靠的替代方案&#xff0c;以替代传统的HTTP请求-响应模式。 WebSocket 的特点包括&#xff1a; 双向通信&#xff1a;客户端和服务器可以同时发送和接收消息&#xff0c;而不像HTTP一样需…

QT 基础篇

目录 QPushButton QT帮助文档 QT 对象树 QPushButton QPushButton是Qt图形界面控件中的一种&#xff0c;看英文的意思&#xff0c;他就是按钮&#xff0c;是最基本的图形控件之一。在我们的最基本的项目中&#xff0c;运行: 是一个空白的窗体&#xff0c;里面什么也没有&am…

云原生之深入解析如何在Kubernetes中快速启用Cgroup V2支持

一、cgroup v2 有哪些优势&#xff1f; Linux 中有两个 cgroup 版本&#xff1a;cgroup v1 和 cgroup v2。cgroup v2 是新一代的 cgroup API。Kubernetes 自 v1.25 起 cgroup2 特性正式 stable。cgroup v2 提供了一个具有增强资源管理能力的统一控制系统&#xff0c;cgroup v2…

在Node.js中使用MongoDB连接数据库、创建集合

本文主要介绍在Node.js中使用MongoDB连接数据库、创建集合的方法。 目录 连接数据库使用原生驱动程序连接MongoDB数据库使用Mongoose连接MongoDB数据库 创建集合使用mongodb驱动程序 连接数据库 在Node.js中使用MongoDB连接数据库有两种方式&#xff1a;使用原生驱动程序和使用…

静态HTTP应用的性能优化技巧

在Web开发中&#xff0c;静态HTTP应用以其简单、快速和安全的特点受到了广泛欢迎。然而&#xff0c;随着Web应用的规模不断扩大&#xff0c;性能问题也日益突出。本文将为你介绍一些静态HTTP应用的性能优化技巧&#xff0c;让你的应用飞得更快、更稳定。 一、压缩文件 文件压…

以pycharm为例,生成Python项目所需要的依赖库/包文档:requirements.txt

平时我们在编写或者使用别人的Python项目时&#xff0c;往往会看到一个文档requirements.txt&#xff0c;该文档是描述一个Python项目中的第三方库的名称以及版本。本文介绍导出python当前项目依赖包requirements.txt的操作步骤。 方法一&#xff1a;如果每个项目有对应的虚拟…

Sumdiv

title: Sumdiv date: 2023-12-12 21:45:09 tags: 分治 categories: 算法进阶指南 题目大意 求 A B A^B AB 的所有约数之和 m o d mod mod 9901 9901 9901( 1 1 1 ≤ \leq ≤ A , B A,B A,B ≤ \leq ≤ 5 ∗ 1 0 7 5 * 10 ^ 7 5∗107) 解题思路 将 A A A 分解质因数&…

4-Docker命令之docker export

1.docker export介绍 docker export命令是用来将docker容器中的文件系统导出为一个tar归档文件 2.docker export用法 docker export [参数] container [rootcentos79 ~]# docker export --helpUsage: docker export [OPTIONS] CONTAINERExport a containers filesystem a…

开源工业以太网现场总线协议栈汇总

开源现场总线协议栈 EtherNet/IP、EtherCAT master、Profinet开源汇总&#xff1a; EtherNet/IP:https://github.com/EIPStackGroup/OpENer EtherCAT master:https://gitlab.com/etherlab.org/ethercat EtherCAT master:https://github.com/OpenEtherCATsociety/soem http…

【C++】哈希表

文章目录 哈希概念哈希冲突哈希函数哈希表闭散列开散列 开散列与闭散列比较 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的 人工智能学习网站&#xff0c; 通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。 点击跳转到网站。 哈希概念 顺…

PHP基础 - 数据类型

数据类型 序号数据类型描述1字符串(String)用于表示文本数据2整型(Integer)用于表示整数数据3浮点型(Float)用于表示带有小数部分的数值4布尔型(Boolean)用于表示真或假两个状态5数组(Array)用于存储多个值的有序集合6对象类型(Object)用于表示自定义的复杂数据结构…

CPython(将Python编译为so)

环境 先配一下环境&#xff0c;我使用的是python3.8.5 pip install Cython 编译过程 我们准备一个要编译的文件 test.py def xor(input_string): output_string "" for char in input_string: output_string chr(ord(char) ^ 0x66) return output_string…

Redis - 事务隔离机制

Redis 的事务的本质是 一组命令的批处理 。这组命令在执行过程中会被顺序地、一次性 全部执行完毕&#xff0c;只要没有出现语法错误&#xff0c;这组命令在执行期间是不会被中断。 当事务中的命令出现语法错误时&#xff0c;整个事务在 exec 执行时会被取消。 如果事务中的…

C++入门【7-C++ 存储类】

C 存储类 存储类定义 C 程序中变量/函数的范围&#xff08;可见性&#xff09;和生命周期。这些说明符放置在它们所修饰的类型之前。下面列出 C 程序中可用的存储类&#xff1a; autoregisterstaticexternmutablethread_local (C11) 从 C 17 开始&#xff0c;auto 关键字不再…

PyTorch深度学习实战(25)——自编码器

PyTorch深度学习实战&#xff08;25&#xff09;——自编码器 0. 前言1. 自编码器2. 使用 PyTorch 实现自编码器小结系列链接 0. 前言 自编码器 (Autoencoder) 是一种无监督学习的神经网络模型&#xff0c;用于数据的特征提取和降维&#xff0c;它由一个编码器 (Encoder) 和一…

20分钟部署ChatGLM3-6B

准备工作 1.下载源代码&#xff1a; https://github.com/THUDM/ChatGLM3 2.下载预训练模型&#xff1a; https://modelscope.cn/models/ZhipuAI/chatglm3-6b/files 可以创建一个py文件&#xff0c;直接使用如下代码下载到本地&#xff1a; from modelscope.hub.snapshot_dow…

python实现形态学建筑物指数MBI提取建筑物及数据获取

前言 形态学建筑物指数MBI通过建立建筑物的隐式特征和形态学算子之间的关系进行建筑物的提取[1]。 原理 上图源自[2]。 实验数据 简单找了一张小图片&#xff1a; test.jpg 代码 为了支持遥感图像&#xff0c;读写数据函数都是利用GDAL写的。 import numpy as np import …

重建大师里能不能用kml圈出一块出来空三?

答&#xff1a;这个功能暂时还没有&#xff0c;可以先空三&#xff0c;然后导入范围kml去进行重建。 重建大师是一款专为超大规模实景三维数据生产而设计的集群并行处理软件&#xff0c;输入倾斜照片&#xff0c;激光点云&#xff0c;POS信息及像控点&#xff0c;输出高精度彩色…

LNMP网站架构分布式搭建部署

1. 数据库的编译安装 1. 安装软件包 2. 安装所需要环境依赖包 3. 解压缩到软件解压缩目录&#xff0c;使用cmake进行编译安装以及模块选项配置&#xff08;预计等待20分钟左右&#xff09;&#xff0c;再编译及安装 4. 创建mysql用户 5. 修改mysql配置文件&#xff0c;删除…

时间序列预测 — BiLSTM实现多变量多步光伏预测(Tensorflow)

目录 1 数据处理 1.1 导入库文件 1.2 导入数据集 1.3 缺失值分析 2 构造训练数据 3 模型训练 3.1 BiLSTM网络 3.2 模型训练 4 模型预测 1 数据处理 1.1 导入库文件 import time import datetime import pandas as pd import numpy as np import matplotlib.pyplot…