iframe的相关知识点

父页面，也是主项目

  <iframe @load="frm" id="myrame" ref="framName" :src="url" style="width:80vw;geight:80vh"></iframe>
  
  data(){
      return{
          url:this.getUrl()+'/bzrj/web/index.html#/ststem/cost' //子项目的单个页面路径
      }
  }，
  
  created(){
      sessionStorage.setItem('setToken','*******')//设置浏览器缓存
      
      //在子项目页面可以通过获取浏览器缓存拿token,不然第一次请求的tonken是无效的
      console.log(window.sessionStorage.setToken)
  }
  //子项目页面加载完成之后触发
  frm(){
      //传值给子项目
      this.$refs.framName.contentWindow.postMessage({
          typeName:'参数'
      },'*')
      
      //在主项目去修改子项目的样式
      let iframeBox=this.$refs.framName
      let iframeWind=iframeBox.contentWindow
      let doc=iframeWind.document//需同一域名下，不然获取不到dome
      let headerBox=doc.getElementById('headerMain')//子项目的id
      headerBox.style.cssText="color:red;width:100px;"
  }
  
  //拼接地址
  getUrl(){
      let url=this.$route.meta.iframeUrl||window.location.protocol+'//'+window.location.host
     return url;
  }
  

iframe子页面接收值

  window.addEventListener('message', e => { // e.data为父页面发送的数据 console.log(e.data); }，false)
  

子页面给父页面传值

 //子页面
     let params={}
     window.parent.postMessage（params,'*'）;

父项目页面接收值

window.addEventListener("message",（e）=>{
    console.log(e)
});