背景

  项目开发的过程中,我们不可避免的会引入外部已经写好的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的传值问题

Logo

前往低代码交流专区

更多推荐