vue中内嵌iframe页面并进行传值
需求是把两个单独的系统在一个总的系统作为菜单进行免密登录,由于时间还有跨域和不同的token等问题,就使用了内嵌iframe,因为是不同的域名进入子系统也要本地存储一下(获取的user信息以及token传入到iframe子系统)<template><div class="hello"><div><iframe src="http://xxxxxxxxxxx
·
需求是把两个单独的系统在一个总的系统作为菜单进行免密登录,由于时间还有跨域和不同的token等问题,就使用了内嵌iframe,因为是不同的域名进入子系统也要本地存储一下(获取的user信息以及token传入到iframe子系统)
<template>
<div class="hello">
<div>
<iframe src="http://xxxxxxxxxxxxxx" frameborder="0" id="myIframe" ref="myIframe"></iframe>
</div>
</div>
</template>
export default {
mounted() {
this.iframeWin = this.$refs.myIframe.contentWindow;
//最开始做的是点击事件是没有问题的 后面需要自动传值就不行 也试了模拟点击还是不行
//原因是iframe还没加载完 所以使用onload
document.getElementById("myIframe").onload=function(){
this.fatherpost()
};
}
methods:{
fatherpost(e){//iframe传值
this.iframeWin.postMessage({
params:{
data:data//传的数据
}
},'http://xxxxxxxxxxxxxx')
},
}
}
//iframe接收
export default {
mounted() {
window.addEventListener('message',function(e){
console.log(e.data)
},false)
}
}
//子传父的话 挂载和接收的方式都是差不多
window.parent.postMessage(message, targetOrigin, [transfer])
更多推荐
已为社区贡献2条内容
所有评论(0)