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

当我们需要在vue中使用其他模块或者其他地方的一些html页面功能时，我们可以使用iframe去引用html页面，实现他们的交互

首先我们可以再vue页面中使用标签引用html页面

其中src就是我们html的地址，我们可以在data中定义smghtmlpath属性，在我们的created方法中初始化，为该属性赋予初始值

如果页面加载出来了，我们就可以开始vue页面和html页面的交互了

如果我们需要vue页面调用html页面方法，我们可以使用如下代码

首先在我们的mounted方法中得到iframe对象

在vue页面使用postmessage的api向html页面发送请求数据，因为我们的vue和html页面可能不在同一域名，所以会产生跨域的问题，这里我们使用的postmessage可以实现跨域，我这里在google和ie11测试都是可以跨域的

这里的data就是我们要传递给html页面的数据

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

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

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

补充知识：vue界面使用iframe嵌套html界面的传值问题

一.从父页面给子页面传值

可以通过url进行传值，若嵌入外网例如www.baidu.com,可以设置为

<iframe name = "child" id = "child" :src="www.baidu.com#asd=1" width="1920" height="880" frameborder="0" scrolling="no" style="position:related;top: 2.8px;left: 0px;"></iframe>

asd后面跟的值可以根据需要更改，不影响地址的访问

若为本地html文件，类似的可以写作

:src="test.html#asd =1"

但是如何在子页面读取asd的值这个还没探究成功，稍后若寻找到合适的方法会再更新。这种方法比较适合比较简单的需求

二.父页面获取子页面的值

例如我们在子页面设置四个click事件，js代码如下

那么在父页面我们可以在method中定义如下函数获取到n的值

将callchild函数由某个button触发，可以看到弹出窗口

以上这篇vue 使用iframe引用html页面实现vue和html页面方法的调用操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。