Vue中使用iframe 、加载完成后回调事件

原创已于 2024-05-31 12:04:31 修改 · 9.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2022-11-18 14:23:36 首次发布

前端开发同时被 2 个专栏收录

33 篇文章

订阅专栏

20 篇文章

订阅专栏

本文介绍如何在Vue项目中使用iframe，并实现对iframe页面加载状态的监测。通过监听iframe的加载完成事件来更新Vue的数据属性，从而控制页面加载指示器的显示与隐藏。

template:

<div class="qr-warp-box" v-loading="iLoading">
  <iframe :src="qrUrl" style="width: 100%; height: 300px" frameborder="0" scrolling="no" ref="iframe"></iframe>
</div>

script:

// vue生命周期钩子函数 -- 更新之后
updated() {
  if (this.$refs.iframe) {
    // IE
    if (this.$refs.iframe.attachEvent) {
      this.$refs.iframe.attachEvent('onload', () => {
        // 加载成功
        this.iLoading = false;
      });
    } else {
      this.$refs.iframe.onload = () => {
        // 加载成功
        this.iLoading = false;
      };
    }
  }
},

vue2+elementui完整代码如下：

<template>
  <div class="container-warp">
    <div class="" v-loading="true">加载的东西</div>
    <div class="qr-warp-box" v-loading="iLoading">
      <iframe :src="qrUrl" style="width: 100%; height: 300px" frameborder="0" scrolling="no" ref="iframe"></iframe>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iLoading: true,
      qrUrl: ''
    };
  },
  created() {
    // 模拟异步调用接口
    setTimeout(() => {
      this.qrUrl = 'https://www.baidu.com';
    }, 2000);
  },
  updated() {
    if (this.$refs.iframe) {
      // IE
      if (this.$refs.iframe.attachEvent) {
        this.$refs.iframe.attachEvent('onload', () => {
          // 加载成功
          this.iLoading = false;
        });
      } else {
        this.$refs.iframe.onload = () => {
          // 加载成功
          this.iLoading = false;
        };
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container-warp {
  width: 100%;
  height: 100%;
  padding: 20px;
}
</style>

vue中iframe的 postMessage message的使用,以及一些小问题_snows_l的博客-优快云博客https://blog.youkuaiyun.com/snows_l/article/details/131532067?spm=1001.2014.3001.5501