记录一个开发过程中遇到的问题，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对象

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

?

?

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。