判断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}
      }
 })
},

其中注意:

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

if(elem.URL == this.ifram_src){
   
         this.fullscreenLoading_all = false;
         return false;
   }

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

目录
相关文章
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
208 5
|
UED
判断iframe链接页面 服务器状态
判断iframe链接页面 服务器状态
264 58
|
IDE 网络安全 开发工具
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。
本文介绍了如何使用VS Code通过Remote-SSH插件连接远程服务器进行代码开发,并与PyCharm进行了对比。作者认为VS Code在连接和配置多个服务器时更为简单,推荐使用VS Code。文章详细说明了VS Code的安装、远程插件安装、SSH配置文件编写、服务器连接以及如何在连接后切换文件夹。此外,还提供了使用密钥进行免密登录的方法和解决权限问题的步骤。
6649 0
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。
|
SQL 安全 Oracle
SQL Server 链接服务器(Linked Servers)
【9月更文挑战第12天】SQL Server 的链接服务器功能强大,可让你在一个实例中访问其他数据源,包括其他 SQL Server 实例、Oracle 数据库等。它支持数据集成、分布式查询和数据同步,无需复制数据。创建链接服务器需在 SQL Server Management Studio 中进行,并配置名称、类型及安全性。使用时需注意权限、性能和安全性问题,确保系统稳定和数据安全。
793 0
|
3月前
|
弹性计算 运维 安全
阿里云轻量应用服务器与云服务器ECS啥区别?新手帮助教程
阿里云轻量应用服务器适合个人开发者搭建博客、测试环境等低流量场景,操作简单、成本低;ECS适用于企业级高负载业务,功能强大、灵活可扩展。二者在性能、网络、镜像及运维管理上差异显著,用户应根据实际需求选择。
315 10
|
3月前
|
运维 安全 Ubuntu
阿里云渠道商:服务器操作系统怎么选?
阿里云提供丰富操作系统镜像,涵盖Windows与主流Linux发行版。选型需综合技术兼容性、运维成本、安全稳定等因素。推荐Alibaba Cloud Linux、Ubuntu等用于Web与容器场景,Windows Server支撑.NET应用。建议优先选用LTS版本并进行测试验证,通过标准化镜像管理提升部署效率与一致性。
|
3月前
|
弹性计算 ice
阿里云4核8g服务器多少钱一年?1个月和1小时价格,省钱购买方法分享
阿里云4核8G服务器价格因实例类型而异,经济型e实例约159元/月,计算型c9i约371元/月,按小时计费最低0.45元。实际购买享折扣,1年最高可省至1578元,附主流ECS实例及CPU型号参考。
471 8
|
3月前
|
存储 监控 安全
阿里云渠道商:云服务器价格有什么变动?
阿里云带宽与存储费用呈基础资源降价、增值服务差异化趋势。企业应结合业务特点,通过阶梯计价、智能分层、弹性带宽等策略优化成本,借助云监控与预算预警机制,实现高效、可控的云资源管理。
|
3月前
|
弹性计算 运维 安全
区别及选择指南:阿里云轻量应用服务器与ECS云服务器有什么区别?
阿里云轻量应用服务器适合个人开发者、学生搭建博客、测试环境,易用且性价比高;ECS功能更强大,适合企业级应用如大数据、高流量网站。根据需求选择:轻量入门首选,ECS专业之选。
304 2
|
3月前
|
弹性计算 ice
阿里云4核8G云服务器配置价格:热门ECS实例及CPU处理器型号说明
阿里云2025年4核8G服务器配置价格汇总,涵盖经济型e实例、计算型c9i等热门ECS实例,CPU含Intel Xeon及AMD EPYC系列,月费159元起,年付低至1578元,按小时计费0.45元起,实际购买享折扣优惠。
699 1