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

X不知叫啥X

X不知叫啥X

2016-02-19 16:08

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享怎样在Web开发中完美控制IE标题栏,希望可以对大家能有小小的帮助。

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

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

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

      title% = GenerateTitle %/title

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

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

  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

  http://birdshome.cnblogs.com/archive/2006/06/23/control_browser_title.html

展开更多 50%)
分享

猜你喜欢

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

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

在VB中实现闪动标题栏

编程语言 网络编程
在VB中实现闪动标题栏

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

闪动标题栏

Delphi
闪动标题栏

在Authorware中实现自定义标题栏

设计软件 平面设计软件 广告设计软件
在Authorware中实现自定义标题栏

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

在中望CAD中绘图怎样自定义标题栏?教程

autocad教程
在中望CAD中绘图怎样自定义标题栏?教程

在VB中实现移动没有标题栏的窗口

编程语言 网络编程
在VB中实现移动没有标题栏的窗口

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

如何去除数据表中的重复数据

如何去除数据表中的重复数据

MySQL 服务器内存使用

MySQL 服务器内存使用
下拉加载更多内容 ↓