思路:设置定时器一个,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. uni-app开发经验分享二十二: uni-app大转盘思路解析

    最近在研究uni-app,制作了一个很有意思的集合项目demo,这里给大家分享下大转盘的前端设计思路 需求案例:大转盘抽奖 线上demo查看: 案例效果: 制作思路: 前端大转盘使用css3动画来做, ...

  2. 记录--uniapp 应用APP跳转微信小程序

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 最近APP项目开发完成,在评审会上老板提了一个需求,想在开发的APP上添加一个链接,可以跳转公司的小程序商城. 原以为会很复杂,结果只有短 ...

  3. Jvm之用C#解析class文件

    项目地址 GitHub - lxw112190/JavaClassReader: C# JavaClassReader 项目结构 一个简单的测试类 public class Test { Intege ...

  4. 自建AXI4的IP核的地址问题

    自建AXI4的IP核的地址问题 1.问题概述 在AXI4中,对应的操作通过对对应的寄存器设置来完成.其中的寄存器又分为数据寄存器和地址寄存器.其中,如果只是想要操作数据的话,只需要使用数据寄存器即可. ...

  5. .net和java串口通讯压力测试对比

    最近由于工作要求,需要对一个串口通讯设备进行压力测试,要求连续持续对串口设备发送指令,无间隔,测试设备是否会死机. 要求做到毫秒级,测试第三方的工具,基本上都无法达到毫秒级,最少的也是10毫秒. 于是 ...

  6. #树形dp#洛谷 3687 [ZJOI2017]仙人掌

    题目 给定一个简单无向连通图,问有多少种加边方案使得这个图变成简单仙人掌. 分析 首先找到一棵生成树,考虑其它非树边所对应的树的路径上的边最多只能用一次, 这可以用树上差分做,如果一个点到其父节点的边 ...

  7. #博弈论#Poj 2505 A multiplication game

    题目 给你一个整数\(n\),你从1开始乘,乘2-9之间的任意一个数. 最先得到大于等于\(n\)的数的人胜利.Stan先手Ollie后手. 那么,请问给你一个数\(n\),Stan和Ollie都足够 ...

  8. Ascend C 自定义算子 Kernel Launch调用入门

    本文分享自华为云社区<Ascend C 自定义算子 Kernel Launch调用入门>,作者: jackwangcumt. 1 Kernel Launch概述 根据官方说明文档的介绍,A ...

  9. 【FAQ】HarmonyOS SDK 闭源开放能力 —Map Kit

    1.问题描述 在App中供用户在地图上选择地址,目前在使用Map Kit结合geolocationManager逆地理编码时获取的地址信息描述不准确,希望能提供相应的Demo参考. 解决方案 Demo ...

  10. Health Kit申请验证有问题?解决方案全解析

    在接入Health Kit的过程中,应用上线前需要完成申请验证环节,获得正式的运动健康权限. 我们贴心整理了申请验证被驳回的高频问题,您可以在申请前阅读以下内容,避免在您的申请材料中出现下述问题影响审 ...