Vue中 iframe 的内容加载慢,实现加载(Loading)效果

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

提示:

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

< iframe > 标签属性

image.png

全局属性

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

事件属性

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

浏览器支持

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

相关文章
|
4天前
|
JavaScript 前端开发 开发者
vue3+ts配置跨域报错问题解决:> newpro2@0.1.0 serve > vue-cli-service serve ERROR Invalid options in vue.
【6月更文挑战第3天】在 Vue CLI 项目中遇到 &quot;ERROR Invalid options in vue.config.js: ‘server’ is not allowed&quot; 错误是因为尝试在 `vue.config.js` 中使用不被支持的 `server` 选项。正确配置开发服务器(如代理)应使用 `devServer` 对象,例如设置代理到 `http://xxx.com/`: ```javascript module.exports = { devServer: {
18 1
|
4天前
|
JavaScript
vue强制刷新组件
vue强制刷新组件
13 0
|
4天前
|
存储 JavaScript 前端开发
vue在页面使用Vue.prototype全局变量
【6月更文挑战第3天】Vue.prototype 是 Vue 实例的原型对象,用于添加全局属性和方法。通过修改 Vue.prototype,所有 Vue 实例都能访问这些属性和方法。例如,可在 mai
6 1
|
5天前
|
缓存 JavaScript 前端开发
|
5天前
|
JavaScript 算法 容器
|
5天前
|
JavaScript 前端开发 API
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1001 0
|
5天前
|
JavaScript