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

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

项目要求:
通过按钮点击事件,使用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;
}
一定要使用returan false ; 不要让代码再进行执行了。

目录
打赏
570
58
58
3
171
分享
相关文章
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
86 5
|
6月前
|
UED
判断iframe链接页面 服务器状态
【10月更文挑战第6天】
52 1
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。
本文介绍了如何使用VS Code通过Remote-SSH插件连接远程服务器进行代码开发,并与PyCharm进行了对比。作者认为VS Code在连接和配置多个服务器时更为简单,推荐使用VS Code。文章详细说明了VS Code的安装、远程插件安装、SSH配置文件编写、服务器连接以及如何在连接后切换文件夹。此外,还提供了使用密钥进行免密登录的方法和解决权限问题的步骤。
2835 0
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。
SQL Server 链接服务器(Linked Servers)
【9月更文挑战第12天】SQL Server 的链接服务器功能强大,可让你在一个实例中访问其他数据源,包括其他 SQL Server 实例、Oracle 数据库等。它支持数据集成、分布式查询和数据同步,无需复制数据。创建链接服务器需在 SQL Server Management Studio 中进行,并配置名称、类型及安全性。使用时需注意权限、性能和安全性问题,确保系统稳定和数据安全。
334 0
云服务器 ECS产品使用问题之如何进行远程链接
云服务器ECS(Elastic Compute Service)是各大云服务商阿里云提供的一种基础云计算服务,它允许用户租用云端计算资源来部署和运行各种应用程序。以下是一个关于如何使用ECS产品的综合指南。
嗯… 无法访问此页面43.139.210.211 花了太长时间进行响应,无法连接宝塔,是服务器内的宝塔面板开启了ssl的验证,但是没有绑定证书,所以被拦截,关闭宝塔面板的ssl访问认证恢复正常
嗯… 无法访问此页面43.139.210.211 花了太长时间进行响应,无法连接宝塔,是服务器内的宝塔面板开启了ssl的验证,但是没有绑定证书,所以被拦截,关闭宝塔面板的ssl访问认证恢复正常
阿里云特惠云服务器99元与199元配置与性能和适用场景解析:高性价比之选
2025年,阿里云长效特惠活动继续推出两款极具吸引力的特惠云服务器套餐:99元1年的经济型e实例2核2G云服务器和199元1年的通用算力型u1实例2核4G云服务器。这两款云服务器不仅价格亲民,而且性能稳定可靠,为入门级用户和普通企业级用户提供了理想的选择。本文将对这两款云服务器进行深度剖析,包括配置介绍、实例规格、使用场景、性能表现以及购买策略等方面,帮助用户更好地了解这两款云服务器,以供参考和选择。
DeepSeek服务器繁忙解决方法:使用阿里云一键部署DeepSeek个人网站!
通过阿里云一键部署DeepSeek个人网站,解决服务器繁忙问题。学生用户可领取300元代金券实现0成本部署,普通用户则可用99元/年的服务器。教程涵盖从选择套餐、设置密码到获取百炼API-KEY的全流程,助您快速搭建专属大模型主页,体验DeepSeek、Qwen-max、Llama等多款模型,无需代码,最快5分钟完成部署。支持绑定个人域名,共享亲友使用,日均成本仅约1元。
84 10
【阿里云】控制台使用指南:从创建ECS到系统诊断测评
本文介绍了如何通过阿里云获取ECS云服务器并进行操作系统配置与组件安装,以实现高效的资源管理和系统监控。阿里云凭借强大的基础设施和丰富的服务成为用户首选。文中详细描述了获取ECS、RAM授权、开通操作系统控制台及组件安装的步骤,并展示了如何利用控制台实时监控性能指标、诊断系统问题及优化性能。特别针对idle进程进行了深入分析,提出了优化建议。最后,建议定期进行系统健康检查,并希望阿里云能推出更友好的低成本套餐,满足学生等群体的需求。
92 17
【阿里云】控制台使用指南:从创建ECS到系统诊断测评
玩转云服务器——阿里云操作系统控制台体验测评
在云服务器日益普及的背景下,运维人员对操作系统管理工具的要求不断提高。我们需要一款既能直观展示系统状态,又能智能诊断问题,提供专业指导的控制台。阿里云操作系统管理平台正是基于API、SDK、CLI等多种管理方式,致力于提升操作效率,为用户带来全新的系统运维体验。阿里云操作系统控制台凭借便捷易用的设计和高效的管理功能,成为云服务器运维的强力助手。本次测评基于真实体验截图,对其整体表现进行了深入探索。
92 33

热门文章

最新文章