由于在jsp页面要实现较长等待时间功能的时候,对于用户,此时IE中是空白页。
如何让处理过程中出现等待的提示呢?
在网上找了好多都不是很满意,谢谢大家!

解决方案 »

  1.   

           function isxhtml()
    {
    var h1 = document.body.clientHeight;
    var h2 = document.documentElement.clientHeight;
    var isXhtml = (h2>=h1&&h2!=0)?true:false;
    return isXhtml
       }
           
           function getBodySize(){ 
    var bodySize = []; 
    var elementSize = []; 

    if (isxhtml())
    {

    elementSize[0] = "100%" ;
    elementSize[1] = ((Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight))-400)+"px";
    elementSize[2] = ((Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight))-350)+"px";

    return  elementSize;
    }
    else{
    bodySize[0] = (Math.max(document.body.scrollWidth,document.body.clientWidth))+"px";
    //如果滚动条的宽度大于页面的宽度,取得滚动条的宽度,否则取页面宽度 
    bodySize[1] = ((Math.max(document.body.scrollHeight,document.body.clientHeight))-400)+"px";
    bodySize[2] = ((Math.max(document.body.scrollHeight,document.body.clientHeight))-350)+"px";
    //bodySize[2] = (document.body.scrollTop>document.body.offsetTop)?document.body.scrollTop:document.body.offsetTop;
    return bodySize; 
    }


    }
           
       
       function sAlert(txt){  
     
    //var eSrc=(document.all)?window.event.srcElement:arguments[1];
    var shield = document.createElement("DIV");
    shield.id = "shield";
    shield.style.position = "absolute";
    shield.style.left = "0px";
    shield.style.top = "0px";
      
    shield.style.width = getBodySize()[0];
    shield.style.height = getBodySize()[1]; alert(txt);
    shield.style.background = "#333";
    shield.style.textAlign = "center"; 
    shield.style.zIndex = "10000";
    shield.style.filter = "alpha(opacity=80)";
    shield.style.opacity = 80;
    var alertFram = document.createElement("DIV");
    alertFram.id="alertFram";
    alertFram.style.position = "absolute";
    alertFram.style.left = "55%"; 
    alertFram.style.top = getBodySize()[2];
    alertFram.style.marginLeft = "-225px" ; 
    //alertFram.style.marginBottom = -75+ getBodySize()[2]+"px";
    alertFram.style.width = "300px";
    alertFram.style.height = "60px";
    alertFram.style.background = "#fff";
    alertFram.style.textAlign = "center";
    alertFram.style.border="1px solid #9999CC";   //#C4E6FF
    alertFram.style.zIndex = "10001";   
    strHtml  = "<div style=\"text-align:left;font-size:12px;padding:5px;background:url('/SXPortal/images/loadbg.gif') repeat-x \">";
    strHtml += "</div>"; //strHtml += "请稍候...</div>"
    strHtml += " <div style=font-size:12px; >"+"<img src='/SXPortal/images/loading.gif' align=absmiddle hspace=8 vspace=4>"+txt+"</div>";


    alertFram.innerHTML = strHtml;
    document.body.appendChild(alertFram);
    document.body.appendChild(shield);
    this.setOpacity = function(obj,opacity){
    if(opacity>=1)opacity=opacity/100;
    try{ obj.style.opacity=opacity; }catch(e){}
    try{ 
    if(obj.filters.length>0&&obj.filters("alpha")){
    obj.filters("alpha").opacity=opacity*100;
    }else{
    obj.style.filter="alpha(opacity=\""+(opacity*100)+"\")";
    }
    }catch(e){}
    }
    var c = 0 ;

    setOpacity(shield,c);


    document.body.onselectstart = function(){return false;}
    document.body.oncontextmenu = function(){return false;}
    }将上面保存 sAlert.js 文件在 test.html里面调用<body>
    script type="text/javascript">
        
          sAlert("正在处理中,请稍侯......");  //里面的提示语可以更改
    </script> 
    </body>
      

  2.   

    至于背景颜色不符合,你在具体看sAlert.js 里面的颜色设置
      

  3.   

    <html>
    <head>
    <script> 
    //加载完成后隐藏提示层  
    window.onload = function(){     
       document.all.ly.style.display="none";   
       document.all.Layer2.style.display="none";        
    }   
    </script>
    </head>
    <body>
    <div id="ly" style="position:absolute;top:0px;filter:alpha(opacity=60);background-color:#777;z-index:2;left:0px;">
        </div>
        <!--          浮层框架开始         -->
        <div id="Layer2" align="center" style="position: absolute; z-index: 3; left: expression((document.body.offsetWidth-540)/2); top: expression((document.body.offsetHeight-170)/2);
             background-color: #fff" >
            <table width="540" border="0" cellpadding="0" cellspacing="0" style="border: 0    solid    #e7e3e7;
                 border-collapse: collapse">
                <tr>
                    <td style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px;
                         font-weight: bold; font-size: 14px;" height="27" valign="middle">
                         [&nbsp;提示信息&nbsp;]
                    </td>
                </tr>
                <tr>
                    <td height="130" align="center">
                        正在处理请稍等...
                    </td>
                </tr>
            </table>
        </div>
        <script>   
       document.all.ly.style.width=document.body.clientWidth;   
       document.all.ly.style.height=document.body.clientHeight;      
        </script>
        <!--          浮层框架结束         -->
        
        
        <input type="text" value="">
        页面内容.....
        <script>
        alert("加载完成之前.");
        </script>
        
    </body>
    </html>