【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.mzph.cn/news/1151.shtml

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

相关文章

Vscode自定义注释模板

首先安装插件Doxygen Documentation Generator&#xff0c;安装完成之后点击Doxygen插件的设置&#xff0c;按照下面的步骤打开settings.json进行编辑&#xff1a; 在settings.json中追加如下代码&#xff1a; "doxdocgen.file.copyrightTag": ["Copyright (C),…

Python一行命令搭建HTTP服务器并外网访问+-+内网穿透

文章目录 1.前言2.本地http服务器搭建2.1.Python的安装和设置2.2.Python服务器设置和测试 3.cpolar的安装和注册3.1 Cpolar云端设置3.2 Cpolar本地设置 4.公网访问测试5.结语 转载自远程内网穿透的文章&#xff1a;【Python】快速简单搭建HTTP服务器并公网访问「cpolar内网穿透…

select 语法和 select 死锁问题

select 语法和 select 死锁问题 引言 本文介绍了 Go 语言中的 select 语法以及与之相关的 select 死锁问题。我们将详细讨论 select 语句的语法&#xff0c;解答常见的疑问&#xff0c;并提供示例代码进行说明。 select 语法 select 用于处理多个通道操作&#xff0c;实现非…

FlinkCDC第四部分-同步mysql到mysql,ctrl就完事~(flink版本1.17.1)

本文介绍了不同源单表-单表同步&#xff0c;不同源多表-单表同步。 注&#xff1a;此版本支持火焰图 Flink版本&#xff1a;1.17.1 环境&#xff1a;Linux CentOS 7.0、jdk1.8 基础文件&#xff1a; flink-1.17.1-bin-scala_2.12.tgz、 flink-connector-jdbc-3.0.0-1.16.…

人工智能与Chat GPT

一本书全面掌握ChatGPT&#xff0c;既有向ChatGPT提问的技巧&#xff0c; 也有构建自己的ChatGPT模型的方法&#xff0c;涵盖开发背景、关联技术、使用方法、应用形式、实用案例等 人工智能是我们这个时代最热门的话题&#xff0c;人们既希望它能代替我们做一些工作&#xff0c…

云原生——Docker容器化实战

❄️作者介绍&#xff1a;奇妙的大歪❄️ &#x1f380;个人名言&#xff1a;但行前路&#xff0c;不负韶华&#xff01;&#x1f380; &#x1f43d;个人简介&#xff1a;云计算网络运维专业人员&#x1f43d; 前言 "Docker"一词指代了多个概念&#xff0c;包括开源…

uniapp调接口出现跨域问题。

今天在写uniapp项目的时候&#xff0c;使用在线模拟接口的时候&#xff0c;出现跨域问题。 【问题描述】&#xff1a; ①在内嵌浏览器运行&#xff0c;不会出现跨域问题&#xff0c;好像是内嵌浏览器自动去掉了跨域问题。 ②在外部浏览器调用的时候会出现跨域问题。&#xf…

IDEA 搭建Android 开发环境

项目实战 废话不多说开始创建先第一个 Android 项目 步骤一 FILE → New → Project 步骤二-选择 Android 项目模板 选那个安卓机器人,如果没有这个选项,需要升级IDEA版本或者安装安卓插件 选择*Basic Activity* Next-下一步 步骤三-项目初始化 名称、包名、安装位置自行调整…

Cadence PCB 仿真激励专题

&#x1f3e1;《总目录》   &#x1f3e1;《宝典目录》 目录 1&#xff0c;内容概述2&#xff0c;内容目录 1&#xff0c;内容概述 本专题详细介绍Cadence PCB仿真的激励源。 2&#xff0c;内容目录 Cadence PCB仿真 使用 Allegro PCB SI 激励信号源参数Simulation配置方法图…

3DE重客户端安装

3DE重客户端安装 一、百度网盘下载路径二、详细安装步骤 一、百度网盘下载路径 https://pan.baidu.com/s/16TltMRbrWuSe7p-Vn1x4Dw?pwdfku7 提取码&#xff1a;fku7 二、详细安装步骤 1、将\3deinstall\2022x_install_GA目录下的所有.tar文件全选解压 2.点击\3deinstall\…

ubuntu 20.04, 22.04网络配置比较

1.ubuntu 20.04网络配置&#xff0c;配置静态IP&#xff1a;切换roote用户&#xff0c;vi /etc/netplan/00-installer-config.yaml&#xff0c;修改网络配置&#xff0c;格式如下&#xff1a; network: ethernets: ens33: dhcp4: false addresses: [172.22.…

切换.net Framework 版本后,出现NuGet 包是使用不同于当前目标框架的目标框架安装的,可能需要重新安装

问题现象&#xff1a; 由于添加新的dll文件&#xff0c;依赖的.NET Framework版本与当前的不一致&#xff0c;在vs 中切换了目标框架版本后&#xff0c;运行程序&#xff0c;出现以下的warnning信息&#xff1a; 一些 NuGet 包是使用不同于当前目标框架的目标框架安装的&#…

《代码中的软件工程》学习总结/心得体会

《代码中的软件工程》阅读总结回顾 参考资料《代码中的软件工程》https://gitee.com/mengning997/se 终于系统性的阅读完了这本《代码中的软件工程》&#xff0c;受益匪浅。我本科时也上过软件工程这门课程&#xff0c;但是学到的东西诚然是没有在这本书中学到的多的&#xf…

APSIM模型的参数优化

随着数字农业和智慧农业的发展&#xff0c;基于过程的农业生产系统模型在模拟作物对气候变化的响应与适应、农田管理优化、作物品种和株型筛选、农田固碳和温室气体排放等领域扮演着越来越重要的作用。 APSIM (Agricultural Production Systems sIMulator)模型[1]是世界知名的…

C++STL:无序关联容器

文章目录 1. 无序关联容器1.1 概述1.2 无序容器种类 2. unordered_map2.1 概述2.2 成员方法2.3 创建C unordered_map容器的方法2.4 迭代器2.5 C STL unordered_map获取元素的几种方法2.6 C unordered_map insert()方法2.7 C unordered_map emplace()和emplace_hint()方法2.7.1 …

【稳定性验证】视频流mesh环境下稳定性验证

目录 正常保持上线状态 延时丢包 丢包&#xff08;很稳&#xff09; 延时 丢包 乱序 &#xff08;也很稳&#xff09; webGL lost 正常保持上线状态 延时丢包 丢包&#xff08;很稳&#xff09; 延时 丢包 乱序 &#xff08;也很稳&#xff09; webGL lost

Flink SQL之常用函数

官方函数查询地址&#xff1a;https://nightlies.apache.org/flink/flink-docs-release-1.12/dev/table/functions/systemFunctions.html 可根据使用的版本查找&#xff0c;该链接为1.12版本。 1.比较函数 <> > > < < 注意&#xff1a;select nullnull…

手写Spring框架---MVC实现

目录 预备 自研框架MVC的实现 MVC架构草图&#xff1a; 大致流程 实现思路 自定义注解 JavaBean 请求的拦截-建立DispatcherServlet 责任链处理请求 RequestProcessor矩阵 Render矩阵 预备 在DispatcherServlet&#xff1a; 解析请求路径和请求方法依赖容器&#xf…

PostgreSQL 笔记

PostgreSQL 笔记 一、简介 这里主要是记录学习 PostgreSQL 常用操作命令&#xff0c;方便今后查阅&#xff01;&#xff01;&#xff01; PostgreSQL 是一个免费的对象-关系数据库服务器(ORDBMS)&#xff0c;在灵活的BSD许可证下发行。 PostgreSQL 开发者把它念作 post-gress…

水库大坝安全监测系统是由什么组成的?

水库大坝是防洪抗灾的重要设施&#xff0c;它们的安全性直接关系到人民群众的生命财产安全。因此&#xff0c;水库大坝的安全监测必不可少。水库大坝安全监测系统是一种集成了数据采集、传输、处理和分析的技术平台&#xff0c;能够实时、准确地监测大坝的状态&#xff0c;及时…