Vue集成Iframe
一、应用场景,为什么要集成Iframe?
1、庞大项目拆分后,便于管理和部署,用集成Iframe的方法合并
2、避免功能重复开发,共用模块可单独开发为一个项目,既可独立部署,也可集成到中台系统
二、集成方法
1.如何加载iframe
代码如下:
<iframe id="iframeDemo" name="iframeDemo" @load="handleLoadComplete" :src="url" style='width: 100%;height: 100%;border-width: 0;'></iframe>
// 在iframe加载完成前,页面添加loading,避免页面出现白屏
// url 为iframe的地址
handleLoadComplete(){this.loading = false
}
2.Iframe和主页面间消息如何传递
代码如下:
// 主页面给Iframe传递消息
window.frames.iframeDemo.postMessage({ type:'页面1', // 如果有多个页面需要给iframe传递不同类型的消息data: {A:'',B:'',C:''}}, '*')
// Iframe给主页面传递消息(可根据实际情况添加延时函数)
setTimeout(() => {window &&window.parent &&window.parent.postMessage({type: 'child-页面1', // 如果有多个页面需要给主页面传递不同类型的消息data: {A:'',B:'',}},'*')}, 500)// 接收传递的信息 (iframe和主页面接收信息的方式是同样的)handleIframeMessage(e) {console.log(e,'e6666') // 打印获取传递过来的信息,根据信息处理自己的业务逻辑if (e.data.type === 'vue-topo-init') {}}
// 注意 ⚠️ vue项目中 接收消息必须用到监听的方法,在页面销毁时需移除监听
mounted() {window.addEventListener('message',this.handleIframeMessage,false)
},
beforeDestroy() {// 取消监听window.removeEventListener("message", this.handleIframeMessage);
},
3、寄语
理智的做法只有在做很小的决定时才有效。
至于改变人生的事情,你必须冒险。

相关文章:
Vue集成Iframe
一、应用场景,为什么要集成Iframe? 1、庞大项目拆分后,便于管理和部署,用集成Iframe的方法合并 2、避免功能重复开发,共用模块可单独开发为一个项目,既可独立部署,也可集成到中台系统 二、集成…...
Android Studio 所有历史版本下载
一、官网链接 https://developer.android.google.cn/studio/archive 操作 二、AndroidDevTools地址 https://www.androiddevtools.cn/ 参考 https://blog.csdn.net/qq_27623455/article/details/103008937...
5.27作业
定义自己的命名空间my_sapce,在my_sapce中定义string类型的变量s1,再定义一个函数完成对字符串的逆置。 #include <iostream> #include <string.h>using namespace std; namespace my_space {string s1;void RevString(string &s1); } v…...
微服务架构下的‘黑带’安全大师:Spring Cloud Security全攻略!
深入探讨了微服务间的安全通信、安全策略设计以及面对经典安全问题的应对策略。无论你是微服务的新手还是资深开发者,都能在本文中找到提升安全功力的秘籍。让我们一起成为微服务架构下的‘黑带’安全大师! 文章目录 1. 引言微服务安全挑战与重要性Sprin…...
Py列表(list)
目录 正向索引: 反向索引: 嵌套列表: 修改列表中的值 列表常用的方法 实例 练习: 正向索引: 从0开始,依次递增。第一个元素的索引为0,第二个元素的索引为1,依此类推。 列表的下标…...
黑马es0-1实现自动补全功能
1、安装分词器 上github上找人做好的分词器,放到es-plugin数据卷里,然后重启es即可 2、自定义分词器 elasticsearch中分词器(analyzer)的组成包含三部分: character filters:在tokenizer之前对文本进行处理。例如删除字符、替换字符 …...
react通过上下文深入传递数据
通常,您将通过 props 将信息从父组件传递到子组件。但是,如果必须将道具传递到中间的许多组件,或者应用中的许多组件需要相同的信息,则传递道具可能会变得冗长且不方便。Context 允许父组件将一些信息提供给其下树中的任何组件&am…...
「代码厨房大揭秘:Python性能优化的烹饪秘籍!」
哈喽,我是阿佑,上篇咱们讲了 Socket 编程 —— 探索Python Socket编程,赋予你的网络应用隐形斗篷般的超能力!从基础到实战,构建安全的聊天室和HTTP服务器,成为网络世界的守护者。加入我们,一起揭…...
【重学C语言】十六、联合、枚举、面向对象编程
【重学C语言】十六、联合、枚举、面向对象编程 联合定义联合体使用联合体注意事项枚举枚举的定义为枚举常量指定整数值枚举的使用枚举的打印枚举的优势注意事项面向对象编程1. 结构体(Structs)2. 封装(Encapsulation)3. 继承(Inheritance)...
Github2024-05-21 Python开源项目日报 Top10
根据Github Trendings的统计,今日(2024-05-21统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目10C项目1TypeScript项目1youtube-dl - 从YouTube和其他网站下载视频的命令行程序 创建周期:4951 天开发语言:Python协议类型:The …...
labview_开放协议
一、开放协议 二、硬件设置 英格索兰硬件设置: 三、配套测试软件 四、Labview代码...
AWS安全性身份和合规性之Amazon Macie
Amazon Macie是一项数据安全和数据隐私服务,它利用机器学习(ML)和模式匹配来发现和保护敏感数据。可帮助客户发现、分类和保护其敏感数据,以及监控其数据存储库的安全性。 应用场景: 敏感数据发现 一家金融服务公司…...
redis数据类型set,zset
华子目录 Set结构图相关命令sdiff key1 [key2]sdiffstore destination key1 [key2...]sinter key1 [key2...]sinterstore destination key1 [key2...]sunion key1 [key2...]sunionstore destination key1 [key2...]smove source destination memberspop key [count]sscan key c…...
央视网视频下载和花屏问题处理
央视网(www.cctv.com)视频下载往往是花屏的,如何处理呢? 如果您是IT技术开发者,那么您可以通过下面步骤自己实现。 用chrome浏览器,F2打开开发者工具,找到当前页面的network 然后找一个接口:https://vdn.a…...
四、通信和网络安全—局域网|广域网|远程连接和攻击技术(CISSP)
目录 1.局域网和广域网 1.1 WAN技术总结 2.远程连接—无线技术 2.1 VPN 2.2 隧道协议总结...
15、设计模式之责任链模式
责任链模式 顾名思义,责任链模式(Chain of Responsibility Pattern)为请求创建了一个接收者对象的链。这种模式给予请求的类型,对请求的发送者和接收者进行解耦。这种类型的设计模式属于行为型模式。 在这种模式中,通…...
神奇动物在哪里,但导演是微软
大数据产业创新服务媒体 ——聚焦数据 改变商业 一说到计算机视觉,大多数人第一时间联想到的便是“人脸识别”、“自动驾驶“、道路检测”等跟我们日常生活息息相关的关键词。而在2024年的5月末,微软在GitHub上面上传了这样一个计算机视觉的项目&#x…...
Flutter 中的 Flow 小部件:全面指南
Flutter 中的 Flow 小部件:全面指南 Flutter 的 Flow 是一个功能强大的布局小部件,它允许开发者在父组件的任意位置放置子组件。Flow 可以通过使用 FlowDelegate 完全自定义子组件的布局,这为创建复杂的自定义布局提供了极大的灵活性。本文将…...
【pyspark速成专家】11_Spark性能调优方法2
目录 编辑 二,Spark任务UI监控 三,Spark调优案例 二,Spark任务UI监控 Spark任务启动后,可以在浏览器中输入 http://localhost:4040/ 进入到spark web UI 监控界面。 该界面中可以从多个维度以直观的方式非常细粒度地查看Spa…...
吊顶的做法防踩坑,吊顶怎么省钱还好看
怎么做个好看的吊顶?你天天抬头看不? 现在楼房到手本身层高两米75左右,等铺完地暖和瓷砖还得增加几公分 如果再整个吊顶,就属于花钱买压抑了,吊顶就是遮丑, 某些比较显层高还亮堂,今天把做法分享出来 开发商给的毛坯两米8 做完地暖铺完瓷砖,层高是两米七八, 让木工在走廊两边…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销,平衡网络负载,延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能,包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
抖音增长新引擎:品融电商,一站式全案代运营领跑者
抖音增长新引擎:品融电商,一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中,品牌如何破浪前行?自建团队成本高、效果难控;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API,查询的是单条数据,比如根据主键ID查询用户信息,sql如下: select id, name, age from user where id #{id}API默认返回的数据格式是多条的,如下: {&qu…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
如何在网页里填写 PDF 表格?
有时候,你可能希望用户能在你的网站上填写 PDF 表单。然而,这件事并不简单,因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件,但原生并不支持编辑或填写它们。更糟的是,如果你想收集表单数据ÿ…...
云原生玩法三问:构建自定义开发环境
云原生玩法三问:构建自定义开发环境 引言 临时运维一个古董项目,无文档,无环境,无交接人,俗称三无。 运行设备的环境老,本地环境版本高,ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...
Qemu arm操作系统开发环境
使用qemu虚拟arm硬件比较合适。 步骤如下: 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载,下载地址:https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...
