postmessage传送
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="aa">测试传值</button>
<div><iframe src="" frameborder="0" id="myframe" width="100%" height="560px"></iframe></div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$('#aa').click(function(){
var iFrame = document.getElementById('myframe')
$('#myframe').prop('src','http://localhost:8080/#/index/tab/basicData/topologyFigure')
iFrame.onload=function(){
iFrame.contentWindow.postMessage({orgid:666,age:20,name:'测试'},'*')
}
})
</script>
</body>
</html>
postmessage监听
代码:
mounted() {
window.addEventListener('message',this.receiveMessageFromIndex,false)
},
methods:{
receiveMessageFromIndex(event){
...业务代码
console.log(event,event.data,'postmessage获取到了')
var evente=JSON.parse(event.data)
console.log(evente,1234567890)
var that=this
if(evente.userOrgId){
this.setuserorgid(evente.userOrgId)
console.log('pmsOrgId已获取到')
}
if(evente.pmsOrgId[0]){
console.log('receiveMessageFromIndex',evente.pmsOrgId[0])
this.setsjbmid(evente.pmsOrgId[0])//此时修改vuex中的sjbmid,下面search不可使用 this.sjbmid,因为还获取不到
//tree数据查询,refresh判断树更新
searchtree({sjbmid:evente.pmsOrgId[0],refresh:0}).then((response)=>{
var treedatae=response.data.data
this.data=response.data.data
this.settreeData(treedatae)
}).catch(()=>{
console.log('测试失败')
console.log(this.sjbmid)
})
}
},
}