通过网页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当提示消息中有一个或没有半角字符时没问题。