Ajax 页面加载器在 Chrome 中不起作用，并在页面加载后继续加载

Question

下面是我的页面加载器代码，它在 Chrome 中存在问题，即使在页面完全加载后它也会继续旋转。

下面是用于页面加载器的函数脚本：

<script>
function handleStateChange() {
    //alert("Changed"); 
    switch (document.getElementById('MainFrmid').readyState) {
        case "complete":
            toggleLoading(false);
            break;
        case "loading":
        case "interactive":
        case "uninitialized":
            toggleLoading(true);
            break;
        default:
            toggleLoading(false);
            break;
    }
}

function setupLoader() {
    var objIFrame = window.document.getElementById("MainFrmid");
    if (objIFrame.addEventListener) {
        objIFrame.addEventListener('onreadystatechange', handleStateChange, false);
    } else if (objIFrame.attachEvent) {
        objIFrame.attachEvent('onreadystatechange', handleStateChange);
    } else {
        objIFrame.onclose = temp();
    }
}

function toggleLoading(isVisible) {
    objProgress = document.getElementById("divLoading");
    var objIFrame = window.document.getElementById("MainFrmid")
    if (isVisible) {
        objProgress.style.height = objIFrame.height;
        objProgress.style.width = objIFrame.width;
        //objProgress.style.top = objIFrame.style.top;
        //objProgress.style.left = objIFrame.style.left;

        //setTimeout(function () {
            //objIFrame.attr("style", "display:none;");
            //objIFrame.addClass("modal");
            //$('divLoading').append(modal);
            //var loading = $(".loading");
            //loading.show();
            //var top = Math.max(jQuery(window).height() / 2 - objProgress.offsetHeight / 2, 0);
            //var left = Math.max(jQuery(window).width() / 2 - objProgress.offsetWidth / 2, 0);
            //loading.css({ top: top, left: left });
            //objProgress.style.top = top;
            //objProgress.style.left = left;
        //}, 200);
        objProgress.style.display = "block";
    }
    else {
        //objIFrame.removeClass("modal");
        //objIFrame.attr("style", "display:block;");
        objProgress.style.display = "none";
    }
}
<script/>

下面是我为页面加载器创建了一个 DIV 标记的表格：

<table> 
    <tr>
        <td style="height:81%; width:100%"  valign="top" cellSpacing=0 cellPadding=0>

            <iframe  id="MainFrmid" style=" height:521px"  width="100%" height="100%" name="MainFrm" runat="server"  language="javascript"  frameborder="0"  scrolling="yes"></iframe>
            <script language="javascript" type="text/javascript">
                setupLoader();
            </script>
            <div id="divLoading" align="center" style="width:100pt;height:100pt;   display:none;"">
                <div style="position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; overflow: hidden;padding: 0; margin: 0; background-color: #F0F0F0; filter: alpha(opacity=50);opacity: 0.5; z-index: 100000;">
                </div>
                <div style="position: fixed; top: 40%; left: 40%; z-index: 100001; background-color: #FFFFFF; border: 0px solid #000000;background-repeat: no-repeat; background-position: center; text-align: center;">
                    <table>
                        <tr>
                            <td>
                                <img src="Images/ajax-loader.gif" alt="" />
                            </td>
                            <td>
                                <asp:Label CssClass="desc_cell" BackColor="Transparent" ID="lblret" runat="server" Text="Loading. Please wait..."></asp:Label>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </td>
    </tr>
</table>

Answer 1

In all your java script functions please use try/catch blocks which will      
help you in debugging and fixing the issue:

for example:

 function handleStateChange() {
 try{
            //alert("Changed"); 
            switch (document.getElementById('MainFrmid').readyState) {
                case "complete":
                    toggleLoading(false);
                    break;
                case "loading":
                case "interactive":
                case "uninitialized":
                    toggleLoading(true);
                    break;
                default:
                    toggleLoading(false);
                    break;
            }
}
catch(Exception){
alert(Exception.message);}
}

}

在生产环境中使用： console.log(Exception.message);