iframe的父子通信策略

关于iframe的父子页面通信问题

• 子系统发送数据

//1.向最顶层的父系统发数据
test.onclick= function(){
    
    
	window.top.postMessage('发送子系统数据','*')
}

// 2.向本级系统父系统发数据
window.parent.postMessage({
    
    
	name: 'receiveMsg',//name可以自定义
	'data': data //数据也可以自定义
})

• 父系统接收数据

//使用vue的框架接收数据，其他框架同理
mounted(){
    
    
	let that = this
	window.addEventListener('message', functionn(e) =>{
    
    
		console.log(e.data) //打印传输过来的属性
		let name = e.data.name
		if(that[name] && typeof that[name] == 'function'){
    
    
			that[name](e.data.data)
		}
	},false
	)
}

methods:{
    
    
	//定义的方法名
	receiveMsg(val){
    
    
		console.log(val)
	}
	
}