【Vue】Vue父页面与iframe内嵌html子页面互调，传参问题

记录一个开发过程中遇到的问题，Vue项目中嵌入了一个iframe，iframe里面的是一个html的页面，这时候想Vue和这个html之间来回互调传参，下面提供解决思路。

1.Vue调用iframe子页面中的方法

这里有一个index.html里面有这样的一些方法

<script>
  function ToFreeCameraFunc() {
      unityInstance.SendMessage("ROAM", "FreeCameraClick");
  }
  function ToAutoRoamFunc() {
      unityInstance.SendMessage("ROAM", "AutoRoamClick");
  }
  function ToManualRoamFunc() {
      unityInstance.SendMessage("ROAM", "ManualRoamClick");
  }
  function InitializationRack(oo) {
      unityInstance.SendMessage("GameManage", "InitializationRackClick",oo);
  }
  
</script>

把这个index.html引入Vue的页面中来，通常我语法是这样写的

 <div v-if="$route.meta.isShow" class="_if" >
      <iframe
        src="/static/index.html"
        id="iframetest"
        ref="iframe"
        frameborder="no"
        scrolling="no"
        allowfullscreen="true"
      ></iframe>
 </div>

我们在Vue页面中调用index.html中的方法时可以这样写：

 methods: {
    autoRoam() {
       this.$refs.iframe.contentWindow.ToAutoRoamFunc();
    },
    manualRoam() {
      this.$refs.iframe.contentWindow.ToManualRoamFunc();
    },
    freeCamera() {
      this.$refs.iframe.contentWindow.ToFreeCameraFunc();
    },
    InitializaClick(data) {
       this.$refs.iframe.contentWindow.InitializationRack(JSON.stringify(data));
    },
},

2.iframe子页面调用父Vue中的方法

这里我们直接调用父页面中的方法就调用不到了，我们需要把父页面中的方法挂载到window对象上，然后子页面中才可以调用

在父Vue页面中，我们这样写一下：

methods: {
   test(){
        console.log("111");
    } 
},
 mounted() {
    let self = this;
    window["goBack"] = () => {
        self.test();
    };
}

打印一下window对象，可以看到，我们的方法已经挂到了window对象上

在iframe中的index.html页面中，我们只要调用父页面的window对象中的方法就可以了

<script>
	function b(){
		window.parent['goBack']();
	}
</script>

 我们看一下iframe页面中的window.parent对象

 发现这个方法也在里面，这样就可以调用成功了。。。