思路:设置定时器一个,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. 记录--Vue2屎山之 Table 屎山

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 Vue2 将在 2023 年年底停止维护了,但是 Vue2 的代码却不会在 2023 年消失,还会越来越多:难以想象几十万行或者几百 ...

  2. 记录--可视化大屏-用threejs撸一个3d中国地图

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 不想看繁琐步骤的,可以直接去github下载项目,如果可以顺便来个star哈哈 本项目使用vue-cli创建,但不影响使用,主要绘制都已封 ...

  3. 聊聊ShareGPT格式的微调数据集

    转载请注明住处:https://www.cnblogs.com/zhiyong-ITNote 概述 ShareGPT格式的数据集中,一般是如下格式: [ { "conversations&q ...

  4. java使用ftp连接linux处理文件

    1.Maven依赖 <!-- FTP使用包 --> <dependency> <groupId>commons-net</groupId> <ar ...

  5. .Net Core AutoFac 使用方法讲解大全,具体详细使用知识总结

    AutoFac 具体使用知识总结 阅读前提示 AutoFac 只是众多IOC框架的其中一种, 比较主流的有Unity.autofac.spring.net.MEF.Injection.Asp.Net ...

  6. C++设计模式 - 享元模式(Flyweight)

    对象性能模式 面向对象很好地解决了"抽象"的问题,但是必不可免地要付出一定的代价.对于通常情况来讲,面向对象的成本大都可以忽略不计.但是某些情况,面向对象所带来的成本必须谨慎处理. ...

  7. ET8开发微信小游戏之部署云服务器Nginx代理

    最近用ET8搞微信小游戏测试,部署到云服务器,手机上运行,必须要用https备案过得域名,客户端使用websocket创建必须要wss开头,服务端部分通过Nginx进行https通信之后转发到云服务器 ...

  8. 2024-04-06:用go语言,给你两个非负整数数组 rowSum 和 colSum, 其中 rowSum[i] 是二维矩阵中第 i 行元素的和, colSum[j] 是第 j 列元素的和,换言之你

    2024-04-06:用go语言,给你两个非负整数数组 rowSum 和 colSum, 其中 rowSum[i] 是二维矩阵中第 i 行元素的和, colSum[j] 是第 j 列元素的和,换言之你 ...

  9. Pdfium.Net.Free 一个免费的Pdfium的 .net包装器--可视化编辑pdf

    Pdfium.Net.Free 支持 .NETFramework 4.0 .NETFramework 4.5 .NETStandard 2.0 .Net8.0 可以和PdfiumViewer.Free ...

  10. Kafka原理剖析之「位点提交」

    一.背景 Kafka的位点提交一直是Consumer端非常重要的一部分,业务上我们经常遇到的消息丢失.消息重复也与其息息相关.位点提交说简单也简单,说复杂也确实复杂,没有人能用一段简短的话将其说清楚, ...