vue页面嵌套iframe vue页面,vue获取iframe中的元素
本文主要介绍vue使用iframe引用html页面实现Vue和html页面方法的调用操作，具有很好的参考价值。希望对大家有帮助。来和边肖一起看看吧。
当我们需要使用vue中其他模块或者其他地方的一些html页面功能时，可以使用iframe来引用html页面，实现它们的交互。
首先，我们可以用标签来指代vue页面中的html页面。
模板
差异
内联框架
name=iframeMap
id=iframeMapViewComponent
宽度=100%
高度= 470像素
v-bind:src=smgHtmlPath
frameborder=0
滚动=否
ref=iframeDom
/iframe
/div
/模板
其中src是我们的html的地址。我们可以在数据中定义smgHtmlPath属性，在我们创建的方法中初始化它，并给该属性一个初始值。
如果加载了页面，我们就可以开始vue页面和html页面的交互了。
如果我们需要vue page来调用html page方法，我们可以使用下面的代码
已安装(){
this.iframeWin=this。$ refs . iframedom . content window；
},
首先，在mounted方法中获取iframe对象。
在vue页面上使用postMessage API向html页面发送请求数据，因为我们的vue和html页面可能不在同一个域名下，会造成跨域问题。我们这里用的postMessage是可以实现跨域的，我在google和IE11这里的测试都是跨域的。
loadSmgxmlModels(数据){
this.iframeWin.postMessage(数据， * )
}
这里的数据是我们想要传递给html页面的数据。
这里的“*”表示可以接收所有地址，我们也可以指定地址，比如www.baidu.com。
在html页面的标签中编写监控方法来监控我们的请求并获取数据。
window . addevent listener( message ，function(ev) {
//当我们是父子窗口进行消息传递的时候，可以用这个判断，只接受父窗口传递的消息，
if (ev.source！==window.parent)返回；
var data=ev.data
console . log( vue data by vue is: data)；
//接下来可以调用我们html页面js中的方法，使用传递过来的数据进行操作。
}，假)；
我们这里监控的是message，可以获取数据。
补充知识：Vue界面使用iframe嵌套html界面的传值问题
一.从父页面给子页面传值
该值可以通过url传递，如果它嵌入在外部网络(如www.baidu.com)中，则可以设置为
iframe name= child id= child :src= www . Baidu . com # ASD=1 width= 1920 height= 880 frame border= 0 scrolling= no style= position:related；top:2.8 px；left:0px；/iframe
asd后面的值可以根据需要更改，而不会影响地址的访问。
如果是本地html文件，可以写类似的东西。
:src=test.html#asd=1
但是如何读取子页面中asd的值还没有探索成功，以后找到合适的方法再更新。这种方法更适合较简单的需求。
二.父页面获取子页面的值
例如，我们在子页面上设置了四个点击事件，JS代码如下
脚本
var n=0；
函数FN()
{
n=1；
alert( hello 1 n)；
}
函数EN()
{
n=2；
alert( hello 1 n)；
}
函数ER()
{
n=3；
alert( hello 1 n)；
}
函数GN()
{
n=4；
alert( hello 1 n)；
}
/脚本
然后在父页面中，我们可以在方法中定义下面的函数来获取n的值。
callchild(){
let obj 1=window . frames[ child ]；//获取对应iframe的窗口对象
alert(obj 1 . n)；
},
通过一个按钮触发callchild函数，可以看到弹出窗口。
以上vue使用iframe引用html页面实现Vue和html页面方法的调用操作，这是边肖分享的全部内容。希望能给你一个参考，多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。