背景

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