思路:设置定时器一个,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. 不使用microlib实现STM32串口printf重定向:

    不使用microlib实现STM32串口printf重定向: 突然发现有一篇markdown忘记上传了,补一下 注:使用的是CubeMX生成的工程文件 生成后,在usart.c中添加如下代码: //u ...

  2. django项目(博客二)

    扩展1:admin路由分发的本质 路由分发本质 include 可以无限制的 嵌套N多层 url(r'^index/',([],None,None)) 扩展2: 由于url方法第一个参数是正则表达式, ...

  3. SQL奇遇记:解锁 SQL 的秘密

    数据库基础 在我们探究SQL语言之旅的起点,首先要对数据库的核心理念有所了解.数据库在现代生活中无处不在,每次网购.网页浏览.即时通讯,都在产生数据.简单来说,数据库就是按一定数据结构组织.存储.管理 ...

  4. 大场景的倾斜摄影三维模型OBJ格式轻量化处理处理关键处理技术分析

    大场景的倾斜摄影三维模型OBJ格式轻量化处理处理关键处理技术分析 大场景的倾斜摄影三维模型是指通过航空或地面摄影获取的大范围.高分辨率的地理环境数据.为了在虚拟环境中加载和渲染这些模型,需要对其进行O ...

  5. Commons-Collections1反序列化

    JDK版本为jdk8u65 commons-collections版本为3.2.1 InvokerTransformer CC1的漏洞点在InvokerTransformer,InvokerTrans ...

  6. LOTO示波器选型指南

    LOTO示波器选型指南 LOTO示波器属于虚拟示波器,产品主要基于USB接口的,所以使用LOTO示波器产品需要配备一台Windows电脑或者Android(安卓)智能手机/平板. 针对一些特殊应用的工 ...

  7. 原生js实现table的增加删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. linux查看资源使用情况

    linux查看资源使用情况 top -c # 查看资源使用情况 top 输出如下内容 top - 14:54:21 up 95 days, 20:03, 3 users, load average: ...

  9. 添加AvalonEdit控件到WinForm

    public frmTest() { InitializeComponent(); ElementHost host = new ElementHost(); host.Size = new Size ...

  10. KingbaseES V8R3集群部署案例之---通用机无ssh环境脚本部署集群

    案例说明: 在一些通用机的生产环境,不允许主机之间通过ssh通讯,或者不允许root用户建立ssh互信或登录.默认KingbaseES V8R3集群通用机环境部署需要建立数据库用户及root用户,在集 ...