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

飞熊 • 2023年4月28日上午10:15 • 前端开发 • 阅读 816

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

属性	值	描述
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 的宽度
sandbox	” “；allow-forms；allow-same-origin；allow-scripts；allow-top-navigation；	启用一系列对 < iframe > 中内容的额外限制。
align	left；right；top；middle；bottom；	不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。