vue项目中，调用iframe子网页中的方法和在iframe子页面中调用vue父页面中的方法。

HeavenPeakMan

已于 2023-11-27 10:56:40 修改

阅读量2.3k

点赞数 1

文章标签： vue.js javascript 前端

于 2023-04-26 10:57:07 首次发布

本文链接：https://blog.csdn.net/HeavenPeakMan/article/details/130381454

版权

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

<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()
})

HeavenPeakMan

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue项目中，调用iframe子网页中的方法和在iframe子页面中调用vue父页面中的方法。

可以看到，调用子页面方法的关键在于获取到iframe元素对象后的contentWindow属性，所以这里使用了$refs ，如果使用dom方法获取也是可以的。targetOrigin为指定哪些窗口能接收到消息事件，可以为’*’，但是这样很不安全，建议根据实际项目精确匹配。而父页面则只需要添加事件监听器，在回调中执行需要执行方法或者使用参数。message为需要传递的信息，'我是父页面中的方法！
复制链接

扫一扫