判断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 ; 不要让代码再进行执行了。

目录
相关文章
|
6月前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
72 5
|
5月前
|
UED
判断iframe链接页面 服务器状态
判断iframe链接页面 服务器状态
144 58
|
4月前
|
IDE 网络安全 开发工具
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。
本文介绍了如何使用VS Code通过Remote-SSH插件连接远程服务器进行代码开发,并与PyCharm进行了对比。作者认为VS Code在连接和配置多个服务器时更为简单,推荐使用VS Code。文章详细说明了VS Code的安装、远程插件安装、SSH配置文件编写、服务器连接以及如何在连接后切换文件夹。此外,还提供了使用密钥进行免密登录的方法和解决权限问题的步骤。
1829 0
IDE之vscode:连接远程服务器代码(亲测OK),与pycharm链接服务器做对比(亲自使用过了),打开文件夹后切换文件夹。
|
5月前
|
SQL 安全 Oracle
SQL Server 链接服务器(Linked Servers)
【9月更文挑战第12天】SQL Server 的链接服务器功能强大,可让你在一个实例中访问其他数据源,包括其他 SQL Server 实例、Oracle 数据库等。它支持数据集成、分布式查询和数据同步,无需复制数据。创建链接服务器需在 SQL Server Management Studio 中进行,并配置名称、类型及安全性。使用时需注意权限、性能和安全性问题,确保系统稳定和数据安全。
243 0
|
2天前
|
存储 机器学习/深度学习 人工智能
2025年阿里云GPU服务器租用价格、选型策略与应用场景详解
随着AI与高性能计算需求的增长,阿里云提供了多种GPU实例,如NVIDIA V100、A10、T4等,适配不同场景。2025年重点实例中,V100实例GN6v单月3830元起,适合大规模训练;A10实例GN7i单月3213.99元起,适用于混合负载。计费模式有按量付费和包年包月,后者成本更低。针对AI训练、图形渲染及轻量级推理等场景,推荐不同配置以优化成本和性能。阿里云还提供抢占式实例、ESSD云盘等资源优化策略,支持eRDMA网络加速和倚天ARM架构,助力企业在2025年实现智能计算的效率与成本最优平衡。 (该简介为原文内容的高度概括,符合要求的字符限制。)
|
3天前
|
存储 弹性计算 人工智能
2025年阿里云企业云服务器ECS选购与配置全攻略
本文介绍了阿里云服务器的核心配置选择方法论,涵盖算力需求分析、网络与存储设计、地域部署策略三大维度。针对不同业务场景,如初创企业官网和AI模型训练平台,提供了具体配置方案。同时,详细讲解了购买操作指南及长期运维优化建议,帮助用户快速实现业务上云并确保高效运行。访问阿里云官方资源聚合平台可获取更多最新产品动态和技术支持。
|
6天前
|
弹性计算 JavaScript 前端开发
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
Node.js 是一种高效的 JavaScript 运行环境,基于 Chrome V8 引擎,支持在服务器端运行 JavaScript 代码。本文介绍如何在阿里云上一键部署 Node.js 环境,无需繁琐配置,轻松上手。前提条件包括 ECS 实例运行中且操作系统为 CentOS、Ubuntu 等。功能特点为一键安装和稳定性好,支持常用 LTS 版本。安装步骤简单:登录阿里云控制台,选择扩展程序管理页面,安装 Node.js 扩展,选择实例和版本,等待创建完成并验证安装成功。通过阿里云的公共扩展,初学者和经验丰富的开发者都能快速进入开发状态,开启高效开发之旅。
|
1月前
|
弹性计算 数据挖掘 应用服务中间件
阿里云轻量应用服务器68元与云服务器99元和199元区别及选择参考
目前阿里云有三款特惠云服务器,第一款轻量云服务器2核2G68元一年,第二款经济型云服务器2核2G3M带宽99元1年,第三款通用算力型2核4G5M带宽199元一年。有的新手用户并不是很清楚他们之间的区别,因此不知道如何选择。本文来介绍一下它们之间的区别以及选择参考。
519 87
|
8天前
|
弹性计算 JavaScript 前端开发
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
|
2天前
|
存储 人工智能 弹性计算
2025年阿里云企业高性能云服务器租用价格与选型详解
随着企业数字化转型,阿里云于2025年推出多款高性能云服务器实例,涵盖计算、通用和内存密集型场景。文章分析了企业选择云服务器的核心要点,包括明确业务需求(如计算密集型任务推荐计算型实例)、性能与架构升级(如第八代实例性能提升20%),以及第九代实例支持AI等高算力需求。同时提供了配置价格参考和成本优化策略,助力企业实现效率与成本的最优平衡。

热门文章

最新文章