[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> < ...
随机推荐
- NJOPT自控第三次积分赛--风力摆小结
NJOPT自控第三次积分赛--风力摆小结 题目 题目就不放了,百度一搜就有,就是2015国赛的风力摆.. 方案 我们队采用的主控是STM32F401CCU6(科协传统),性能完全够用:姿态传感器采用的 ...
- C# 12 拦截器 Interceptors
拦截器Interceptors是一种可以在编译时以声明方式替换原有应用的方法. 这种替换是通过让Interceptors声明它拦截的调用的源位置来实现的. 您可以使用拦截器作为源生成器的一部分进行修改 ...
- 您真的了解Java中的锁吗?这7种不同维度下的锁知道吗?
写在开头 在上几篇博文中,我们聊到过volatile关键字,用它修饰变量可以保证可见性与有序性,但它并不是锁,在使用时并不会阻塞线程,且不保证原子性,属于一种轻量级.高效的同步方式,因此,如果我们的使 ...
- WinAppSDK / WinUI3 项目无法使用 SystemEvents 的问题
SystemEvents 是一个开发 win32 窗口项目很常用的类,其中封装了一些常用的系统广播消息.在 WinUI3 项目中,SystemEvents 事件经常无法触发,简单排查了一下原因. Sy ...
- VS2010插件NuGet
下载地址 NuGet Package Manager - Visual Studio Marketplace NuGet包地址 NuGet Gallery | Home
- GIT:斯坦福大学提出应对复杂变换的不变性提升方法 | ICLR 2022
论文对长尾数据集中的复杂变换不变性进行了研究,发现不变性在很大程度上取决于类别的图片数量,实际上分类器并不能将从大类中学习到的不变性转移到小类中.为此,论文提出了GIT生成模型,从数据集中学习到类无关 ...
- OpenHarmony加速行业应用落地,多款软件发行版正通过兼容性测评
4 月 25 日,OpenAtom OpenHarmony(以下简称"OpenHarmony")技术日在深圳举办,大会聚焦 OpenHarmony 3.1 Release 版本核心 ...
- 深入理解 Java 多线程、Lambda 表达式及线程安全最佳实践
Java 线程 线程使程序能够通过同时执行多个任务而更有效地运行. 线程可用于在不中断主程序的情况下在后台执行复杂的任务. 创建线程 有两种创建线程的方式. 扩展Thread类 可以通过扩展Threa ...
- XML 简介及用法详解
XML 是一种用于存储和传输数据的与软件和硬件无关的工具. 什么是XML? XML代表eXtensible Markup Language(可扩展标记语言).XML是一种与HTML非常相似的标记语言. ...
- vue3 快速入门系列 —— vue3 路由
vue3 快速入门系列 - vue3 路由 在vue3 基础上加入路由. vue3 需要使用 vue-router V4,相对于 v3,大部分的 Vue Router API 都没有变化. Tip:不 ...