Vue中使用iframe引用html页面实现vue和html页面方法的调用

当我们需要在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页面的数据

“*”,这里代表的是所有地址可以接收到，我们也可以指定地址，例如：www.baidu.com

在html页面的标签中编写监听方法，用来监听我们的请求，获取数据

window.addEventListener('message', function(ev) {
    // 当我们是父子窗口进行消息传递时，可以使用此判断，只接受父窗口传递来的消息,
    if (ev.source !== window.parent) return;
    var data = ev.data;
	console.log("vue传递的数据为："+data);
  	//下面可以调用我们html页面js中的方法，使用传递的数据进行操作了
}, false);

这里我们监听的就是message，可以获取数据。