Vue使用iframe嵌入外部HTML文件

以你之姓@ 2023-06-30 15:53 22阅读 0赞

# 背景 #

项目开发的过程中，我们不可避免的会引入外部已经写好的HTML文件，那在不同的Vue脚手架中如何成功引入HTML文件呢？如何获取到HTML文件中的值呢？

# 不同脚手架的不同引入方式 #

##   脚手架2 ##

把要引入的文件（假设是aaa.html文件）放到static目录下，在Vue界面中引入：

<iframe src="./static/aaa.html"></iframe>

##   脚手架3和4 ##

把要引入的文件放到public目录下，在Vue界面中引入：

<iframe src="/aaa.html"></iframe>

注意：在脚手架2中，src的地址就是HTML文件相对于Vue文件的相对地址；在脚手架3和4中，直接写/+文件名即可。另外，还可以给iframe设置宽度和高度等一些属性，例如：

<iframe src="/aaa.html" width="100%" height="800px" frameborder="0" scrolling="auto">

# Vue文件获取HTML文件中的值 #

##   方式一：Vue文件自己获取 ##

修改iframe的引入：

<iframe src="/aaa.html" id="mainIframe" ref="mainIframe" name="mainIframe"></iframe>

Vue界面中，单击按钮可打印：

var th = document.getElementById('iframeId').contentWindow.document.getElementsByName('th')
    console.log(th)

这样，可以得到HTML文件中所有的th标签。

##   方式二：Vue文件读HTML中的值 ##

修改iframe的引入：

<iframe src="/aaa.html" id="mainIframe" ref="mainIframe" name="mainIframe"></iframe>

在HTML中的script标签中添加代码：

var th = document.querySelectorAll('th')

Vue界面中，单击按钮：

const obj1 = window.frames['mainIframe'] // 获得对应iframe的window对象
    console.log(obj1.th)

这样，也可以得到HTML文件中所有的th标签。

# 参考文章 #

[vue项目iframe的传值问题][vue_iframe]

[vue_iframe]: https://www.bbsmax.com/A/gVdn7kB7zW/

发表评论取消回复

表情：

评论列表（有 0 条评论，22人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue使用iframe嵌入外部HTML文件

背景项目开发的过程中，我们不可避免的会引入外部已经写好的HTML文件，那在不同的Vue脚手架中如何成功引入HTML文件呢？如何获取到HTML文件中的值呢？不同

以你之姓@/ 2023年06月30日 15:53/ 0 赞/ 23 阅读

相关利用iframe嵌入html页面（实用, 赞）

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L

Dear 丶/ 2023年06月30日 02:25/ 0 赞/ 19 阅读

相关 vue中嵌入原生iframe并传递参数

父传子 // 父页面main.html传递参数 <template> <div> <iframe :src="frameUrl"

ゞ浴缸里的玫瑰/ 2023年02月21日 04:49/ 0 赞/ 3 阅读

相关 vue2.0 + element-ui +iframe在页面中嵌入外部网站

![913e102c04da635c204a60485cc03cd8.png][] 自从用饿了么框架重构项目以来，遇到很多问题，我都有一一记录下来，现在特喜欢这个框架，说实

╰+哭是因爲堅強的太久メ/ 2022年12月26日 11:20/ 0 赞/ 179 阅读

相关 HTML页面通过iframe嵌套Vue项目

之前都是在Vue项目中通过iframe嵌套外部写好的HTML页，但是最近接触了一个需求，是需要在HTML页面中嵌入Vue项目。 Vue项目打包完成之后会形成一个包含所有静态资

小咪咪/ 2022年12月23日 06:17/ 0 赞/ 248 阅读

相关 html中嵌入iframe进行父子页面参数传递

实现的主要原理是： 1.父页面调用子页面函数，选择iframe的id + contentWindow +子页面的函数名（\[参数列表\]） 2.子页面调用父页面函数，win

àì夳堔傛蜴生んèń/ 2022年05月18日 04:46/ 0 赞/ 662 阅读

相关（八）vue使用iframe嵌入网页

1、列表页面： this.$router.push({ name: 'userTemplate', params: { reportUrl: reportUrl, r

小咪咪/ 2022年04月16日 01:38/ 0 赞/ 930 阅读

相关 ionic3使用iframe引用外部网站

1，在configxml文件中添加 <access origin="\" /> <allow-intent href="\" /> <al

àì夳堔傛蜴生んèń/ 2022年04月08日 17:12/ 0 赞/ 158 阅读

相关 vue页面中嵌入iframe外源地址页面监听iframe 中事件

1.需求 vue中需要嵌入iframe 地址是第三方的当iframeh中页面点击的时候.vue需要监控到这个事件将本页面关闭.代码中 js 发送和接收方法 //

末蓝、/ 2021年08月26日 23:35/ 1 赞/ 2978 阅读

相关 react组件中通过iframe嵌入html页面

最近在一个web前端开发的项目中，遇到了这样一个需求：项目本身使用react搭建，用antd来完成各种组件的展示，有一个需求，是要将另外一个项目中的部分页面功能加进来，另外的一

系统管理员/ 2021年05月12日 11:50/ 0 赞/ 1310 阅读