Vue中 iframe 的内容加载慢，实现加载（Loading）效果

需求：
由于 iframe 的内容加载较慢，需要在加载完成前添加 loading 效果。
本文 loading 使用的是 Element 框架的加载（Loading）组件。

功能实现完整代码

<template>
  <div style="height:1000px;" v-loading="loading">
    <iframe 
      ref="Iframe" 
      src="https://www.taobao.com/" 
      width="100%" 
      height="100%" 
      frameborder="0">
    </iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    iframeLoad(){
      this.loading = true;
      const iframe = this.$refs.Iframe;
      if (iframe.attachEvent) { // IE
        iframe.attachEvent('onload', () => { this.loading = false; });
      } else { // 非IE
        iframe.onload =  () => { this.loading = false; };
      }
    }
  },
  mounted() {
    this.iframeLoad();
  },
};
</script>

关于 < iframe > 标签知识

定义和用法：

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

提示：

可以把需要的文本放置在 < iframe > 和 < /iframe > 之间，这样就可以应对无法理解 iframe 的浏览器；

使用 CSS 为 < iframe > （包括滚动条）定义样式。

< iframe > 标签属性

全局属性

< iframe > 标签支持 HTML 中的全局属性。

事件属性

< iframe > 标签支持 HTML 中的事件属性。

浏览器支持

所有主流浏览器都支持 < iframe > 标签。