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

文章目录

  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.hqwc.cn/news/23249.html

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

相关文章

【设计模式】23种设计模式——单例模式(原理讲解+应用场景介绍+案例介绍+Java代码实现)

单例模式(Singleton) 介绍 所谓类的单例设计模式&#xff0c;就是采取一定的方法&#xff0c;保证在整个的软件系统中&#xff0c;对某个类只能存在一个对象实例&#xff0c;并且该类只提供一个取得其对象实例的方法&#xff08;静态方法&#xff09;。比如Hibernate的Sessio…

Mysql数据库之存储引擎

目录 一、存储引擎概念 二、MyISAM存储引擎 1.特点详解 2.适用生产环境 三、InnoDB存储引擎 1.特点详解 2.适用生产环境 四、数据库存储引擎操作 1.查看数据库支持的存储引擎 2.查看数据库存储引擎 3.修改数据库表的存储引擎 五、行锁和表锁 1.InnoDB使用行锁和表…

人工智能-神经网络

目录 1 神经元 2 MP模型 3 激活函数 3.1 激活函数 3.2 激活函数作用 3.3 激活函数有多种 4、神经网络模型 5、神经网络应用 6、存在的问题及解决方案 6.1 存在问题 6.2 解决方案-反向传播 1 神经元 神经元是主要由树突、轴突、突出组成&#xff0c;树突是从上面接收很多…

layui入门增删改查

layui入门增删改查 创建Lauiyi对象1.后台准备1.dao方法2.子实现类 2.R工具类的使用3.查询前端代码实现前端页面 4.增删改实现2.浮层3分离的js代码1.userManage.js2.userEdit.js3.index.js 5.运行效果 作为一名开发人员&#xff0c;我们经常需要对数据库中的数据进行增删改查&am…

opencv-07-感兴趣区域(ROI)

在图像处理过程中&#xff0c;我们可能会对图像的某一个特定区域感兴趣&#xff0c;该区域被称为感兴趣区 域&#xff08;Region of Interest&#xff0c;ROI&#xff09;。在设定感兴趣区域 ROI 后&#xff0c;就可以对该区域进行整体操作。 以下是一些 OpenCV ROI应用场景 …

将Xvfb和Chrome封装到Docker镜像中并执行java程序

docker pull ubuntu:22.04docker run -itd --net host -v /home/:/home ubuntu:22.04 进入容器 docker exec -it 8203e24ed bash apt-get update apt-get install xvfb apt-get install chromium-browser apt install chromium-chromedriver apt install openjdk-11-jdk …

Java Stream流详解

本文目录 学习目标中间操作 Filter(过滤)Map(转换)Sorted(排序)Distinct(去重)Limit(限制)Skip(跳过)Peek(展示)终止操作 forEach(循环)Collect(收集)Count(计数)Reduce(聚合)AnyMatch(任意匹配)AllMatch(全部匹配)NoneMatch(无匹配)使用Stream流的优缺点&#xff1a; 优点&am…

elementUI表格勾选框判断选择相同的内容才能进行后续逻辑处理;否则拦截提示

需求是&#xff1a; 可多选需满足条件&#xff1a;同一个年级、同一个分数&#xff1b; 不满足条件给出提示&#xff1a;请选择同一个年级 、分数的学生 1、先对勾选数据进行赋值 /** 表格复选框勾选 */handleSelectionChange(val) {console.log(val)this.tableSelectArr va…

《Python机器学习:基于PyTorch和Scikit-Learn》——小解送书第五期

目录 书籍介绍 内容简介 作者简介 参与抽奖 书籍介绍 近年来&#xff0c;机器学习方法凭借其理解海量数据和自主决策的能力&#xff0c;已在医疗保健、 机器人、生物学、物理学、大众消费和互联网服务等行业得到了广泛的应用。自从AlexNet模型在2012年ImageNet大赛被提出以来…

el-checkbox和el-switch绑定一个Number值

因为我们对状态这种字段&#xff0c;后端一般返回的是Number值。0为正常&#xff0c;1为停用。 el-switch&#xff0c;el-checkbox这种控件呢&#xff0c;一般是绑定布尔值的。原来我的做法是使用value和change事件来做转换&#xff0c;而不是v-model。但是后来发现&#xff0c…

Word2Vec实现文本识别分类

深度学习训练营之使用Word2Vec实现文本识别分类 原文链接环境介绍前言前置工作设置GPU数据查看构建数据迭代器 Word2Vec的调用生成数据批次和迭代器模型训练初始化拆分数据集并进行训练 预测 原文链接 &#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&…

零代码编程:用ChatGPT批量识别图片PDF中的文字

有些PDF页面是图片格式&#xff0c;要怎么批量把图片中的文字识别出来&#xff1f;借助ChatGPT可以轻松完成这个任务。 首先要安装一些相关的软件和Python库。 安装tesseract-ocr&#xff08;OCR&#xff09;软件&#xff0c;最新版的是tesseract-ocr-w64-setup-v5.3.0.20221…