vue项目通过iframe 嵌套html页面相互调用传值

背景：由于最近在负责腾讯云实时音视频的对接，云会议的官方demo又是html版本的，自己改成vue版本的bug太多，所以直接在htmldemo的基础上开发，因为传给腾讯云的userID只能为英文或者数字，不然小程序没办法接收到pc端的画面，所以只能把数据库的用户id给传过去了，所以腾讯云返回过来的用户列表也就是id了，所以我要做的就是在html页面上将腾讯云传过来的用户id通过调用后台接口的方式，将前台页面转为汉字。

之前想过几种解决方案（最后被否决了的）

　　1.通过将用户名转为拼音作为userId传到腾讯云，腾讯云传过来时在将拼音转成汉字，这样会出现一个问题，就是同音字，转成拼音后在转汉字结果不一定是原来的了。

　　2.直接在html页面上通过AJAX通过接口获取用户名，这样确实可以实现，但是考虑到一个问题，毕竟项目开发人员不只有我一个，通过ajax必然接口地址要写死，而且不只有一个环境，我们如生产环境，测试环境，都是不同的地址，这样的话，如果通过AJAX方式实现，在其他人员打包的时候，可能就不知道要改这块地方了，就会导致会议功能异常

好了回归正题，

通过html调用vue的方法，然后通过vue获取的值返回给html在进行渲染

直接上代码

这个openHref 方法主要就是页面加载的时候，将obj的信息传到html页面中去 主要就是 

this.$refs.iframe.contentWindow.addText(obj);这一行了
addText(); 为html页面中的方法

 openHref(){
        let obj={
          "userId":this.userId,
          "roomId":this.roomId,
          "sdkAppId":this.sdkAppId,
          "userName":this.userName,
          "userSig":this.userSig,
          "shareUserSig":this.shareUserSig,
        }
        setTimeout(()=>{
          this.$refs.iframe.contentWindow.addText(obj);
        },1000)

      }

　　下面就是html中的方法了

 function addText(obj) {
        this.obj=obj;
        console.log(JSON.stringify(obj),888888);
        $('#userId').val(obj.userId);
        $('#roomId').val(obj.roomId);
        $('#userName').val(obj.userName);
        this.generator={
          'sdkAppId':obj.sdkAppId,
          'userSig':obj.userSig,
          'shareUserSig':obj.shareUserSig
        }
        console.log("generator="+JSON.stringify(this.generator));
        this.userId=obj.userId;
      }

vue调用html的方法就倒这了，这方法也是百度找到了，由于是第二天才开始写这篇博客，实在是忘记这方法是在哪个博客上看到的，这里就不挂链接了

接下来就是html页面中调用 vue页面 方法 然后通过vue页面获取到的值，返回给html页面进行渲染了

vue页面代码

methods: {
      getUserById(userId){
        let user={'userId':userId}
        console.log("进入getUserById=="+user)
        getUserById(user).then(response => {
          console.log("response========="+JSON.stringify(response))
           this.$refs.iframe.contentWindow.addMember(response);
        })

      }
}

 

 created() {
      // 初始化时为window绑定一个方法
      window['vueDefinedMyProp'] = (userId) => {
        this.getUserById(userId)
      }
  }

html页面代码 

function addMemberView(id) {
  window.parent['vueDefinedMyProp'](id);
}
function addMember(obj){
  console.log("addMember"+obj.realName);
  let id=obj.realName;
  let memberElm = $('#member-me').clone();
  memberElm.attr('id', id);
  memberElm.find('div.member-id').html(id);
  memberElm.css('display', 'flex');
  memberElm.appendTo($('#member-list'));
}

addMemberView这方法按自己需求来，反正我这边是由腾讯云传过来的userID，然后进行渲染到页面上去的，下面的

addMember 是我自己加的，就是为了将vue获取到的值传过来，进行渲染
逻辑就是 通过-》

window.parent['vueDefinedMyProp'](id);

调用上面写到的》

getUserById(userId)方法

然后getUserById接口调用成功后，在通过vue调用html方法

addMember(obj)方法将值在传过去。