思路:设置定时器一个,n 秒后设置 404 或其它,此时给 iframe 的 onload 事件设置回调函数,加载完成则取消定时器。

示例:

data () {
return {
handler: null
}
} created () {
this.handler = setTimeout(() => {
const iframe = document.querySelector('#iframe_id')
iframe.src = './404'
}, 3000)
} mounted () {
const self = this
const iframe = document.querySelector('#iframe_id') iframe.onload = function () {
self.iframeCompleteLoad = true clearTimeout(self.handler)
}
}

Link:https://www.cnblogs.com/farwish/p/14407369.html

[FE] 被动检测 iframe 加载 src 成功失败的一种思路和方式 (Vue)的更多相关文章

  1. 优化JS加载时间过长的一种思路

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...

  2. iframe 加载外部资源,显示隐藏loading,onload失效

    在项目中使用iframe 来加载外部资源,需要在iframe请求外部资源的时候,需要显示一个loading,在加载完成后,将这个loading隐藏掉,刚开始看到W3C中 iframe有一个 onloa ...

  3. 判断iframe加载完成

    一.js判断 var parFrame = document.getElementById("oIframe"); if(parFrame.attachEvent){ parFra ...

  4. iframe 加载闪过白块问题

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 在使用iframe时,iframe背景为白块,刷新时也会闪过白块.如果刷新时间长,就会 ...

  5. 判断iframe加载完成、用于当ifame加载完成时执行一些操作

    window.frames["iframec"].addEventListener( "load", function(){ window.frames[&qu ...

  6. iframe加载方案及性能

    普通方法加载iframe 在onload之后加载iframe setTimeout来加载iframe 友好型iframe加载 转载地址:翻译文章-iframe异步加载技术及性能 英文原文:Iframe ...

  7. 关于 <script type='text/template' > 的妙用 / 使用jquery获取iframe加载完成事件

    https://www.cnblogs.com/ddqyc/p/6200539.html <!DOCTYPE html> <html> <head> <met ...

  8. javscript 实现iframe加载内容页出现LOADING效果

    <div id="load" align="center"> <img src="http://sc.cnwebshow.com/u ...

  9. JS iFrame 加载慢怎么解决

    在项目中经常要动态添加iframe,然后再对添加的iframe进行相关操作,有时候会遇到iframe加载很慢什么原因呢,该如何解决呢?带着这个问题一起通过本文学习,寻找答案吧! aaa.html &l ...

  10. vue中iframe加载慢,给它加loading效果

    js框架:vue ui框架:element 因为iframe加载慢,所以在它加载完成前添加loading效果,loading用的是element家的加载效果 <template> < ...

随机推荐

  1. 实时云渲染 VS 本地渲染,全面横向对比

    不少用户不能理解,为什么要选用实时云渲染,而不用本地的电脑进行渲染显示?本文将通过各个方面来对比两种模式的优劣支持,帮助您更全面了解实时云渲染和本地渲染. 一.便携性对比 由于GPU对机箱空间有要求, ...

  2. 三维模型(3D)OBJ格式轻量化云端处理技术方法探讨

    三维模型OBJ格式轻量化处理技术方法浅析 维模型的OBJ格式轻量化处理技术方法旨在减小模型文件大小.提高加载性能和优化渲染效果.本文将对三维模型OBJ格式轻量化处理技术方法进行浅析,并探讨其在数据压缩 ...

  3. 记录--从原理分析vue开发环境搭建的全部过程

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 平时大家开发vue项目的时候,相信大部分人都是使用 vue-cli脚手架生成的项目架构,然后 npm run install 安装依赖,n ...

  4. API接口开发规范

    API接口是不同软件系统之间进行通信的重要方式,良好的API接口设计规范可以提高系统的可维护性.可扩展性和易用性.本文介绍了一套详细的API接口开发规范,包括命名规范.请求和响应规范.安全规范等内容, ...

  5. 基于R语言的GD库实现地理探测器并自动将连续变量转为类别变量

      本文介绍基于R语言中的GD包,依据栅格影像数据,实现自变量最优离散化方法选取与执行,并进行地理探测器(Geodetector)操作的方法.   首先,在R语言中进行地理探测器操作,可通过geode ...

  6. MappedByteBuffer VS FileChannel:从内核层面对比两者的性能差异

    本文基于 Linux 内核 5.4 版本进行讨论 自上篇文章<从 Linux 内核角度探秘 JDK MappedByteBuffer> 发布之后,很多读者朋友私信我说,文章的信息量太大了, ...

  7. KingbaseES 与 Oracle XML 语法比较

    KingbaseES 内置支持 XML 相关操作,也可以通过xml2 插件进行扩展支持.以下通过例子介绍 KingbaseES XML 与Oracle 在用法上存在的一些差异. 一.数据准备 crea ...

  8. sklearn数据集使用(鸢尾花)

    1 2 from sklearn.datasets import load_iris 3 4 """ 5 sklearn数据集使用 6 :return: 7 " ...

  9. 不到2000字,轻松带你搞懂STM32中GPIO的8种工作模式

    大家好,我是知微! 学习过单片机的小伙伴对GPIO肯定不陌生,GPIO (general purpose input output)是通用输入输出端口的简称,通俗来讲就是单片机上的引脚. 在STM32 ...

  10. #期望,树的直径#51nod 1803 森林直径

    题目 有一棵 \(n\) 个结点的树,按顺序给出树边 \((fa[i],i)\), \(Q\) 次询问查询如果只选取第 \([l,r]\) 条树边,问森林的直径 \(fa[i]\) 的生成方式为 \( ...