父组件嵌套iframe，解决浏览器后退问题

父组件嵌套iframe，解决浏览器后退问题

1. 父组件和iframe通信问题，父组件：在mounted中监听message事件

   父组件

   mounted() {
       let that = this
       // 接收子页面参数
       window.addEventListener('message', function (result) {
         // 审批返回数据，页面调条数
         let data = JSON.parse(result.data)
         // 弹出框-展示子页面传过来的参数
         that.$toast.show(data.value)
       })
    }
   

   iframe

   	watch: {
   			// 监听到某个数据，数据变化时触发
   		    isloadingAllDatas(val) {
   		      if (this.isloadingAllDatas) {
   		        var obj = {
   		          value: '页面加载完成',
   		          path: '/index/platform/role'
   		        }
   		        // 传参给父页面
   		        window.parent.postMessage(JSON.stringify(obj), '*')
   		      }
   		    }
   		  }
   
   

2. 解决：浏览器原生后退按键，只是后退了iframe

   父组件

   // 保存key为时间戳
   // 结构
   <iframe
           :src="src"
           :key="timer"
           frameborder="0"
           @onpopstate="goBack()"
         ></iframe>
    // script
    // 定义一个变量
    private timer:Number
    // 每次路由变化时，重新获取这个时间撮，根据diff算法，iframe会重新加载，因为key值变了
    @Watch('$route', { immediate: true, deep: true })
     onChildChanged(newVal: any) {
       this.timer = new Date().getTime()
     }
     // PS：我这里使用的是 ts + vue-property-decorator，请自行转换