如何写一个网页标题title的闪动提示(转)

通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见。如何实现则个功能呢?

思路是:通过ajax访问后台,若有新消息,则将网页的title替换为 提示信息 ,并与空格来回切换。例:【你有新消息】与【     】切换。提示内容弄是动态的,所以替换文字的空格数目也是算出的。这里用全角的空格。但是如果提示 消息中有‘数字’等半角字符的话就会出现问题。全角的空格比半角的1的宽度要宽的多。这样的话,闪动起来看着就不是很舒服;解决方法就是用全角的空格替换 全角的字符,半角的空格替换半角的字符。

但是document.title=' ';不论半角空格有多少个,浏览器只显示一个。用 的话,它原样输出;只能用var t=document.getElementsByTagName('title')[0]。获取title dom对象,通过 t.innerHTML=' '来修改。

效果演示

显示信息数:

但会这么顺利么,当然不会。我们可爱的ie在这个时候总会出来捣乱。在ie浏览器下title的innerHTML是只读的(不光是 title,其它的如:COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TR的innerHTML属性是只读的)。如果强制赋值的话会出现“未知的运行时错误”。目前我也没有找到很到的办法,只能加上 try{}catch(e){}对它进行特殊处理了

分享下源代码:

01 <script type="text/javascript" language="javascript">
02     var flashTitlePlayer = {
03         start: function (msg) {
04             this.title = document.title;
05             if (!this.action) {
06                 try {
07                     this.element = document.getElementsByTagName('title')[0];
08                     this.element.innerHTML = this.title;
09                     this.action = function (ttl) {
10                         this.element.innerHTML = ttl;
11                     };
12                 } catch (e) {
13                     this.action = function (ttl) {
14                         document.title = ttl;
15                     }
16                     delete this.element;
17                 }
18                 this.toggleTitle = function () {
19                     this.action('【' + this.messages[this.index = this.index == 0 ? 1 : 0] + '】欢迎访问简明现代魔法');
20                 };
21             }
22             this.messages = [msg];
23             var n = msg.length;
24             var s = '';
25             if (this.element) {
26                 var num = msg.match(/\w/g);
27                 if (num != null) {
28                     var n2 = num.length;
29                     n -= n2;
30                     while (n2 > 0) {
31                         s += " ";
32                         n2--;
33                     }
34                 }
35             }
36             while (n > 0) {
37                 s += ' ';
38                 n--;
39             };
40             this.messages.push(s);
41             this.index = 0;
42             this.timer = setInterval(function () {
43                 flashTitlePlayer.toggleTitle();
44             }, 1000);
45         },
46         stop: function () {
47             if (this.timer) {
48                 clearInterval(this.timer);
49                 this.action(this.title);
50                 delete this.timer;
51                 delete this.messages;
52             }
53         }
54     };
55     function flashTitle(msg) {
56         flashTitlePlayer.start(msg);
57     }
58     function stopFlash() {
59         flashTitlePlayer.stop();
60     }
61 </script>

火狐,chrome下没问题,ie当提示消息中有一个或没有半角字符时没问题。

上一篇:关于struts2.0 中 struts.xml设置了struts.devMode 的值为TRUE后仍然不起作用的分析


下一篇:网络基础篇(一)--TCP/IP协议族