iframe嵌入vue组件,vue组件间的参数传递
本文主要介绍了vue组件和iframe页面的相互交叉引用及其解决方法，具有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
vue组件和iframe页面相互引用。vue组件调用iframe页面方法和参数。iframe页面将嵌入式iframe页面引用到Vue组件并传输值。
vue组件和iframe页面相互传参
目前网上关于iframe父子的博客大多都在描述父页面是html文件，子iframe文件也是html文件。大部分涉及父页面是vue组件，子iframe页面是html的博客不太理解；
最近在项目中遇到这个需求：在vue组件中嵌入iframe页面，并实现父子传参；。
vue组件调用iframe页面方法和参数
下面是在 vue组件中（父组件） 一个通过点击按钮触发的方法：
sentToIframe() {
let child frame obj=document . getelementbyid( unity frame )；
console.log(childFrameObj ，childFrameObj)；
//childframeobj . content window . getmessagefromparant(this . tdata)；//向子iframe传递参数的第一种方式是调用iFrame的方法，达到传递参数的目的。
这个。$ refs . unity . content window . getmessagefromparant(this . tdata)；//这也是可以调用子iframe的方法。
//child frame obj . content window . frame data=这是vue组件给你的参数！//参数传递成功。
这个。$ refs . unity . content window . frame data=
这是vue组件给你的第二个参数！//参数传递成功。
Console.log(“发送完成”)；
//此外，还可以通过DOM操作来操作子iframe的DOM。
var t=文档。getElementById( unity frame )
. content window . document . getelementbyid( DD )；
console . log(t)；
//
console.log(frameData？unity frame . window . frame data)；//可以使用id调用到iframe中的变量
//console.log(frameData？这个。$ refs . unity . window . frame data)//iframe中的变量不能被ref调用。
},
组件iframe页面有一个调用的方法和变量：
Var frameData=不要给我打电话！//这个变量用来测试vue组件是否可以调用这个变量。
函数getmessagefromparant(value){
//接受从vue组件传递的参数
Console.log(`我收到了来自父级的参数：$ {value } `)
}
单击该按钮的结果是：
iframe页面向vue组件传参
在vue组件中，iframe页面有一个调用方法：
getFromIframe(值){
Console.log(`我是iframe传递的参数：$ { value } `)；
Console.log(我被iframe调用了！);
console . log(this . vuedata)；
Console.log(`改变前是：你是否能改变我；更改后为：$ { this . is change me } `)；
}
iframe调用vue组件方法的代码：
函数对象(对象){
//Obj由按钮点击触发。
console.log(父)
//调用vue组件方法
Parent.getFromIframe(我的名字是Iframe )
//向vue组件发送参数，改变vue组件的参数
Parent.isChangeMe=您已被我的iframe更改
}
但是 ！！！！！！！！！！！！！！！
这样做是不够的，将会报告如下错误：
个人猜想：问题原因是iframe的父级不是vue实例！
目前，只找到了一种方法来解决这个问题：
就是把这两句话加到创建的钩子上，
已创建(){
window . getfromiframe=this . getfromiframe；//将vue实例中的方法引用到窗口对象
},
在vue实例的调用方法中添加对vue中变量的更改。
getFromIframe(值){
Console.log(`我是iframe传递的参数：$ { value } `)；
Console.log(我被iframe调用了！);
console . log(this . vuedata)；
this . is change me=window . is change me；//将窗口变量赋给vue实例变量；允许在iframe中更改vue实例中的变量。
Console.log(`改变前是：你是否能改变我；更改后为：$ { this . is change me } `)；
}
最终运行结果是：
bingo！！！！！问题已暂时解决。
总结一下：vue组件和iframe的嵌入比较麻烦，还没有找到正统的方法；另外，还有很多坑我还没踩过。如果有这方面的问题和其他解决方法，我会继续更新！
内嵌iframe页面并进行传值
需要在一个没有保密性的通用系统中作为一个菜单登录两个独立的系统。由于时间和跨域、不同令牌等问题，使用了嵌入式iframe。因为不同的域名进入子系统，所以它们必须存储在本地(获得的用户信息和令牌被传输到iframe子系统)。
模板
你好
差异
iframe src=http://
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。