怎樣在Web開發(fā)中完美控制IE標(biāo)題欄

2024-07-21 02:28:54

字體：大中小

供稿：網(wǎng)友

收集最實用的網(wǎng)頁特效代碼！

　　ie以及任何目前瀏覽器的標(biāo)題欄，原本都應(yīng)該是由<title>這個html標(biāo)簽來控制的，當(dāng)然現(xiàn)在仍然也是。只是目前的鬼趨勢是，你最好不要再刷新你的網(wǎng)頁頁面了，然后還需要接受用戶的任意蹂躪。這也就是傳說中神龍見首不見尾，殺人于無影無形的悖時ajax技術(shù)！

在瀏覽器的標(biāo)題欄中顯示貼切的頁面標(biāo)題，是一個網(wǎng)頁專業(yè)的表現(xiàn)，同時也能對搜索引擎友好。當(dāng)然如果放上適當(dāng)?shù)奶崾拘畔ⅲ矔苡幸饬x。那么怎么"動態(tài)"的來定制這個標(biāo)題內(nèi)容呢？

我們知道使用asp動態(tài)修改瀏覽器title，大概是這樣的語句：

而在asp.net 1.1中，除了仍可以使用上面的方法外，我們多了一個看起來"很美"的方法：

    in aspx page:
        <title id="clttitle" runat="server"></title>
    in cs file:
        protected htmlgeneralcontrol clttitle;
        . . .
        clttitle.innerhtml = "birdshome's homepage";

今天到了asp.net 2.0時代，除了上面的兩種方法，我們還可以更容易的修改<title>內(nèi)容：

page.title = "birdshome's homepage";

不過上面的"動態(tài)"都是在服務(wù)器端修改<title>的內(nèi)容，實際上對于瀏覽器來說<title>標(biāo)簽內(nèi)的內(nèi)容是完全固定的了。下面言歸正傳，仔細(xì)來說說在客戶端對ie瀏覽器標(biāo)題欄的控制：

對于ie窗口中的頁面，在頁面dom對象中，document.title屬性是用來代替<title>元素的innerhtml獲取和設(shè)置ie窗口標(biāo)題欄內(nèi)容的。請看下面這個示例：

<html>
<body>
    
    <script language="javascript">
    document.body.onload = function()
    {
        document.title = "birdshome's homepage"；
    };
    </script>
</body>
</html>

對，就是這么簡單就可以設(shè)置好普通ie窗口的標(biāo)題欄。那么這有什么好說的呢？這時候如果我們把完全相同的代碼放入模態(tài)窗口中執(zhí)行呢？模態(tài)窗口的標(biāo)題欄是否會被修改？試驗結(jié)果卻是讓人沮喪的，完全相同的這段代碼，在模態(tài)窗口中就失靈了。難道模態(tài)窗口提供的dom和普通窗口不同嗎？其實模態(tài)窗口的dom和普通窗口是相同的，而不同之處是當(dāng)模態(tài)窗口中的頁面裝載完成后，document.title屬性確實會失效。這就是為什么在上面的示例代碼onload事件中的語句無效的原因。解決這個限制的方法很簡單，就是要在頁面還未裝載完成時就修改document.title，所以在模態(tài)窗口中修改ie標(biāo)題欄就因該使用這樣的代碼：

<html>
<body>
    
    <script language="javascript">
    document.title = "birdshome's homepage"；
    </script>
</body>
</html>

下面是一個包含了以上兩種修改瀏覽器標(biāo)題欄方法的示例，將其保存為"abc.htm"文件，使用ie打開你就能很直觀看到區(qū)別：

<html>
<body>
    <button >
        open</button>
    <script language="javascript">
    document.body.onload = function()
    {
        document.title = "birdshome's homepage (rewrite)" + unescape(h_a0);
    };

document.title = "birdshome's homepage (first)" + unescape(h_a0);

    function foo()
    {
        window.showmodaldialog("abc.htm");
    }
    </script>
</body>
</html>

結(jié)果是普通ie窗口的標(biāo)題欄會從"birdshome's homepage (first)"快速的變?yōu)?birdshome's homepage (rewrite)"，而使用open按鈕開啟的模態(tài)對話框的標(biāo)題將一直是"birdshome's homepage (first)"。從這個示例中我們可以看出來，對于普通ie窗口，其標(biāo)題欄是可以在頁面生存期的任意時刻進(jìn)行修改的。而模態(tài)窗口的標(biāo)題欄，我們只能在其頁面裝載完成前(onload事件觸發(fā)前)才能修改。非模態(tài)對話框，opend by showmodelessdialog，對于標(biāo)題欄的處理和模態(tài)對話框完全一樣。

最后再說一個document.title使用中的技巧，我們知道如果在服務(wù)器端"動態(tài)"修改頁面title時，我們可以向<title></title>標(biāo)簽間寫入&nbps;來在標(biāo)題欄上產(chǎn)生連續(xù)的空格輸入效果。這個技巧在模態(tài)窗口中尤為有用，這樣一來我們就可以把那討厭的" - web page dialog"字樣用連續(xù)空格推到標(biāo)題欄外去。使用document.title屬性來修改頁面標(biāo)題欄后，不管是普通窗口還是模態(tài)窗口，" "和" "(空格)都不能用了，前者會被直接當(dāng)字符串顯示在標(biāo)題欄上，后者添加再多也只有一個" "(空格)的寬度效果。這里我們又要使用另一個空格，實體 來解決這個問題。代碼如下：

<html>
<body>
    <script language="javascript">
    var hexa0s = "%a0 %a0 %a0 %a0";

    document.body.onload = function()
    {
        document.title = "birdshome's homepage (rewrite)" + unescape(hexa0s);
    };
    </script>
</body>
</html>