需求:
由于 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 元素会创建包含另外一个文档的内联框架(即行内框架)。
提示:

  1. 可以把需要的文本放置在 < iframe > 和 < /iframe > 之间,这样就可以应对无法理解 iframe 的浏览器;
  2. 使用 CSS 为 < iframe > (包括滚动条)定义样式。

< iframe > 标签属性

属性描述
frameborder1 有边框(默认值);0 关闭边框规定是否显示 iframe 周围的边框
heightpx;%;规定 iframe 的高度
longdescURL规定一个页面,该页面包含了有关 iframe 的较长描述
marginheightpx定义 iframe 的顶部和底部的边距
marginwidthpx定义 iframe 的左侧和右侧的边距
nameframe_name规定 iframe 的名称
scrollingyes ; no ; auto;规定是否在 iframe 中显示滚动条
seamlessseamless规定 < iframe > 看上去像是包含文档的一部分
srcURL规定在 iframe 中显示的文档的 URL
srcdocHTML_code规定在 < iframe > 中显示的页面的 HTML 内容
widthpx; %;定义 iframe 的宽度
sandbox" ";allow-forms;allow-same-origin;allow-scripts;allow-top-navigation;启用一系列对 < iframe > 中内容的额外限制。
alignleft;right;top;middle;bottom;不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。

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

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

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

Logo

前往低代码交流专区

更多推荐