一、跨域通信

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);
})

注意：

二、示例

parent.html

  
  
  



  
我是父级页面
  父页面的按钮
   
div内容
  
  

child.html

  
    
    
        
        
    
    
        
我是内嵌的子页面
        子页面的按钮