如何在web上实现等待提示。

最新推荐文章于 2022-06-23 18:04:04 发布
最新推荐文章于 2022-06-23 18:04:04 发布
阅读量1.4k 收藏
点赞数
分类专栏： JAVA程序设计 文章标签： web string layer javascript iframe function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hellenlong/article/details/282661
版权

由于某个jsp页面要实现较长等待时间功能的时候，对于用户，此时IE中是空白页。

如何让处理过程中出现等待的提示，我把自己的解决思路奉献给大家。
创建一个等待页面，
包含两个层layer1,layer2.layer1出现等待提示，layer2 包含iframe,利用iframe调用你那个长时间的jsp。开始时layer2隐藏，layer1显示。

等jsp处理结束后，利用

<script language="javascript">
  if(parent.layer3.style.display!="block")
  {
   parent.layer1.style.display="none";
   parent.layer2.style.display="block";
  }

把提示的哪个层隐藏，自己的层显示。


下面为我的等待页代码：

<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
机动车统计
</title>
</head>
<style type="text/css">
<!--
body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
}
-->
</style>
<body bgcolor="#C0C0C0">
<%
  String sBeginDate=request.getParameter("startDate");
  String sEndDate=request.getParameter("endDate");
  String sBeginGLBM=request.getParameter("startGLBM");
  String IsChk=(String)request.getParameter("IsChk");
  String sPreStatisticYear=(String)request.getParameter("preStatisticYear");
  String sStatisticYear=(String)request.getParameter("StatisticYear");
  String sEndGLBM=request.getParameter("endGLBM");
  String strUrl=request.getParameter("url"); 
  String strTj = strUrl + "?startDate=" + sBeginDate+"&endDate="+ sEndDate + "&IsChk="+ IsChk +
    "&preStatisticYear="+ sPreStatisticYear+"&StatisticYear="+sStatisticYear+"&startGLBM="+sBeginGLBM+"&endGLBM="+sEndGLBM; 
  %>
<div style="position: absolute; width: 100%; height: 100%; z-index: 1" id="layer1">
<p align="center">　</p>
<p align="center">　</p>
<table align="center"><tr><td>
<div style="font-size:8pt;padding:2px;border:solid black 1px">
<span id="progress1">&nbsp; &nbsp;</span>
<span id="progress2">&nbsp; &nbsp;</span>
<span id="progress3">&nbsp; &nbsp;</span>
<span id="progress4">&nbsp; &nbsp;</span>
<span id="progress5">&nbsp; &nbsp;</span>
<span id="progress6">&nbsp; &nbsp;</span>
<span id="progress7">&nbsp; &nbsp;</span>
<span id="progress8">&nbsp; &nbsp;</span>
<span id="progress9">&nbsp; &nbsp;</span>
</div>
</td></tr></table>
<script language="javascript">
var progressEnd = 9;  // set to number of progress <span>'s.
var progressColor = 'blue'; // set to progress bar color
var progressInterval = 1000; // set to time between updates (milli-seconds)

var progressAt = progressEnd;
var progressTimer;
function progress_clear() {
 for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent';
 progressAt = 0;
}
function progress_update() {
 progressAt++;
 if (progressAt > progressEnd) progress_clear();
 else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor;
 progressTimer = setTimeout('progress_update()',progressInterval);
}
function progress_stop() {
 clearTimeout(progressTimer);
 progress_clear();
}
progress_update();  // start progress bar
</script>

<p align="center"><b><font size="4" face="黑体">处理数据中，请稍后。。。。。。。</font></b></p>
</div>
<div style="position: absolute; width: 100%; height: 100%; z-index: 1" id="layer2">
 <iframe name="I2" marginwidth="1" marginheight="1" height="100%" width="100%"  src="<%=strTj%> ">
 浏览器不支持嵌入式框架，或被配置为不显示嵌入式框架。</iframe></div>
<div style="position: absolute; width: 100%; height: 100%; z-index: 1" id="layer3">
<p align="center">　</p>
<p align="center">　</p>
<p align="center">　</p>
<p align="center"><b><font size="4" face="黑体" color="blue">处 理 数 据 出 错！</font></b></p>
<p align="center"><textarea rows="15" name="S1" cols="53"></textarea></p>
<p align="center"><input type="button" value=" 关 闭 " name="B3" οnclick="window.close()"></p>
</div>

<script language="javascript">
  layer2.style.display="none";
  layer3.style.display="none";
</script>
</body>
</html>

hellenlong
关注
专栏目录
前端Vue、H5、Web、Html等待页面的快速显示以及代码参考
mt23
09-28 1324
目录前言目标实现原理加载页代码(理论上手机端和PC端显示友好)vue加载完毕后隐藏加载页h5效果PC效果 前言 我们在做前端开发时，用户的网络情况以及服务器的网络负载是有限度的，因此为了有更好的用户体验，我们需要尽可能的早显示出等待界面，当然有进度条更好。 目标 用户访问Html页面时，用最快的速度先返回加载页，然后当所有的js、css等框架资源加载完毕后在显示主内容 实现原理 我们基于vue框架开发时，有个html模板页，我们将所有的加载页需要的js、div、css放在html中，并且在vue还
HTML js等待框
11-05
heml js等待框，显示，关闭，js延迟执行
web页面加载等待页面
12-17
该资源是web页面加载等待页面的一个模板，非常实用，页面很大众化，大家快来下载吧！^_^
web页面操作-等待
m0_58988903的博客
04-15 394
1、强制等待 time.sleep(5) 2、智能等待-隐形等待（不稳定） 每个会话（浏览器打开到quit关闭进程，会有一个sessionid）里开头调用一次就够了，后面会智能调用，相当于全局 driver.implicitly_wait(10) 条件是 ：1、1个元素被找到（元素存在）2、1条命令执行完成 3、智能等待-显性等待（常用） 针对具体的场景 ：条件+等待 等待：WebDriverWait类，等待上限15s，默认每隔0.5秒轮询条件是否达成 WebDriverWait(driver,15,0.
css和jquery实现页面加载前的等待界面
10-27
一般我们进入网站后需要等待数据加载后才完整显示，如果加入一个等待界面，等数据加载完毕后再消失等待界面那用户体验就会好点
关于编写web代码时提示语
zjwstz的专栏
07-28 1043
当我们在编写一个程序时，如果写的有xx.xml类型的文件时，可能我们
WEB开发中的提示
Donny的专栏
03-05 557
1.当后台处理时间较长时，可在提交前显示一个层提示 ： function submitXform() { var params = {width:300,height:60}; var layer = new Layer(params); layer.showStringLayer("正在检查并提交，请稍等..."); inputForm
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
10-19
ExtJs提供了Ext.Ajax.request方法来进行Ajax请求，但默认情况下，该方法不支持waitMsg属性，不像fp.form.submit方法提供了waitTitle和waitMsg属性来实现等待提示。为了解决这一限制，我们可以采用Ext.MessageBox的...
在Web关闭页面时发送Ajax请求的实现方法
10-17
通过以上讨论，我们可以看到，虽然在Web页面关闭时发送Ajax请求存在一定的困难，但通过一些技术手段是可以实现的。开发者可以根据实际的业务需求选择合适的方案来确保在用户关闭页面时，能够顺利地完成需要的操作。
Web应用中实现页面加载提示
03-01
在Web应用中，实现页面加载提示是提升用户体验的重要一环。它可以帮助用户了解页面加载进度，减少用户在等待过程中的不耐烦感。本话题主要围绕如何在HTML页面中创建一个加载提示，以及如何通过JavaScript控制其显示...
01_无刷新登录等待提示效果
07-15
在实现无刷新登录等待提示效果时，通常会用到以下知识点： 1. **Ajax（Asynchronous JavaScript and XML）**：Ajax是实现页面无刷新更新的核心技术。通过在后台与服务器异步通信，它可以在不重新加载整个网页的情况...
使用Ajax同步请求增加页面等待提示
weixin_30872789的博客
11-08 720
最近在做项目时，有一个需求是批量打印好多个合同，使用AJAX向后台传送数据，等待后台执行后，需要把生成之后的文件地址传送过来。 后台的处理时间比较长，根据合同的多少可能等待时间比较长，会达到10s左右，这个时候如果不加任何的提示，会导致用户因为没有看到是否执行而导致重复的操作，为了增加用户的体验感，，以及项目的完善性， 这个时候就需要增加一个等待页面进行提示。 我们先来看一个Ajax同...
请求接口增加加载提示框
Alice9969的博客
11-17 440
思路：请求接口的时候就把弹窗的HTML append 到body，延迟1.5s后还没有返回请求，则show出弹窗； 请求成功后删除弹窗HTML并清除清除定时器. var timeObj; //定时器对象； function addModalHtml() { var modalHtml = '<div id="LoadModal" class="hide modal"&g...
在页面加载完毕前显示等待提示
小飞的专栏
01-16 4733
通常在显示大量内容的网页时，由于页面内容比较大下载速度慢，若能给用户有个等待提示那岂不是快哉。在这里我分析一个案例，使用的javascript脚本在客户端显示等待提示。首先介绍window.onload函数：在整个页面文档在下载完成之后才触发该动作；在文档下载之前，该函数对象为空的。（本人理解）下面我们看看代码，之前id=doing 的层为显示状态，将遮盖了页面的整个区域，下载完成后触发隐藏i
页面提交时，显示“提交中”等待效果
weixin_34221276的博客
08-18 514
由于web开发的特点，有的时候提交数据量较大或者计算量较大的页面，需要等待很长时间，整个页面都刷新成白的啦，给人的感觉很不舒服，有的时候提交后，页面反应慢，用户以为没有提交成功，所以又提交一次，从而造成重复提交的情况，所以需要一种简单的“提交中”的特效，此时页面上的其他东西不允许点击，鼠标变成漏斗状，通过这可以避免重复提交。 实现方式,页面源代码： 页面源码 &lt;div id=...
通过JS弹出一个等待对话框(以及遮罩层)提示用户
J1271820107的博客
08-24 5273
/*显示提示信息 */ function load() { $("").css({ display: "block", width: "100%", height: $(window).height() }).appendTo("body"); $("").html("正在导入数据，请稍候。。。").appendTo("body").css({ display: "blo
python—web页面操作之3种等待方式（更新）
python全栈
11-08 2174
一、强制等待 在web自动化测试中，有时候为了提高效率，要避免使用强制等待 time.sleep(6) import time from selenium import webdriver driver=webdriver.Chrome() driver谷歌浏览器对象 driver.get('http://www.sogou.com') 打开搜狗浏览器 #定位到输入框，输入nba driver.find_element_by_xpath('//in
WEB自动化_强制等待与智能等待（显示等待、隐式等待）
lkr
06-23 1058
WEB自动化_强制等待与智能等待（显示等待、隐式等待）
网页加载等待提示框实现
这种简单的等待提示框适用于简单的Web应用程序，特别是在执行如数据加载、提交表单等可能需要一段时间的操作时。然而，对于更复杂的场景，可能需要更高级的进度条或动画效果来提供更好的用户体验，例如使用CSS3动画...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值