【Vue】 在 vue 中使用 iframe 挂载 html 文件

news2024/11/24 6:10:09

文章目录

  1. 首先需要将要挂载的html文件放到public 文件夹中

在这里插入图片描述

  1. 路径的引用形式
<iframe ref="sheet" src="/luckysheet.html" width="100%" height="100%"></iframe>
  1. 通过绑定 ref 获取到 iframe,data为我需要传递的数据,通过 iframes.postMessage 的方法进行传递。
sentMsgSheet(data) {
	const sheetWindow = this.$refs.sheet.contentWindow;
	if (sheetWindow) {
		sheetWindow.postMessage(data, '*');
	}
}
sentMsgSheet([]);
  1. postMessage 通信具体用法请参考:https://blog.csdn.net/qq_45677671/article/details/128238860

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

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

相关文章

开放式蓝牙耳机有哪些值得入手的呢?2023年值得入手的开放式耳机推荐,蓝牙耳机的选购指南分享推荐

身为一个音乐爱好者&#xff0c;出于对音质和佩戴舒适的追求&#xff0c;也有入手了很多品类的耳机&#xff0c;其中不乏有有线耳机、无线蓝牙耳机&#xff0c;两种不同的音频传输方式大类&#xff0c;其各自所拥有的特性也是不同的。而居于后者的无线蓝牙耳机&#xff0c;在现…

STM32CubeMX 创建一个新工程

首先打开CubeMX软件 点击图示处 然后在这个位置输入自己开发板的型号 输入自己想要的外设型号 最后选择 工程存放路径 IDE版本 等等 点击GENERATE CODE 生成好的工程文件用Keil IDE打开 然后点击编译下载 即可

svn迁移到git实际操作

1.到svn项目目录右键选中gitbash打开窗口&#xff0c;执行获取用户并映射成git样式账号命令如下: svn log -q | awk -F | /^r/ {sub("^ ", "", $2); sub(" $", "", $2); print $2" "$2" <"$2"163.cn>…

5.postgresql--COALESCE

在 PostgreSQL 中&#xff0c; COALESCE函数返回第一个非空参数。它通常与 SELECT 语句一起使用以有效处理空值。 COALESCE函数接受无限数量的参数。它返回第一个不为空的参数。如果所有参数都为 null&#xff0c;则 COALESCE函数将返回 null。 COALESCE函数从左到右计算参数&a…

【简单搞定ubuntu18.04刷机教程】

下载ubuntu镜像 官网下载 下载刷机软件 推荐采用balenaEtcher作为系统盘制作工具&#xff0c;也可以从官网下载&#xff08;官网&#xff09;&#xff0c;就是速度有点慢。 安装步骤就是选择镜像、选择磁盘&#xff0c;开始刷机。简单。 安装 具体教程可以看官网教程 选…

Linux:squid传统代理

准备三台设备 centos7 --- http服务 --- 192.168.254.11 centos7 --- 代理服务器 --- 192.168.254.22 win10 --- 测试 --- 192.168.254.3 先测试不通过代理能否正常访问 没问题 基础配置 squid : Optimising Web Delivery (squid-cache.org) 去官网下载源码包 yum -…

CAN FD与传统CAN的差异

摘要&#xff1a; 究竟CAN FD与传统CAN的区别是什么&#xff1f;在数据传输和实时性能方面又有什么不同&#xff1f; 随着汽车电子、工业自动化的蓬勃发展&#xff0c;CAN总线上的设备数量、数据量都大大增加&#xff0c;给CAN总线带来了极大的挑战。为满足更高的带宽及数据吞…

常用API学习01(Java)

Math Math是一个帮助我们用于进行数学计算的工具类。私有化的构造方法&#xff0c;所有方法都是静态的。 Math类的常用方法&#xff1a; public static int abs(int a) 获取参数绝对值 public static double cell(double a) 向上取整 public static double floor(…

2023年武汉/广州/深圳CSPM-3中级项目管理认证招生

CSPM-3中级项目管理专业人员认证&#xff0c;面向社会开展项目管理专业人员能力的等级证书。旨在构建多层次从业人员培养培训体系&#xff0c;建立健全人才职业能力评价和激励机制的要求&#xff0c;培养我国项目管理领域复合型人才。 【证书含金量】 竞聘优先 能力证明 招投标…

勒索病毒.[tsai.shen@mailfence.com].faust、.[support2022@cock.li].faust引起的数据被加密恢复

勒索病毒的危害 勒索病毒是最具破坏性和恐怖性的一种病毒。最近[tsai.shen@mailfence.com].faust勒索病毒、.[support2022@cock.li].faust勒索病毒引起了广泛的关注和担忧。 如果您的数据已被勒索软件加密,恢复数据的最可靠方法是使用备份。如果您有备份,可以将备份文件恢复…

二、学习回归 - 基于广告费预测点击量

山外风雨三尺剑 有事提剑下山去 云中花鸟一屋书 无忧翻书圣贤来 1.设置问题 以Web广告和点击量的关系为例来学习回归。 前提&#xff1a;投入的广告费越多&#xff0c;广告的点击量就越高。 根据以往的经验数据&#xff0c;可以得到下图&#xff1a; 那么假设我要投200块的广…

2023上半年工作总结

目录 一、目标达成情况总结&#xff1a; 二、工作/学习成果总结&#xff1a; 三、下半年规划总结&#xff1a; 一、目标达成情况总结&#xff1a; 其实我并没有给自己定多少目标&#xff0c;特别上长期的目标很少制定&#xff0c;总体来说2023年上班过的很平淡&#xff0c;波…

FPGA——点亮led灯

文章目录 一、实验环境二、实验任务三、实验过程3.1 编写verliog程序3.2 引脚配置 四、仿真4.1 仿真代码4.2仿真结果 五、实验结果六、总结 一、实验环境 quartus18.1 vscode Cyclone IV开发板 二、实验任务 每间隔1S实现led灯的亮灭&#xff0c;实现流水灯的效果。 三、实…

如何实现CAN-SOME/IP通信路由测试

区别于基于UDP的车内通信路由&#xff0c;基于SOME/IP协议的路由增加了服务发现&#xff08;Service Discovery&#xff09;和服务发布&#xff08;Service Publish&#xff09;&#xff0c;那对于测试工程师来说&#xff0c;怎么实现CAN-SOME/IP路由的测试呢&#xff1f; 01 …

开放式耳机的类型有哪些?开放式耳机有什么优点?本文章为你讲解

伴随着开放式耳机越来越受大家欢迎&#xff0c;很多人还不知道开放式耳机是什么&#xff0c;有哪些好用的&#xff0c;有哪些优点&#xff0c;就直接入手了&#xff0c;结果踩雷了&#xff01;面对这些常见问题&#xff0c;我来跟大家一一讲解开放式耳机热门问题。 1.开放式耳…

【C#】并行编程实战:同步原语(3)

在第4章中讨论了并行编程的潜在问题&#xff0c;其中之一就是同步开销。当将工作分解为多个工作项并由任务处理时&#xff0c;就需要同步每个线程的结果。线程局部存储和分区局部存储&#xff0c;某种程度上可以解决同步问题。但是&#xff0c;当数据共享时&#xff0c;就需要用…

浅谈企业能源管理系统在水泥企业的设计与应用

安科瑞 华楠 摘要: 水泥企业是我国高能耗行业之一&#xff0c;一直是政府推进节能减排工作的控制对象。建立企业能源管理系统&#xff0c;实现从能源因素采集、过程监控、能耗管理控制全过程的自动化、科学化管理。加大能源的合理化使用&#xff0c;减少能源消耗&#xff0c;对…

UE初级-C++基础-1.类库简介及目录结构

原文链接&#xff1a;UE5 C教程&#xff08;一、基本结构&#xff09;_skycol的博客-CSDN博客 原文链接&#xff1a;UE4C学习篇&#xff08;一&#xff09;_卡西莫多说的博客-CSDN博客 一.类库简介 虚幻API由三部分组成&#xff0c;分别是Runtime, Developer utilitiew&#…

门票售罄+酒店满房+营收创新高 原拓·非遗嘉年华战报来袭

7月2日&#xff0c;原拓非遗文化嘉年华首站在北京圆满落幕。作为原拓酒店创立的品牌活动IP&#xff0c;原拓非遗文化嘉年华携手非遗传承人、艺术创作者、文创品牌等志同道合的伙伴&#xff0c;在酒店空间呈现丰富体验&#xff0c;通过 DIY 工作坊、创意市集等方式&#xff0c;让…

【机器人模拟-02】 模拟移动机器人设置里程计

一、说明 在本教程中,我将向您展示如何设置移动机器人的测程。本教程是“机器人模拟”指南中的第二个教程。测量位移是仿真中的重要内容,设置测程的官方教程在此页面上,但我将逐步引导您完成整个过程。 您可以在此处获取此项目的完整代码。让我们开始吧! 二、ROS 2 中的里程…