鸟食轩

 Microsoft .NET[C#] MVP 2003
随笔 - 429, 文章 - 235, 评论 - 5529, 引用 - 356
数据加载中……

怎样在Web开发中完美控制IE标题栏

    IE以及任何目前浏览器的标题栏,原本都应该是由<title>这个HTML标签来控制的,当然现在仍然也是。只是目前的鬼趋势是,你最好不要再刷新你的网页页面了,然后还需要接受用户的任意蹂躏。这也就是传说中神龙见首不见尾,杀人于无影无形的悖时Ajax技术!

    在浏览器的标题栏中显示贴切的页面标题,是一个网页专业的表现,同时也能对搜索引擎友好。当然如果放上适当的提示信息,也会很有意义。那么怎么"动态"的来定制这个标题内容呢?

    我们知道使用ASP动态修改浏览器title,大概是这样的语句:

    <title><% = GenerateTitle %></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>内容: 

   Page.Title = "birdshome's homepage";


    不过上面的"动态"都是在服务器端修改<title>的内容,实际上对于浏览器来说<title>标签内的内容是完全固定的了。下面言归正传,仔细来说说在客户端对IE浏览器标题栏的控制:

    对于IE窗口中的页面,在页面DOM对象中,document.title属性是用来代替<title>元素的innerHTML获取和设置IE窗口标题栏内容的。请看下面这个示例:

<html>
<body>
    <!-- page content -->
    
<script language="javascript">
    
    document.body.onload 
= function
()
    {
        document.title 
= "birdshome's homepage"

    };
    </script>
</body>
</html>


    对,就是这么简单就可以设置好普通IE窗口的标题栏。那么这有什么好说的呢?这时候如果我们把完全相同的代码放入模态窗口中执行呢?模态窗口的标题栏是否会被修改?试验结果却是让人沮丧的,完全相同的这段代码,在模态窗口中就失灵了。难道模态窗口提供的DOM和普通窗口不同吗?其实模态窗口的DOM和普通窗口是相同的,而不同之处是当模态窗口中的页面装载完成后,document.title属性确实会失效。这就是为什么在上面的示例代码onload事件中的语句无效的原因。解决这个限制的方法很简单,就是要在页面还未装载完成时就修改document.title,所以在模态窗口中修改IE标题栏就因该使用这样的代码:

<html>
<body>
    
<!-- page content -->
    
<script language="javascript">    
    document.title 
= "birdshome's homepage"

    
</script>

</body>
</html>


    下面是一个包含了以上两种修改浏览器标题栏方法的示例,将其保存为"abc.htm"文件,使用IE打开你就能很直观看到区别:

<html>
<body>
    
<button onclick="foo()">
        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>


    结果是普通IE窗口的标题栏会从"birdshome's homepage (first)"快速的变为"birdshome's homepage (rewrite)",而使用Open按钮开启的模态对话框的标题将一直是"birdshome's homepage (first)"。从这个示例中我们可以看出来,对于普通IE窗口,其标题栏是可以在页面生存期的任意时刻进行修改的。而模态窗口的标题栏,我们只能在其页面装载完成前(onload事件触发前)才能修改。非模态对话框,opend by showModelessDialog,对于标题栏的处理和模态对话框完全一样。

    最后再说一个document.title使用中的技巧,我们知道如果在服务器端"动态"修改页面title时,我们可以向<title></title>标签间写入&nbps;来在标题栏上产生连续的空格输入效果。这个技巧在模态窗口中尤为有用,这样一来我们就可以把那讨厌的" - Web Page Dialog"字样用连续空格推到标题栏外去。使用document.title属性来修改页面标题栏后,不管是普通窗口还是模态窗口,"&nbsp;"和" "(空格)都不能用了,前者会被直接当字符串显示在标题栏上,后者添加再多也只有一个" "(空格)的宽度效果。这里我们又要使用另一个空格,实体&#160;来解决这个问题。代码如下:

<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>


    &#160;还真是个好东西,另一个使用它来解决的问题是:在Option条目中填充前导空格的方法

posted on 2006-06-23 00:34 birdshome 阅读(14787) 评论(21)  编辑 收藏 网摘 所属分类: Jscript&Dhtml开发

评论

#1楼   回复  引用  查看    

不错 谢谢 收了!
2006-06-23 07:37 | ※ABeen※      

#2楼   回复  引用  查看    

还没看太懂,这和摘要里说的AJAX好像没有太多的联系,忘明示.
2006-06-23 08:51 | 极地银狐.NET      

#3楼   回复  引用  查看    

很不错,挺有意思的东西
2006-06-23 09:13 | Dflying Chen      

#4楼   回复  引用    

不错接了,不过能不能把&#160;说得清楚一点啊,我看你在页面中没用到一样,谢了
2006-06-23 10:12 | QRQW[未注册用户]

#5楼   回复  引用  查看    

abc.html在XP sp2的环境下,还是会丢失title的情况,标题栏只显示“--网页对话框”
2006-06-23 10:39 | sokoo      

#6楼[楼主]   回复  引用  查看    

@极地银狐.NET
由于ajax的页面不做完全刷新,才更有从客户端去修改title的要求ya:)

@QRQW
%A0和&#160;就是内码160的字符。

@sokoo
我就是用的xp sp2做的实验呀。。。郁闷
2006-06-23 11:49 | birdshome      

#7楼   回复  引用    

我的标题栏直接显示&#160;

xp+sp2
ie6.0没有升级过
2006-06-23 12:09 | etng[未注册用户]

#8楼   回复  引用  查看    

模态窗口的标题丢失,仅显示“--网页对话框”,有其他人碰到吗?难道是环境问题?我在几台机器上都试了,结果都是一样的
2006-06-23 12:17 | sokoo      

#9楼   回复  引用  查看    

我也碰上曾经模态窗口标题问题,谢谢&收了!
2006-06-23 12:29 | Robin      

#10楼   回复  引用    

模态窗不能用js改title的问题很早就讨论过了,在M$的BUG PAGE里也有,还给了一个很鸡肋的方法.
2006-06-23 13:19 | RainChen[未注册用户]

#11楼   回复  引用    

模态窗口再打开时有自己的缓存机制,用JS更新是不行的。
2006-06-23 15:38 | CHNBin[未注册用户]

#12楼   回复  引用    

&#160是不是就是传说中的全角空格?

这个就是 " "


吼吼!
2006-06-25 20:07 | baijian_8d[未注册用户]

#13楼   回复  引用  查看    

还没有看懂。 先收下,慢慢研究。
2006-08-03 23:53 | chengulv      

#14楼   回复  引用    

如果 我在地址栏中直接输入ip地址,就会在标题栏中出现ip地址信息,怎样才能去掉呢?比如我输入的是 http://172.31.0.3/,就会在标题栏中出现ip地址信息">http://172.31.0.3/,就会在标题栏中出现ip地址信息
http://172.31.0.3/ - %title% -....
2006-09-14 17:41 | Dormin[未注册用户]

#15楼   回复  引用    

我是在PageBase里输出Head部分,所有ASPX网页都继承于PageBase,并且页面只有 <form ></form>两个标签。

这样可以任意控制head部分的任何内容,将title,meta,link,script等一些常用的标签作为属性使用

2006-10-21 22:34 | 虫虫

#16楼   回复  引用    

to baijian_8d :
&#160;不是就是全角空格。
&#160;即是 &nbsp; 即是Nonbreaking space 即是 不間斷空格。
charCode 都未過 255 ,怎會是全角?

to birdshome:
這樣不可以嗎?
document.title = "birdshome's homepage (rewrite)\xA0\xA0\xA0\xA0"
2006-12-18 15:35 | LungZeno[未注册用户]

#17楼   回复  引用    

我还以为可以解决我的问题了;但结果。。。

1.你给的例子是没有错的。

2.但是,我真的不知道你这样的脚本动态设置Title和直接在<title>标签里写有什么区别(有什么实际意义)。

3.微软已经说了它这是个BUG,并给出了解决了方案,我想应该是有一定的道理。

4.最后我说说我碰到的问题吧(大概很多人也碰到过):
我是先从A画面打开一个模态窗口B(这个时候标题是没有问题的),然后要从这个模态窗口*迁移*到另外画面C(对A画面来说,C画面还是一个模态窗口),这个时候发现在C画面里是无论如何也设置不了标题。。。。

2006-12-21 18:18 | ls[未注册用户]

#18楼[楼主]   回复  引用  查看    

@ls
你的意思是说C显示在窗口模态窗口B中?其实只有一个模态窗口B被开启?
2006-12-22 13:09 | birdshome      

#19楼   回复  引用    

是的
2007-01-05 12:22 | ls[未注册用户]

#20楼   回复  引用    

高手 谢谢!
2007-01-19 11:01 | 路过[未注册用户]



发表评论

昵称: [登录] [注册]

主页:

邮箱:(仅博主可见)

评论内容:

  登录  注册

[使用Ctrl+Enter键快速提交评论]

0 433334




相关文章:

相关链接: