由于跨域的情况下,无法携带sessionstorage,所以通过iframe的postMessage通信机制传递数据。
1.主页面,写入url,加载完成后,发送数据
<template>
<div>
<iframe v-if="src" ref="iframe" @load="onload" :src="urlSrc"></iframe>
</div>
</template
<script>
export default {
data(){
return{
urlSrc:"调用路径地址",
}
},
methods(){
onload(){
let query= {
id:'dwewe'
text:'我是数据',
};
this.$nextTick(()=>{
this.$refs.iframe.contentWindow.postMessage({
type:'preview',
data:qury //可传被调用页面所需要的数据
},this.urlSrc);
}
})
}
}
}
</script>
2.被调用页面,执行监听,在created、mounted生命周期中都可以
created() {
window.addEventListener('message',(event)=>{
console.log(event.data.type)
if(event.data&&event.data.type=='preview'){
let data = event.data.data;
console.log(data) //拿到主页面数据处理
}
}, false);
}