背景
项目开发的过程中，我们不可避免的会引入外部已经写好的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标签。
扫描二维码关注公众号，回复：
8767711 查看本文章
参考文章
