javascript - ローダーとのクロスブラウザ互換性

Question

IE 以外のブラウザでの Loader に問題があります。コードは次のようになります。以下は、マスター ページの Div タグ コードです。

<div id="pnlPopup" class="PrProgress" style="display: none;">
        <div id="innerPopup" class="PrContainer">
            <div class="PrHeader">
                Loading, please wait...</div>
            <div class="PrBody">
                <img src="Images/activity.gif" alt=" "/>
            </div>
        </div>
    </div>

以下のようにMasterpageのJavascript関数

$(document).ready(function () {

            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);        
            Sys.Application.add_load(applicationLoadHandler);
            Sys.Application.add_unload(applicationUnloadHandler);
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);
            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);
        });

次のように私のCSS

<style>
  .PrProgress
{
    display: block;
    position: absolute;
    padding: 2px 3px;
}
.PrContainer
{
    border: solid 1px #808080;
    border-width: 1px 0px;
}
.PrHeader
{
    background: url('Images/sprite.png') repeat-x 0px 0px;
    border-color: #808080 #808080 #ccc;
    border-style: solid;
    border-width: 0px 1px 1px;
    padding: 0px 10px;
    color: #000000;
    font-size: 9pt;
    font-weight: bold;
    line-height: 1.9;  
    white-space:nowrap;
    font-family: arial,helvetica,clean,sans-serif;
}
.PrBody
{   width: 220px;
    height: 19px;
    background-color: #f2f2f2;
    border-color: #808080;
    border-style: solid;
    border-width: 0px 1px;
    padding: 10px;
}
    </style>

以下は、Hedaer Tag に追加されたスクリプトです。

<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="js/pgbScript.js" type="text/javascript"></script>

以下はpgbScript.jsコードです

function applicationLoadHandler() {
    /// <summary>Raised after all scripts have been loaded and the objects in the application have been created and initialized.</summary>
};
function applicationUnloadHandler() {
    mainForm.CleanUp();
    mainForm = null;
    Sys.Application.dispose();
};
function beginRequestHandler() {
    /// <summary>Raised after an asynchronous postback is finished and control has been returned to the browser.</summary>
    mainForm.StartUpdating();
};
function endRequestHandler() {
    /// <summary>Raised before processing of an asynchronous postback starts and the postback request is sent to the server.</summary>
    // Set status bar text if any was passed through the hidden field on the form
    mainForm.EndUpdating()
};
var mainForm = 
{
    pnlPopup : "pnlPopup",
    innerPopup : "innerPopup",
    updating : false
};
mainForm.StartUpdating = function() {
    mainForm.updating = true;
    mainForm.AttachPopup();
    mainForm.onUpdating();
};
mainForm.EndUpdating = function() {
    mainForm.updating = false;
    mainForm.DetachPopup();
    mainForm.onUpdated();
};
mainForm.onUpdating = function(){
    if(mainForm.updating) {
        var pnlPopup = $get(this.pnlPopup);
        pnlPopup.style.display = '';         
        var docBounds = mainForm.GetClientBounds();
        var pnlPopupBounds = Sys.UI.DomElement.getBounds(pnlPopup);
//        var x = docBounds.x + Math.round(docBounds.width / 2) - Math.round(pnlPopupBounds.width / 2);
//        var y = docBounds.y + Math.round(docBounds.height / 2) - Math.round(pnlPopupBounds.height / 2);       
        var x = docBounds.x + Math.round(docBounds.width / 2) - pnlPopupBounds.width;
        var y = docBounds.y + Math.round(docBounds.height / 2) - pnlPopupBounds.height;
        Sys.UI.DomElement.setLocation(pnlPopup, x, y);
        //if(Sys.Browser.agent == Sys.Browser.InternetExplorer) {
            if(!pnlPopup.iFrame) {
                var iFrame = document.createElement("IFRAME");
                iFrame.scrolling= "no";
                iFrame.src = "nothing.txt";
                iFrame.frameBorder = 0;
                iFrame.style.display = "none";
                iFrame.style.position = "absolute";
                iFrame.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";
                iFrame.style.zIndex = 1;
                pnlPopup.parentNode.insertBefore(iFrame, pnlPopup);
                pnlPopup.iFrame = iFrame;
            } 
            pnlPopup.iFrame.style.width = docBounds.width + "px";
            pnlPopup.iFrame.style.height = docBounds.height + "px";
            pnlPopup.iFrame.style.left = docBounds.x + "px";
            pnlPopup.iFrame.style.top = docBounds.y + "px";
            pnlPopup.iFrame.style.display = "block";      
        //}  
    }           
}
mainForm.onUpdated = function() {
    // get the update progress div
    var pnlPopup = $get(this.pnlPopup);
    // make it invisible
    pnlPopup.style.display = 'none';
    if(pnlPopup.iFrame) {
        pnlPopup.iFrame.style.display = "none";
    }
}; 
mainForm.AttachPopup = function() {
    /// <summary>
    /// Attach the event handlers for the popup
    /// </summary>
    this._scrollHandler = Function.createDelegate(this, this.onUpdating);
    this._resizeHandler = Function.createDelegate(this, this.onUpdating);    
    $addHandler(window, 'resize', this._resizeHandler);
    $addHandler(window, 'scroll', this._scrollHandler);
    this._windowHandlersAttached = true;
};
mainForm.DetachPopup = function() {
    /// <summary>
    /// Detach the event handlers for the popup
    /// </summary>
    if (this._windowHandlersAttached) {
        if (this._scrollHandler) {
            $removeHandler(window, 'scroll', this._scrollHandler);
        }
        if (this._resizeHandler) {
            $removeHandler(window, 'resize', this._resizeHandler);
        }
        this._scrollHandler = null;
        this._resizeHandler = null;
        this._windowHandlersAttached = false;
    }
};
mainForm.CleanUp = function() {
    /// <summary>
    /// CleanUp all resources held by mainForm object
    /// </summary>
    this.DetachPopup();
    var pnlPopup = $get(this.pnlPopup);
    if(pnlPopup && pnlPopup.iFrame) {
       pnlPopup.parentNode.removeChild(pnlPopup.iFrame);
       pnlPopup.iFrame = null;
    }
    this._scrollHandler = null;
    this._resizeHandler = null;
    this.pnlPopup = null;
    this.innerPopup = null;
    this.updating = null;
};
mainForm.GetClientBounds = function() {
    /// <summary>
    /// Gets the width and height of the browser client window (excluding scrollbars)
    /// </summary>
    /// <returns type="Sys.UI.Bounds">
    /// Browser's client width and height
    /// </returns>
    var clientWidth;
    var clientHeight;
    switch(Sys.Browser.agent) {
        case Sys.Browser.InternetExplorer:
            clientWidth = document.documentElement.clientWidth;
            clientHeight = document.documentElement.clientHeight;
            break;
        case Sys.Browser.Safari:
            clientWidth = window.innerWidth;
            clientHeight = window.innerHeight;
            break;
        case Sys.Browser.Opera:
            clientWidth = Math.min(window.innerWidth, document.body.clientWidth);
            clientHeight = Math.min(window.innerHeight, document.body.clientHeight);
            break;
        default:  // Sys.Browser.Firefox, etc.
            clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
            clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
            break;
    }
    var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    return new Sys.UI.Bounds(scrollLeft, scrollTop, clientWidth, clientHeight);
}; 
if(typeof(Sys) !== "undefined")Sys.Application.notifyScriptLoaded();

ローダーは IE で正常に動作します。しかし、他のブラウザーでブラウジングしているときはいつでも、 リソースが見つからないというエラーが発生します。ローカル システムで。本番サーバーで同じコードをホストしたとき。1) 最初にローダーが表示されます 2) 次に 404、エラー ページが見つかりません 3) 数秒後、リクエストされたページが表示されます。

リソースが見つかりませんを回避する方法を教えてください。および404、リクエストの途中でページが見つかりませんというエラーが表示されます。

以下は本番サーバーからのエラーです

サーバーエラー

404 - ファイルまたはディレクトリが見つかりません。お探しのリソースは、削除されたか、名前が変更されたか、一時的に利用できない可能性があります。

以下は、私のアプリケーションのローカルシステムからのエラーです

'/ExecutionSystem' アプリケーションでサーバー エラーが発生しました。

リソースが見つかりません。

説明: HTTP 404。探しているリソース (またはその依存関係の 1 つ) は、削除されたか、名前が変更されたか、一時的に利用できない可能性があります。次の URL を見直して、スペルが正しいことを確認してください。

要求された URL: /ExecutionSystem/nothing.txt

バージョン情報: Microsoft .NET Framework バージョン:4.0.30319; ASP.NET バージョン:4.0.30319.1

Answer 1

より具体的な src ie を指定してみてください:

iFrame.src = "~/nothing.txt";

Internet Explorer は、他のブラウザーでは解決できないコード内の小さなエラーを解決する場合があるためです。