1.子向父通信

parent.html

// 页面销毁前，务必去除监听器，否则会造成资源泄露！
beforeDestory () {
	window.removeEventListener('message', this.listenerFun)
}
mounted() {
	window.addEventListener('message',this.listenerFun)
}
methods: {
	listenerFun (e) {
		console.log(e.data);
    if(e.data.msg==='xxx'){
      // 业务处理逻辑
    }
	}
}

child.html

window.parent.postMessage({ msg:"xxx"},'*');

2.父向子通信

parent.html

var myframe = document.getElementById('myframe') //获取iframe
myframe.contentWindow.postMessage({data:'parent'},childDomain);//childDomain是子页面的源（协议+主机+端口号）

child.html

window.addEventListener('message', function(e){
      console.log(e.data.data);
})

注意：

子向父，子postMessage,父监听message;

父向子，父postMessage,子监听message;

测试发现，子向父postMessage的时候，源可以写为‘*’，父向子postMessage的时候，源需要写成子的源，(也就是子页面的协议+主机号+端口)。

测试代码部分：

parent.html

  
  
  


  
我是父级页面
  父页面的按钮
   
div内容
  
  <script language="javascript" type="text/javascript">
       window.addEventListener('message',function(e){
          console.log(e.data);
          if(e.data.msg==='hideselfService'){
              document.getElementById('default').style.display = 'none';
          }
      });
       document.getElementById('btn').onclick= function(){
         var myframe = document.getElementById('myframe');
         myframe.contentWindow.postMessage({data:'parent'},'http://localhost:8800');
      }
  </script>

child.html

  
    
    
        
        
    
    
        
我是内嵌的子页面
        子页面的按钮
        <script>
             document.getElementById('btn').onclick= function(){
                window.parent.postMessage({
                    msg:"hideselfService"
                },'*');
            }
            window.addEventListener('message', function(e){
                console.log(e.data.data);
            })
        </script>