H5以及vue项目的iframe的跨域传值 跨域跳转问题

需求是一个项目需要嵌套另一个项目的页面而且还有数据的传递和跳转

父页面代码

<template>
  <div>
    <iframe :src="src"  id="iframe"></iframe>
  </div>
</template>
<script>
export default {
  data() {
    return {
     user_info:this.$store.state.user,
     src:'https://www.baidu.com/'
    }
  },
  mounted() {
        //首先获取当前项目的页面路径
        let page = location.href
        let iframe = document.getElementById("iframe")
        iframe.onload = function(){
           //把当前页面的路径当做参数传给子页面的iframe
          iframe.contentWindow.postMessage(page,"*")
        }
        let th = this
        //接收子页面传过来的参数：e.data
        window.addEventListener('message',function(e){
           //处理业务逻辑
          // location.href = `index.html#${e.data}`    //可以跳转但是返回有问题
          th.$router.push({path:e.data})
        },false)
  },
  methods: {

  }
  
}
</script>

<style scoped>
</style>

子页面代码

<script>
    var parentPage = ''
    //接收父页面传过来的数据：event.data
     window.addEventListener('message', function (event) {
            //event.data获取传过来的数据
            parentPage = event.data
            //跳转原来的项目并把data数据传给父级页面（项目）parentPage是父级页面页面传过来的父级也卖弄的路径
         window.parent.postMessage(data, parentPage)
        });
   
       
</script>

总结：父页面向子iframe传值

//父页面
//获取页面iframe
let iframe = document.getElementById("iframe")
iframe.contentWindow.postMessage('需要传的数据',"*")     //*表示你要传给子页面的域名





//子页面

window.addEventListener('message',function(e){
    //e.dat是父页面传过来的数据
    console.log(e.data)
})

子页面传值给父页面

//子页面
window.parent.postMessage(data,"父页面的域名路径")；



//父页面
window.addEventListener('message',function(e){
    //e.data就是子页传过来的数据
    console.log(e.data)
})