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

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的博客-CSDN博客https://blog.csdn.net/snows_l/article/details/131532067?spm=1001.2014.3001.5501