使用showModalDialog显示页面加载进度Web服务器教程 -免费技术教程下载中心

摘要：使用showModalDialog显示页面加载进度

一般的WEB应用中很少使用进度条的方式来提示用户“需要绍做等待”，但是有些时候，页面加载需要比较长的时间，用户看着空空的页面不知道发生了什么事情，所以就作了一个类似的进度条页面，在需要的时候调用。

首先，在调用的页面中使用如下的javascript脚本。

function openguagepage() {//使用 showModalDialog显示页面进度。

var returnvalue=window.showModalDialog("../所在路径../guage.htm","","dialogHeight:100px;dialogWidth:270px;center:yes;status:no;help:no;scroll:no;");

其次，在WEB项目的对应路径下新建一个html页面，取名为guage.htm，并把下面的代码copy到新建的页面中。

##############################

<html>
 <head>
  <title>保存数据...</title>
  <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
  <SCRIPT LANGUAGE="JavaScript">
  function Brush(i)
  {
   if(i<10)
   {
    var aa=eval("td"+i);
    aa.style.backgroundColor="blue";
    var num=i+1;
    setTimeout("Brush("+ num +")",100);
   }
   else
   {
    window.close();
   }
  }
  </SCRIPT>
 </head>
 <body onload="Brush(0);">
  <TABLE id="Table1" cellpadding="1" cellspacing="1" border="0" align="center" height="100%"
   width="100%">
   <TR class="editrow">
    <TD colspan="10" align="center"><FONT size="2" color="black">正在保存数据，请稍候…… </FONT>
    </TD>
   </TR>
   <TR class="editrow">
    <TD id="td0" bgcolor="silver">&nbsp;
    </TD>
    <TD id="td1" bgcolor="silver">&nbsp;
    </TD>
    <TD id="td2" bgcolor="silver">&nbsp;
    </TD>
    <TD id="td3" bgcolor="silver">&nbsp;
    </TD>
    <TD id="td4" bgcolor="silver">&nbsp;
    </TD>
    <TD id="td5" bgcolor="silver">&nbsp;
    </TD>
    <TD id="td6" bgcolor="silver">&nbsp;</TD>
    <TD id="td7" bgcolor="silver">&nbsp;
    </TD>
    <TD id="td8" bgcolor="silver">&nbsp;
    </TD>
    <TD id="td9" bgcolor="silver">&nbsp;
    </TD>
   </TR>
  </TABLE>
 </body>
</html>

##############################

后话，这种方法还没有办法没有办法精确的得到页面的加载时间，完全是通过估算的方式来确定运行时间的。本文也作抛砖引玉，希望大家有更好的办法。

敬候！