思路:设置定时器一个,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. 三维模型3DTile格式轻量化的跨平台兼容性问题分析

    三维模型3DTile格式轻量化的跨平台兼容性问题分析 三维模型3DTile格式是一种开放的.高效的和互操作的空间信息数据格式.然而,它作为一种新兴的技术,其在轻量化与跨平台兼容性方面存在着一些问题. ...

  2. 基于pytorch的图像训练识别

    一.准备数据集 分为测试集和训练集,文件如下排放 二.开始识别 数据集准备好后,即可导入到模型开始训练,运行下列代码 import time from torch.utils.tensorboard ...

  3. linux学习指令与现有环境解决问题笔记

    linux学习指令与现有环境笔记 注意:我将pytorch和cuda安装在了pytorch这个虚拟环境中 pytorch安装及注意问题 注意版本对应,稳定版2.0.1对应cuda11.7,别按错了 按 ...

  4. Oracle 触发器迁移至KingbaseES常见的问题

    oracle数据库的触发器迁移到KingbaseES的时候经常会出现一下两类错误: 1.SQL 错误 [42809]: 错误: "xxxxxxxx" 是一个视图.Detail: 视 ...

  5. Java中split的用法及一个金典入坑题目

    split() 方法根据匹配给定的正则表达式来拆分字符串. 注意: . . $. | 和 * 等转义字符,必须得加 \\. 注意:多个分隔符,可以用 | 作为连字符. 语法 public String ...

  6. virtualbox安装windows10出现OOBE,卡在OOBE。

    参照 https://zhuanlan.zhihu.com/p/419237209 https://www.0z.gs/win/781.html 文档 https://learn.microsoft. ...

  7. 算法学习笔记【5】| ST表

    ST表 Part 1:ST表解决的问题是什么 ST 表可以用来解决RMQ(区间最值问题)等可重复贡献的问题. ST表基于倍增的思想来实现. Part 2:ST表的实现 ST表通过 O(nlog⁡n)& ...

  8. 【已解决】(MySQL)SQL注入绕过登陆验证直接登陆---用户名输入框注释sql密码语句段

    今天学习了一种sql注入方法,通过注释密码验证部分的sql语句. 这是登陆界面 在用户名如果输入 15284206891' and 1=1 # 密码可以随意输入即可登陆成功 原理如下: 在sql可视化 ...

  9. C# 继承、多态性、抽象和接口详解:从入门到精通

    C# 继承 在 C# 中,可以将字段和方法从一个类继承到另一个类.我们将"继承概念"分为两类: 派生类(子类) - 从另一个类继承的类 基类(父类) - 被继承的类 要从一个类继承 ...

  10. Docker学习路线13:部署容器

    部署容器是使用Docker和容器化管理应用程序更高效.易于扩展和确保跨环境一致性性能的关键步骤.本主题将为您概述如何部署Docker容器以创建和运行应用程序. 概述 Docker容器是轻量级.可移植且 ...