文章介绍了如何在iframe中实现父页面向子页面传递信息，以及子页面如何向父页面发送数据，主要利用了window.postMessage方法进行跨域通信。在父页面中设置监听事件，通过contentWindow属性向子页面发送消息；而在子页面中，同样添加监听事件，通过window.parent向父页面发送消息。
1、父传子
父页面发出：
iframe引入:
<iframe ref="iframe" src="http://192.168.100.112:8081/" frameborder="0" scrolling="0"> </iframe>
传值：
if(this.$refs.iframe&&this.$refs.iframe.contentWindow){
let fathersay = '我是你爸爸';
this.$refs.iframe.contentWindow.postMessage(fathersay,'http://192.168.100.112:8081'); //第2个参数定义跨域接收方，'*'代表任意接收方
}子页面接收：
接收：
window.addEventListener('message',function(e){
console.log(typeof(e.data),e.data); //string 我是你爸爸
})2、子传父
子页面发出：
let childsay = '我是你儿子'
window.parent.postMessage(childsay,'*');//第2个参数定义跨域接收方(父级域名)，'*'代表任意接收方父页面接收：
window.addEventListener('message', this.receiveParent);
//接收方法
receiveParent(e) {
console.log(typeof(e.data),e.data); //string 我是你儿子
},
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
