vue3中使用iframe不成功的问题

news/2024/9/28 21:16:59/

再做大屏的时候,引用了一个html的页面,但是vue3编码,所以需要用到iframe,但是一直报错,故将解决方法做一个备份:

<template><div class="screen-bg"><iframe src="/static/index.html" style="width: 100%; height: 100%;z-index: 1;position: fixed; top:0;left: 0;"  ref="iframeDom"></iframe>
</div>
</template>

在public下面增加一个static的文件夹,在文件夹中放index.html,也就是你想要引用的html页面,在iframe的时候不需要public,直接引用/static/index.html即可,同时给宽高


http://www.ppmy.cn/news/1531623.html

相关文章

Linux集群部署RabbitMQ

目录 一、准备三台虚拟机&#xff0c;配置相同 1、所有主机都需要hosts文件解析 2、所有主机安装erLang和rabbitmq 3、修改配置文件 4、导入rabbitmq 的管理界面 5、查看节点状态 6、设置erlang运行节点 7、rabitmq2和rabbitmq3重启服务 8、查看各个节点状态 二、添加…

ProgrammerAI—AI辅助编程学习指南

前言 随着AIGC&#xff08;AI生成内容&#xff09;技术的快速发展&#xff0c;诸如ChatGPT、MidJourney和Claude等大语言模型相继涌现&#xff0c;AI辅助编程工具正逐步改变程序员的工作方式。这些工具不仅可以加速代码编写、调试和优化过程&#xff0c;还能帮助解决复杂的编程…

教授(优青)团队一站式指导:专业实验设计、数据分析、SCI论文辅助。基因表达分析、转录因子、组蛋白、染色质、DNA等高通量检测及基因功能分析

可高通量检测组蛋白不同修饰在基因组上的位点; 可用于模式物种和非模式物种的研究&#xff0c;无需特异性抗体; 完整的DAP-seq解决方案。 DAP-seq可高通量检测转录因子或DNA结合蛋白在基因组上的结合位点; 可用于模式物种和非模式物种的研究&#xff0c;无需特异性抗体; 完整的…

Acwing 约数

1.试除法 思路分析&#xff1a;利用试除法求一个数的所有约数&#xff0c;思路和判断和求质数的判定类似 一个数N有一个约数d&#xff0c;那么N/d也必然是其约数 约数都是成对出现的&#xff0c;只需要枚举1到 n \sqrt{n} n ​即可&#xff0c;注意不要让一个约数加入两次! …

Go版数据结构 -【1.1 数据结构的分类与基本概念】

1.1 数据结构的分类与基本概念 本节我们将对数据结构的基本概念以及分类进行讲解&#xff0c;数据结构有很多种&#xff0c;但是主要也就是集中于几种类型&#xff0c;本节我们将进行逐一讲解。 什么是数据结构&#xff1f; 按照标准说法&#xff0c;数据结构指的是在计算机…

4 html5 web components原生组件详细教程

web components 前面我们已经介绍过,这一期我们就来讲一讲具体用法和这其中的关键只是点: 1 基本使用 如果我们想实现一个封装的原生组件,那就离不开使用js去封装,这里主要就是基于HTMLElement这个类,去创建创建一个子类,然后使用customElements.define去页面中注册这个…

xlsx库插件读取excel文件

input读取xlsx文件内容 效果代码 前端用input读取 .xlsx文件的内容 xlsx库参考连接 项目中我用的ant-design-vue&#xff0c;不过用input一样的大同小异 注意区分xlsx库和node-xlsx库的使用环境 效果 代码 <!--* Descripttion: * Author: 苍狼一啸八荒惊* Date: 2024-08-…

网页爬虫法律与道德:探索法律边界与道德规范

目录 引言 一、网络爬虫技术概述 1.1 定义与功能 1.2 技术原理 1.3 案例分析 二、网络爬虫的法律边界 2.1 合法性要求 2.2 刑事风险 2.3 案例分析 三、网络爬虫的道德规范 3.1 尊重版权和隐私 3.2 合理使用爬虫技术 3.3 透明度和社会责任 四、技术挑战与应对策略…