【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内网穿透…

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-下一步 步骤三-项目初始化 名称、包名、安装位置自行调整…

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 包是使用不同于当前目标框架的目标框架安装的&#…

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

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

手写Spring框架---MVC实现

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

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

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

一.《某三国》人物属性及其相关属性

人物属性 1.找一个可以操控变化的属性来找 比如血量.坐标或者五铢(绑定金币),这里我们用五铢找 五铢只要打一个怪就会加一点 2.我们直接搜变化即可搜到 五铢地址0AD64EAC 3.我们CE给地址下访问 4.这里我们最后找第一条访问 因为他是被改变的 或者你CE给地址下写入 5.然后我…

使用docker-file 将springboot项目打成镜像,发布成容器服务

一 docker-file将jar包发布成容器服务 1.1 docker的安装 [rootlocalhost ~]# uname -r 3.10.0-862.el7.x86_64 [rootlocalhost ~]# yum install docker [rootlocalhost export]# systemctl start docker [rootlocalhost export]# docker -v Docker version 1.13.1, build…

学习react,复制一个civitai(C站)-更新3

更新内容 优化了一下加载速度 图片列表 初步更新了199张图片&#xff0c;大部分都有stable diffusion 的prompts。 可以直接复制到AI绘画里面使用。 先来看看效果图吧&#xff1a; 我还是挺喜欢这种砌砖流布局 技术点 同样使用了砌墙瀑布流布局:masonry js 安装方法 npm …

ios 启动页storyboard 使用记录

本文简单记录ios启动页storyboard 如何使用和注意事项。 xcode窗口简介 以xcode14为例&#xff0c;新建项目如下图&#xff0c;左边文件栏中的LaunchScreen.storyboard 为默认启动页布局。窗口中间部分是storyboard中的组件列表&#xff0c;右侧为预览&#xff0c;可以看到渲…

摩尔投票算法(Moore‘s Voting Algorithm)及例题

摩尔投票算法&#xff08;Moores Voting Algorithm&#xff09;及例题 摩尔投票算法简介摩尔投票算法算法思想摩尔投票算法经典题目169. 多数元素229. 多数元素 II6927. 合法分割的最小下标 上午打力扣第 354 场周赛最后十五分钟用摩尔投票算法直接秒了第三题。 摩尔投票算法简…

【图像处理】基于双目视觉的物体体积测量算法研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

【QT/OpenCV】QT实现张正友相机标定

相机标定 01、相机标定02、OpenCV函数及其张正友标定法2.1、相机标定步骤2.2、相机标定相关函数2.2.1 提取角点--- findChessboardCorners2.2.2 亚像素角点提取1--- find4QuadCornerSubpix2.2.3 亚像素角点提取2--- cornerSubPix2.2.4 绘制内角点 --- drawChessboardCorners2.2…