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

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

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

我们知道使用ASP动态修改浏览器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>

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

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

functionfoo()
    {
        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属性来修改页面标题栏后，不管是普通窗口还是模态窗口，" "和" "(空格)都不能用了，前者会被直接当字符串显示在标题栏上，后者添加再多也只有一个" "(空格)的宽度效果。这里我们又要使用另一个空格，实体来解决这个问题。代码如下：

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

还真是个好东西，另一个使用它来解决的问题是：在Option条目中填充前导空格的方法

本文转自博客园鸟食轩的博客，原文链接：http://www.cnblogs.com/birdshome/，如需转载请自行联系原博主。

怎样在Web开发中完美控制IE标题栏相关推荐

谈谈WEB开发中的苦大难字符集问题
记得刚做javaweb开发的时候被这个编码问题搞得晕头转向,经常稀里糊涂的编码正常了一会编码又乱了.那个时候迫于项目进度大多都是知其然不知其所以然.后来有时间就把整个体系搞了个遍,终于摸通了来龙去脉. ...
【Web安全】Web开发中常见的安全误区
安全是Web应用程序不容忽视的一个重要因素,而在Web应用开发中,一些开发者由于缺乏安全方面的意识,导致Web应用存在风险.下面来介绍Web开发中常见的一些安全误区. 如果我们使用Web框架,那么不必 ...
浅谈Web开发中的6种技术
CSDN博客不再经常更新,更多优质文章请来粉丝联盟网 FansUnion.cn! (FansUnion) Web开发中的6种技术 1.html 超文本标记语言,即HTML(Hypertext Mar ...
Web 开发中应用 HTML5 技术的10个实例教程
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
【笔记-node】《imooc-nodejs入门到企业web开发中的应用》
目录课程名备注入门必学 nodejs入门到企业web开发中的应用框架与工具 node.js+koa2+mysql打造前后端分离精品项目<旧岛> 项目实战 20190317-2020 ...
html引导蒙层,web开发中实现图标点击态蒙层
原标题:web开发中实现图标点击态蒙层 webapp开发中经常需要加入点击二态,即用户点击(tap)页面某个部分时该部分的样式进行相应的变化来相应用户的点击操作,这样能够带来更好的用户体验,今天我们要 ...
Web开发中的常见应用
一.文件下载文件下载功能是web开发中经常使用到的功能,使用HttpServletResponse对象就可以实现文件的下载. 文件下载功能的实现思路: 获取要下载的文件的绝对路径获取要下载的文件名 ...
java web框架struts_Struts框架在Web开发中的应用
<Struts框架在Web开发中的应用>由会员分享,可在线阅读,更多相关<Struts框架在Web开发中的应用(29页珍藏版)>请在人人文库网上搜索. 1.Struts,框架在 ...
038——VUE中组件之WEB开发中组件使用场景与定义组件的方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

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

怎样在Web开发中完美控制IE标题栏相关推荐

最新文章

热门文章