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

Posted 2021-09-14 明天也要努力

需求：
由于 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 > 标签属性

属性	值	描述
frameborder	1 有边框（默认值）；0 关闭边框	规定是否显示 iframe 周围的边框
height	px；%；	规定 iframe 的高度
longdesc	URL	规定一个页面，该页面包含了有关 iframe 的较长描述
marginheight	px	定义 iframe 的顶部和底部的边距
marginwidth	px	定义 iframe 的左侧和右侧的边距
name	frame_name	规定 iframe 的名称
scrolling	yes ； no ； auto；	规定是否在 iframe 中显示滚动条
seamless	seamless	规定 < iframe > 看上去像是包含文档的一部分
src	URL	规定在 iframe 中显示的文档的 URL
srcdoc	html_code	规定在 < iframe > 中显示的页面的 HTML 内容
width	px； %；	定义 iframe 的宽度

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

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