当我们须要在vue中使用其他模块或则其他地方的一些html页面功能时，我们可以使用iframe去引用html页面，实现她们的交互
首先我们可以再vue页面中使用标签引用html页面
其中src就是我们html的地址，我们可以在data中定义smgHtmlPath属性，在我们的created方式中初始化，为该属性赋于初始值
如果页面加载下来了，我们就可以开始vue页面和html页面的交互了
如果我们须要vue页面调用html页面方式，我们可以使用如下代码
mounted() {
this.iframeWin = this.$refs.iframeDom.contentWindow;
},
首先在我们的mounted方式中得到iframe对象
在vue页面使用postMessage的API向html页面发送恳求数据，因为我们的vue和html页面可能不在同一域名，所以会形成跨域的问题，这里我们使用的postMessage可以实现跨域，我这儿在google和IE11测试都是可以跨域的
loadSmgxmlModels(data) {
this.iframeWin.postMessage(data,"*")
}
这里的data就是我们要传递给html页面的数据
“*”,这里代表的是所有地址可以接收到，我们也可以指定地址，例如：
在html页面的标签中编撰窃听方式，用来窃听我们的恳求，获取数据
window.addEventListener('message', function(ev) {
// 当我们是父子窗口进行消息传递时，可以使用此判断，只接受父窗口传递来的消息,
if (ev.source !== window.parent) return;
var data = ev.data;
console.log("vue传递的数据为："+data);
//下面可以调用我们html页面js中的方法，使用传递的数据进行操作了
}, false);
这里我们窃听的就是message，可以获取数据。
补充知识：Vue界面使用iframe嵌套html界面的传值问题
一.从父页面给子页面传值
可以通过url进行传值，若嵌入内网诸如,可以设置为
asd旁边跟的值可以按照须要修改，不影响地址的访问
若为本地html文件，类似的可以写作
:src="test.html#asd =1"
但是怎样在子页面读取asd的值这个还没探究成功，稍后若寻觅到合适的方式会再更新。这种方式比较适宜比较简单的需求
二.父页面获取子页面的值
例如我们在子页面设置四个click事件，JS代码如下
那么在父页面我们可以在method中定义如下函数获取到n的值
callchild(){
let obj1=window.frames["child"];//获得对应iframe的window对象
alert(obj1.n);
},
将callchild函数由某个button触发，可以看见弹出窗口
以上这篇Vue 使用iframe引用html页面实现vue和html页面方式的调用操作就是小编分享给你们的全部内容了，希望能给你们一个参考，也希望你们多多支持脚本之家。
