Javascript：Ajax 和显示/隐藏 Div

Question

我使用 Ajax 请求网页的一些信息，并在 Ajax 运行时弹出一个“请稍候”窗口。

这在 Mozilla 和 Chrome 中工作正常，但“请稍候”窗口在 IE 中不会显示。

这是我的代码：

function openWaitMessage()
{
   var wid = 300;
   var hgt = 200;
   var left = 0;
   var top = 0;

var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = document.body.clientHeight;
}

var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
}

left = scrOfX + (myWidth - wid)/2;
top =  scrOfY + (myHeight - hgt)/2;


var div = document.getElementById("pleaseWait");
div.style.display = '';
div.style.visibility = 'visible';
div.style.left = left;
div.style.top = top;

 } // openWaitMessage()

   function getInformation { 
       openWaitMessage();

    //////////////////////////////////////////////////////////////////////
    // create a new ListRequest object and add the 'category' parameter //
    //////////////////////////////////////////////////////////////////////
    var listRequest = new ListRequest("lotatt-request");

    /////////////////////////////////////
    // create a new AjaxRequest object //
    /////////////////////////////////////
    var ajaxRequest = new AjaxRequest("/MyProject/services");

    /////////////////////////////////////////
    // send the list request to the server //
    /////////////////////////////////////////
    sendListRequest(ajaxRequest,listRequest,fillLotAtt,ajaxError); 
   }

HTML：

   <div id="pleaseWait" style=" display: none; visibility: hidden;  position:absolute; left:0px; top:0px; width:300px; height:200px; z-Index:999;">
    <table border="1" cellspacing="0" cellpadding="0" width="100%">
        <tr class="dialogHeaderCell" >
            <td>
                Please Wait...
            </td>
        </tr>
        <tr>
            <td align="center">
                <img src="please_wait.gif" alt="Loading...Please wait.">
            </td>
        </tr>
    </table>
</div>

  <input type="button" name="DisplayInfo" class="secondary_button" value="Display Information " onClick="getInformation ()"/>

请帮忙，先谢谢了

Answer 1

Sprenna，正如您所提到的，您还可以选择使用 jQuery。如果您想深入阅读，请看看这三本免费的 jQuery 书籍。

如果您想要更简短的介绍，请查看此 jQuery 教程列表。

然而，简而言之，使用 jQuery，您可以使用以下代码来显示/隐藏 HTML 元素：

$("#pleaseWait").show();
// or
$("#pleaseWait").hide();

#是一个ID选择器。因此#foo选择一个其 ID 为 的元素foo。

然后您可以使用 jQueryoffset函数相对于文档定位元素。

最后，您可以使用 jQuery宽度和高度函数来设置所需元素的大小。

我还建议您阅读jQuery 创建者的Pro JavaScript Techniques 。它可以显着提高您的 JavaScript 知识和技能。