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

思路:设置定时器一个,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)的更多相关文章
- 优化JS加载时间过长的一种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...
- iframe 加载外部资源,显示隐藏loading,onload失效
在项目中使用iframe 来加载外部资源,需要在iframe请求外部资源的时候,需要显示一个loading,在加载完成后,将这个loading隐藏掉,刚开始看到W3C中 iframe有一个 onloa ...
- 判断iframe加载完成
一.js判断 var parFrame = document.getElementById("oIframe"); if(parFrame.attachEvent){ parFra ...
- iframe 加载闪过白块问题
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 在使用iframe时,iframe背景为白块,刷新时也会闪过白块.如果刷新时间长,就会 ...
- 判断iframe加载完成、用于当ifame加载完成时执行一些操作
window.frames["iframec"].addEventListener( "load", function(){ window.frames[&qu ...
- iframe加载方案及性能
普通方法加载iframe 在onload之后加载iframe setTimeout来加载iframe 友好型iframe加载 转载地址:翻译文章-iframe异步加载技术及性能 英文原文:Iframe ...
- 关于 <script type='text/template' > 的妙用 / 使用jquery获取iframe加载完成事件
https://www.cnblogs.com/ddqyc/p/6200539.html <!DOCTYPE html> <html> <head> <met ...
- javscript 实现iframe加载内容页出现LOADING效果
<div id="load" align="center"> <img src="http://sc.cnwebshow.com/u ...
- JS iFrame 加载慢怎么解决
在项目中经常要动态添加iframe,然后再对添加的iframe进行相关操作,有时候会遇到iframe加载很慢什么原因呢,该如何解决呢?带着这个问题一起通过本文学习,寻找答案吧! aaa.html &l ...
- vue中iframe加载慢,给它加loading效果
js框架:vue ui框架:element 因为iframe加载慢,所以在它加载完成前添加loading效果,loading用的是element家的加载效果 <template> < ...
随机推荐
- 记录--try...catch知识补全
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 说到try...catch都觉得非常熟悉了,不就是用来捕捉代码块中的错误嘛,平时也用得比较多的.然而因为了解不够多,我的面试却栽在了一个简 ...
- 记录--Openlayers 高德腾讯、百度、天地图坐标相互转换
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 在地图开发过程中,坐标的转换是很常用的功能,国内的话一般西安80(EPSG:4610).北京54(EPSG:2433)转WGS84比较多, ...
- HDFS Balancer负载均衡器
目录 1.背景 2.什么是平衡 2.1 每个DataNode的利用率计算 2.2 集群的利用率 2.3 平衡 3.hdfs balancer语法 4.运行一个简单的balance案例 4.1 设置平衡 ...
- DevOps迈向标准化,平台工程让开发运维更轻松
在近一代人的时间里,DevOps 在软件开发和运维领域占据了主导地位.这是一套开发人员都离不开的技能和方法.Pearl Zhu 在 "The Digital Master" 一书中 ...
- KingbaseES V8R6 运维案例 --ksql访问动态库问题
KingbaseES V8R6数据库运维案例之---ksql访问动态库问题 案例说明: CentOS环境下,在安装和初始化数据库实例后,启动数据库服务,通过ksql连接访问时出现以下故障: 经检查,是 ...
- 花了100块大洋搞懂 ipv6的用户如何访问ipv4 服务器
大家好,今天蓝胖子花了100多块搞懂了 ipv6的用户如何访问ipv4 服务器,将收获与大家分享下. ipv4和ipv6的协议栈不同,这意味着,其对应的ip包的封装和解析不同,那么只支持ipv4的机器 ...
- 线上问题分析之java dump文件生成
一.查看java进程 jps or ps aux | grep java 二.生成dump文件 jmap -dump:live,format=b,file=xxxx.bin 进程ID 三.查看dump ...
- lodash已死?radash最全使用介绍(附源码说明)—— Array方法篇(2)
前言 前篇我们已经介绍了 radash 的相关信息和部分 Array 相关方法,详情可前往主页查看: 本篇我们继续介绍 radash 中 Array 的其他相关方法: Radash 的 Array 相 ...
- 探索基于WebRTC的有感录屏技术开发流程
第一章:技术原理 WebRTC(Web Real-Time Communication)是一种开放源代码项目,旨在通过浏览器之间的点对点通信实现实时音视频通信.WebRTC利用JavaScript A ...
- HR必备|可视化大屏助HR实现人才资源价值最大化
人力资源管理质量的优劣关系到企业可持续发展目标的实现,在信息化时代背景下,应用信息技术加强人力资源管理过程的优化,利用技术提升人力资源管理质量和效率已是大势所趋. 利用信息技术构建信息化人力资源管理平 ...