[JavaScript & CSS]alert訊息按下『確定』前，背景網頁沒有套用CSS

2010-11-11

12883
0

問題描述
在server端註冊一段JavaScript，是使用jQuery套用css(include JavaScirpt file也一樣)，當postback回server端時(例如按了某個按鈕)，我們要註冊一段JavaScript去alert對應的訊息，例如存檔成功。這時候會發現，網頁Render完，出現了alert訊息，但問題出現了：在還沒有點選alert的『確定』之前，背景的網頁呈現，是沒有套用css的效果。

當按了alert視窗的『確定』之後，原本使用jQuery套用CSS的code就會生效，畫面呈現又是我們要的效果。

釐清問題

如果使用jQuery套用CSS的部分，直接寫在.aspx上，沒有問題。
直接在aspx上include某JavaScript file做同樣的事，仍會失敗。在server端include JavaScript file也沒用。
與註冊JavaScript的順序無關
- 即使把套用CSS的JS，在最一開始註冊也仍會失敗
- 即使把套用CSS的JS與alert放在一起同一時間註冊，且套用css放在前面，仍會失敗

暫時solution
將alert的function，加上setTimeout來做延遲的動作，延遲的秒數為0。對user來說，感覺上沒有差異。但畫面上alert時，背景的網頁已經套好CSS了。

Sample Code

1.aspx


    Inherits="alertBlockCssLoading" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .myButton
        {
            color: Red;            
        }
    </style>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
        <asp:Button ID="Button2" runat="server" Text="Button2" onclick="Button2_Click" />        
    </div>
    </form>
</body>
</html>



public partial class alertBlockCssLoading : System.Web.UI.Page
{
    string js_final = string.Empty;
    protected void Page_PreInit(object sender, EventArgs e)
    {
        string js = @"        
        $(document).ready(function () {
            $('#Button1').addClass('myButton');              
        });";
        
        this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), "myt2", js, true);                            
    }

    /// <summary>
    /// 按完按鈕後，註冊js，alert訊息，還沒按alert的確定之前，背景使用jQuery套用的css會失效
    /// </summary>
    /// <param name="sender">The source of the event.</param>
    /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>    
    protected void Button1_Click(object sender, EventArgs e)
    {                
        this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), "myt", " alert('test1');", true);        
    }

    /// <summary>
    /// alert前加上setTimeout
    /// </summary>
    /// <param name="sender">The source of the event.</param>
    /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>    
    protected void Button2_Click(object sender, EventArgs e)
    {
       this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(), "myt3", "setTimeout( function(){alert('test2');},0);", true);
    }
}

說明