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)方法將值在傳過去。