思路:设置定时器一个,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. 从零搭建react+ts组件库(二)less模块化与svg引入配置

    在上一篇<从零搭建react+ts组件库(一)项目搭建与封装antd组件>介绍了使用webpack来搭建一个基于antd的组件库的基本框架,但是作为一个组件库,实际上还有很多的都还未引入, ...

  2. 三维模型3DTile格式轻量化压缩在移动智能终端应用方面的重要性分析

    三维模型3DTile格式轻量化压缩在移动智能终端应用方面的重要性分析 随着移动智能终端设备的不断发展和普及,如智能手机.平板电脑等,以及5G网络技术的推广应用,使得在这些设备上频繁使用三维地理空间数据 ...

  3. Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同?

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 开始之前 Composition API 可以说是Vue3的最大特点,那么为什么要推出Composition Api,解决了什么问题? 通 ...

  4. 记录--axios和loading不得不说的故事

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 loading的展示和取消可以说是每个前端对接口的时候都要关心的一个问题.这篇文章将要帮你解决的就是如何结合axios更加简洁的处理loa ...

  5. FastWiki(增强AI对话功能)企业级智能客服功能介绍

    知识库对话功能 什么是知识库对话? 我们需要找到AI的知识能力是有限的他们的知识都截止于他们训练数据的时间,你提问他们更新的数据的时候他们就会出现乱回复.而知识库则是利用Prompt给于AI更多的知识 ...

  6. KingbaseES V8R6集群运维案例之---sys_monitor.sh start启动动态库错误

    案例说明: 在KingbaseES V8R6集群部署了postgis后,执行sys_monitor.sh start启动集群时,出现动态库错误,如下图所示: 适用版本: KingbaseES V8R6 ...

  7. KingbaseES 复制冲突之锁类型冲突

    背景 昨天遇到客户现场的一个有关复制冲突的问题 备库报错:ERROR: canceling statement due to conflict with recovery,user was holdi ...

  8. 花了100块大洋搞懂 ipv6的用户如何访问ipv4 服务器

    大家好,今天蓝胖子花了100多块搞懂了 ipv6的用户如何访问ipv4 服务器,将收获与大家分享下. ipv4和ipv6的协议栈不同,这意味着,其对应的ip包的封装和解析不同,那么只支持ipv4的机器 ...

  9. 【Java】多线程之实现Runnable接口

    1 /** 2 * 3 */ 4 package com.raliable.chapter_0; 5 /** 6 * @author : Administrator 7 * @date :2022年4 ...

  10. 第十三届蓝桥杯大赛软件赛省赛【Java 大学B 组】试题C: 字符统计

    1 import java.util.Scanner; 2 3 public class Main { 4 public static void main(String args[]) { 5 Sca ...