思路:设置定时器一个,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. 剖析云流送技术如何为3D应用带来用户使用便利

    在过去的十年中,云游戏技术的发展为云计算行业带来了新的机遇.随着Google Stadia和GeForce Now之类的服务逐步向公众开放,云流送(cloud streaming)技术得到更大范围的应 ...

  2. ItemTouchHelper 实现交互动画

    目录介绍 01.拖拽需要实现功能 02.几个重要的方法说明 03.简单实现思路 04.拖拽效果上优化 05.完整代码展示 好消息 博客笔记大汇总[16年3月到至今],包括Java基础及深入知识点,An ...

  3. uniapp热更新和整包更新思路

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 我们知道,在打包Android App之前,我们需要先通过HX生成打包资源.如果是通过cli创建的项目,则通过以下命令生成打包资源: ya ...

  4. 从静态到动态化,Python数据可视化中的Matplotlib和Seaborn

    本文分享自华为云社区<Python数据可视化大揭秘:Matplotlib和Seaborn高效应用指南>,作者: 柠檬味拥抱. 安装Matplotlib和Seaborn 首先,确保你已经安装 ...

  5. FPGA 原语之一位全加器

    FPGA原语之一位全加器 1.实验原理 一位全加器,三个输入,两个输出.进位输出Cout=AB+BC+CA,本位输出S=A异或B异或C.实验中采用三个与门.一个三输入或门(另外一个是两个或门,功能一致 ...

  6. KingbaseES 等待事件之LWLock lock_manager

    背景 相信我们不止一次遇到过一个等待事件:LWLock lock_manager.下面我们聊聊这个等待事件的含义,产生原因,以及解决方法. 等待事件含义 当数据库维护共享锁的内存区域以在无法实现以fa ...

  7. 【已解决】linux---bash: 无法为立即文档创建临时文件: 设备上没有空间

    /dev/mapper/centos-root   17G   17G   48K  100% / 参考:https://www.cnblogs.com/rainbow-1/p/15391407.ht ...

  8. C# 金额的 动态分配算法

    /// <summary> /// 金额的 动态分配算法 /// </summary> public static void FindCosts() { // 定义费用明细列表 ...

  9. GraphQl in ASP.NET Core

    GraphQl in ASP.NET Core https://graphql.cn/ https://graphql-dotnet.github.io/docs/getting-started/ar ...

  10. [Linux]将ArchLinux安装到U盘

    将ArchLinux安装到U盘 几个月前入门Arch的时候上网搜了不少安装教程,同时由于当时硬盘空间不太够于是就打算安装到U盘上,也因此踩了不少坑. 但128G的U盘都拿来装Arch的话未免也太浪费了 ...