判断iframe链接页面 服务器状态

简介: 【10月更文挑战第6天】

项目要求:
通过按钮点击事件,使用iframe来显示不同的内容(跨域)。

问题:
iframe链接内容的服务器未开启的时候,页面显示404, 用户体验太差。

要求:
服务器未开启的时候,显示页面需要友好。

解决办法:通过计算iframe的加载内容的时间,做超时判断,如果5s内未加载完成,就认为此时iframe链接的服务器未开启; 未开启的情况下,给iframe上层覆盖个div(内容自定义)。这样既可实现界面友好。
风险: 存在。但是目前我未找到更好的办法去解决这个问题
代码如下:

btnclick(elem){
   
   this.fullscreenLoading_all = true;  //显示加载框
   this.ajaxError = false; 
   if(elem.URL == this.ifram_src){
   
         this.fullscreenLoading_all = false;
         return false;
   }
   //等到iframe数据加载出来之后再进行关闭加载框
   let elurl = elem.URL;
   this.ifram_src = elurl;
   this.$nextTick(() => {
   
      const iframeElem = this.$el.querySelector("#iframe_id");
     //5s iframe 无任何加载内容,就任务iframe加载的连接的服务器未连接
      this.serveTime = setTimeout(() => {
   
           this.ajaxError = true;
           this.fullscreenLoading_all = false;
      }, 5 * 1000);

      if(iframeElem.attachEvent){
   
         iframeElem.attachEvent('onload', () => {
   
             clearTimeout(this.serveTime);
             this.fullscreenLoading_all = false;
         })
      }else{
   
         iframeElem.onload = () => {
   
             clearTimeout(this.serveTime);
             this.fullscreenLoading_all = false;
         }
      }
 })
},
AI 代码解读

其中注意:

要有加载框: 如果没有加载框,在疯狂且快速点击按钮进行iframe 的url 属性值切换的时候,会导致代码中的setTimeout的时间缩短; 导致判断失误
点击同一个按钮,加载的iframe内容相同,iframe的 url 值不变的情况下,也就是下面这个判断:

if(elem.URL == this.ifram_src){
   
         this.fullscreenLoading_all = false;
         return false;
   }
AI 代码解读

一定要使用 returan false ; 不要让代码再进行执行了。

目录
相关文章
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
62 5
|
4月前
|
UED
判断iframe链接页面 服务器状态
判断iframe链接页面 服务器状态
125 58
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。
本文介绍了如何使用VS Code通过Remote-SSH插件连接远程服务器进行代码开发,并与PyCharm进行了对比。作者认为VS Code在连接和配置多个服务器时更为简单,推荐使用VS Code。文章详细说明了VS Code的安装、远程插件安装、SSH配置文件编写、服务器连接以及如何在连接后切换文件夹。此外,还提供了使用密钥进行免密登录的方法和解决权限问题的步骤。
1197 0
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。
SQL Server 链接服务器(Linked Servers)
【9月更文挑战第12天】SQL Server 的链接服务器功能强大,可让你在一个实例中访问其他数据源,包括其他 SQL Server 实例、Oracle 数据库等。它支持数据集成、分布式查询和数据同步,无需复制数据。创建链接服务器需在 SQL Server Management Studio 中进行,并配置名称、类型及安全性。使用时需注意权限、性能和安全性问题,确保系统稳定和数据安全。
167 0
阿里云GPU云服务器怎么样?产品优势、应用场景介绍与最新活动价格参考
阿里云GPU云服务器怎么样?阿里云GPU结合了GPU计算力与CPU计算力,主要应用于于深度学习、科学计算、图形可视化、视频处理多种应用场景,本文为您详细介绍阿里云GPU云服务器产品优势、应用场景以及最新活动价格。
阿里云GPU云服务器怎么样?产品优势、应用场景介绍与最新活动价格参考
阿里云弹性裸金属服务器是什么?产品规格及适用场景介绍
阿里云服务器ECS包括众多产品,其中弹性裸金属服务器(ECS Bare Metal Server)是一种可弹性伸缩的高性能计算服务,计算性能与传统物理机无差别,具有安全物理隔离的特点。分钟级的交付周期将提供给您实时的业务响应能力,助力您的核心业务飞速成长。本文为大家详细介绍弹性裸金属服务器的特点、优势以及与云服务器的对比等内容。
利用阿里云GPU加速服务器实现pdf转换为markdown格式
随着AI模型的发展,GPU需求日益增长,尤其是个人学习和研究。直接购置硬件成本高且更新快,建议选择阿里云等提供的GPU加速型服务器。
利用阿里云GPU加速服务器实现pdf转换为markdown格式
阿里云国际站注册教程:阿里云服务器安全设置
阿里云国际站注册教程:阿里云服务器安全设置 在云计算领域,阿里云是一个备受推崇的品牌,因其强大的技术支持和优质的服务而受到众多用户的青睐。本文将为您介绍阿里云国际站的注册过程,并重点讲解如何进行阿里云服务器的安全设置。
阿里云磐久服务器稳定性实践之路
阿里云服务器质量智能管理体系聚焦自研服务器硬件层面的极致优化,应对高并发交付、短稳定性周期、早问题发现和快修复四大挑战。通过“三个重构”(质量标准、开发流程、交付模式)、“六个归一”(架构、硬件、软件、测试、部件、制造)策略,实现芯片、整机和云同步发布,确保快速稳定上量。此外,全场景测试体系与智能预警、分析、修复系统协同工作,保障服务器在萌芽阶段发现问题并及时解决,提升整体质量水平。未来,阿里云将继续深化大数据驱动的质量管理,推动服务器行业硬件质量的持续进步。
阿里云轻量应用服务器、经济型e、通用算力型u1实例怎么选?区别及选择参考
在阿里云目前的活动中,价格比较优惠的云服务器有轻量应用服务器2核2G3M带宽68元1年,经济型e实例2核2G3M带宽99元1年,通用算力型u1实例2核4G5M带宽199元1年,这几个云服务器是用户关注度最高的。有的新手用户由于是初次使用阿里云服务器,对于轻量应用服务器、经济型e、通用算力型u1实例的相关性能并不是很清楚,本文为大家做个简单的介绍和对比,以供参考。

热门文章

最新文章