一、vue项目调用iframe子页面中的方法。
父页面代码：

<template>
  <div class="pjpccx">
    <h1 class="title_color">{{ title }}</h1>
    <button @click="reportPrint">点击调用iframe中的方法</button>
    <iframe ref="iframe" :src="urlPath" class="iframe" frameborder="0" scrolling="yes" name="iframe" seamless>您的浏览器版本过低，无法显示报表内容！建议升级浏览器或更换浏览器！</iframe>
  </div>
</template>

export default {
	methods: {
    reportPrint() {
      this.$refs.iframe.contentWindow.Print()
    }
  }
}

可以看到，调用子页面方法的关键在于获取到iframe元素对象后的contentWindow属性，所以这里使用了$refs ，如果使用dom方法获取也是可以的 。
总结一下就是 ：

this.$refs.iframeName.contentWindow.FunctionName()

二、在iframe页面中，调用引用它的父页面中的方法。
父页面代码：

<body>
  <h1>我是父页面</h1>
  <iframe src="http://127.0.0.1:5050" frameborder="0" style="height: 100%;width: 100%"></iframe>
  <script>
    function fatherFunction() {
      alert('我是父页面中的方法！')
    }
    window.addEventListener('message', function(e){
            console.log(e) //{data:'params'}
            fatherFunction()
    })
  </script>
</body>

子页面代码：

<template>
  <div class="weather-app" :class="currentWeatherBG">
    <button @click="test">我是子页面按钮，点击调用父页面方法</button>
  </div>
</template>
<script>
export default {
  methods: {
      test() {
      window.parent.postMessage({
        data :"params"
      },'*');
    },
 }
}
</script>

可以看到，这里关键是子页面通过postMessage方法实现的通信，postMessage的使用方法为：

otherWindow.postMessage(message, targetOrigin, [transfer]);

message为需要传递的信息，
targetOrigin为指定哪些窗口能接收到消息事件，可以为’*’，但是这样很不安全，建议根据实际项目精确匹配。

而父页面则只需要添加事件监听器，在回调中执行需要执行方法或者使用参数。

window.addEventListener('message', function(e){
        console.log(e) //{data:'params'}
        fatherFunction()
})
# vue.js
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

如何在鲲鹏平台上快速上手应用开发？鲲鹏DevKit给你答案

鲲鹏DevKit针对不同的业务场景，提供了应用迁移和系统迁移两套解决方案，帮忙开发者快速从X86平台迁移至鲲鹏平台，通过详细的迁移建议降低迁移门槛，可视化展示迁移进度，打消鲲鹏平台开发的顾虑。

avatar 华为开发者空间
cover

GaussDB Ustore存储引擎解读

avatar 华为开发者空间
cover

AI大模型高效开发神器来了 ，解读ModelArts 8大能力

avatar 华为开发者空间