vue嵌套iframe传值

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情
当时用iframe嵌套了另外一个系统的页面，然后点击另外一个系统按钮跳转到当前系统的页面，后面才知道可以iframe与组件之间传值，发现其实还挺简单的，就是直接iframe页面传值，主页面接收值就可以了；我一般只在PC端使用iframe

1.vue嵌套iframe;

可以自定义宽度width和高度height，我这里都是父元素的100%；
frameborder这个是设置iframe边框；
src是引用地址；
可以在iframe中加入id,用id来控制iframe的样式；

  <iframe width="100%" height="100%" frameborder="0" :src="url" ref="iframeSrc">
     您当前的浏览器不支持页面上的功能，请升级您当前的浏览器版本或使用谷歌浏览器访问当前页面
  </iframe>

2.两个页面之间的通信：

iframe子页面向主页面传值：

在需要传值的方法里面写,可以与vue父页面约定传值字段，比如要跳转的url以及url里面需要带的值；

 //在需要传值的方法里面写；
 sendParentMsg() {
   let data={  
        runUrl:'/detail',//比如我子页面要跳转到登录页面，在主页面接收值得时候用runUrl去跳转；
        query:{id:this.id}, //query这个值可以带参数，跳转链接得同时可以把这个参数带上；
        token:'aaabbbbccc',//可以token等其他参数
    }  
    window.parent.postMessage(data, '*'); //给父元素发送msg信息
 }

在页面vue主页面mounted中接收子页面传过来的值；可以根据约定传的值在主页面进行判断操作；

window.addEventListener('message', function(event) {
  console.log(evenet.data); //这里是监听子页面的message;
  if(event.data.token) {
    sessionStorage.setItem('token',event.data.token); //可以把监听到的token存储起来；
  }；
  if(event.data.runUrl) { //判断子页面有没有传runUrl字段，如果有就跳转页面；
      that.$router.push({
        path:event.data.runUrl,
        query:event.data.query?event.data.query:null //这里是判断query有木有值，有得可以不用带参数的；
      })
    }  
});

vue主页面向iframe子页面传值：

在主页面需要传值的方法上写，可以传递token或者其他信息等；

sendSonMsg() {
 //向子页面传值
 handleToIframe() {
  let data = {
    data:'这是父元素的data',
    token:'cccdddeee',//可以在这里传值给子页面，就可以不在链接上拼token
  };
  this.$refs.iframeSrc.contentWindow.postMessage(data, '*'); 
}

在子页面mounted中接收父页面传过来的值；

window.addEventListener('message', function(event) {
  console.log(evenet.data); //这里是监听子页面的message;
  if(event.data.token) {
    sessionStorage.setItem('token',event.data.token); //可以把监听到的token存储起来；
  }； 
});