讓title閃動起來：新消息提醒
前些天，要實現一個功能。在后臺，一些信息是要實時提醒給后臺管理員。用的是通過ajax獲取最新信息，然后在前臺提示；原來系統自帶的是彈出一個對話框，然后flash播放鈴聲；這種方式不是很友好，對話框彈出一會就消失了，這個頁面不能最小化，不然是看不到的；另外播放鈴聲也得要求管理員帶上耳機。
于是就想到了郵箱中來新郵件那種提示方式，閃動標題欄；
思路是：
通過ajax訪問后臺，若有新消息，則將網頁的title替換為 提示信息 ，并與空格來回切換；
例：【你有新消息】與【 】切換；
提示內容弄是動態的，所以替換文字的空格數目也是算出的。這里用全角的空格；
但是如果提示消息中有‘數字’等半角字符的話就會出現問題。
閃動時
【你有1條新消息】
【你有 條新消息】
全角的空格比半角的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){}對它進行特殊處理了
以下是源碼：
1
2 var flash_title={
3 doc:document,
4 timer:null,
5 is_flash:false,
6 o_title:document.title,
7 c_title:'',
8 ie:!-[1,],
9 msg :'有新消息',
10 flash : function(msg){
11
12 if(!this.is_flash){
13 this.o_title=this.doc.title;//保存原來的title
14 }
15 this.is_flash=true;
16 if(typeof(msg)=='undefined'){
17 msg=this.msg;
18 }
19 var th=this;
20 this.timer=setInterval(function(){th._flash(msg);},1000);
21 } ,
22 _flash : function(msg){
23 var re=new RegExp('【[\\s| ]+】');
24 this.c_title=this.doc.title;
25 var n=re.test(this.c_title)? '【'+msg+'】': '【'+this.getSpace(msg)+'】';
26 try{
27 /*
28 在ie下，下列元素table,thead,tfoot,tbody,tr,col,colgroup,html,title,style,frameset的innerHTML屬性是只讀的。注意沒有td!
29 */
30 this.doc.getElementsByTagName('title')[0].innerHTML=n;
31 }catch(e){
32 n=n.replace(/ /g,' ');
33 this.doc.title=n;
34 }
35
36
37 },
38 clear : function (){
39 clearInterval(this.timer);
40 if(this.is_flash)// 如果正在閃
41 this.doc.title=this.o_title;//將title復原
42 this.is_flash=false;
43 },
44 getSpace : function (msg){
45 var n=msg.length;//console.log(n);
46 var s='';
47 var num=msg.match(/\w/g);
48 var n2=(num!=null)?num.length:0;//半角字符的個數
49 n=n-n2;
50 while(n2>0){
51 s=s+" ";
52 n2--;
53 };
54 while(n>0){
55 s=s+' ';
56 n--;
57 };
58
59 return s;
60 }
61 };
用法
開始閃動 falsh_title.falsh('您有2條新消息');
結束 ：flash_title.clear();
結果：火狐，chrome沒問題；ie當提示消息中有一個或沒有半角字符時沒問題
ps：現在寫篇文章，一句話結尾是總是習慣用“；”結束，不知道這算不算是程序員職業病，哈哈；
后來看到雙魚座修改后代碼，我又在原來的基礎上修改了下
View Code
1 var flash_title={
2 doc:document,
3 timer:null,
4 is_flash:false,
5 o_title:'',
6 ie:!-[1,],//傳說中最短判斷ie瀏覽器的代碼，但它的true或false 與title 的innerHTML 是否是只讀的 并沒有必然關系
7 //（主要因為有其他基于ie核心的瀏覽器存在，如搜狗，遨游等）
8 msg:'有新消息',
9 message:null,
10 flash : function(msg){
11
12 if(this.is_flash){
13 this.clear();//先停止
14 }else{
15 this.o_title=this.doc.title;//保存原來的title
16 }
17 this.is_flash=true;
18 if(typeof(msg)=='undefined'){
19 msg=this.msg;
20 }
21 try{
22 this.doc.getElementsByTagName('title')[0].innerHTML=this.o_title;
23 }catch(e){
24 this.ie=true;
25 }
26 this.message=[msg,this.getSpace(msg)];
27
28 var th=this;
29 this.timer=setInterval(function(){th._flash(msg);},1000);
30 } ,
31 _flash : function(msg){
32 this.index=(!this.index)?1:0;
33 var n='【'+this.message[this.index]+'】';
34 if(!this.ie){
35 this.doc.getElementsByTagName('title')[0].innerHTML=n;
36 }else{
37 this.doc.title=n;
38 }
39 },
40 clear : function (){
41 clearInterval(this.timer);
42 if(this.is_flash)// 如果正在閃
43 this.doc.title=this.o_title;//將title復原
44 this.is_flash=false;
45 },
46 getSpace : function (msg){
47 var n=msg.length;//console.log(n);
48 var s='';
49 var num=msg.match(/\w/g);
50 var n2=(num!=null)?num.length:0;//半角字符的個數
51 n=n-n2;
52 var space=this.ie?' ':' ';
53 while(n2>0){
54 s=s+space;
55 n2--;
56 };
57 while(n>0){
58 s=s+' ';//全角空格
59 n--;
60 };
61 return s;
62 }
63 };
再后來，我突然想起了我以前曾想到的一種思路，一個全角字符占兩個半角字符的空。而恰好，瀏覽器（document.title='半角空格'）最多只能顯示一個半角空格。
所以又出現了第三個版本，測試結果：所有的瀏覽器基本都沒問題。(之所以說是基本，因為有些瀏覽器在特定狀態下會對漢字加粗，對英文字符不加粗)
View Code
1 var flash_title={
2 doc:document,
3 timer:null,
4 is_flash:false,
5 o_title:'',
6 msg:'有新消息',
7 message:null,
8 flash : function(msg){
9
10 if(this.is_flash){
11 this.clear();//先停止
12 }else{
13 this.o_title=this.doc.title;//保存原來的title
14 }
15 this.is_flash=true;
16 if(typeof(msg)=='undefined'){
17 msg=this.msg;
18 }
19 this.message=[msg,this.getSpace(msg)];
20 var th=this;
21 this.timer=setInterval(function(){th._flash(msg);},1000);
22 } ,
23 _flash : function(msg){
24 this.index=(!this.index)?1:0;
25 this.doc.title='【'+this.message[this.index]+'】';
26 },
27 clear : function (){
28 clearInterval(this.timer);
29 if(this.is_flash)// 如果正在閃
30 this.doc.title=this.o_title;//將title復原
31 this.is_flash=false;
32 },
33 getSpace : function (msg){
34 var n=msg.length;
35 var s='';
36 var num=msg.match(/\w/g);
37 var n2=(num!=null)?num.length:0;//半角字符的個數
38 n=n-n2; //全角字符個數
39 var t=parseInt(n2/2);
40 if(t>0){//兩個半角替換為一個全角
41 n=n+t;
42 }
43 s=(n2%2)?' ':'';//如果半角字符個數為奇數
44 while(n>0){
45 s=s+' ';//全角空格
46 n--;
47 };
48 return s;
49 }
50 };
51
52 flash_title.flash();//默認提示
53 setTimeout(function(){ flash_title.flash('您有3條新消息');},5000);
54 setTimeout(function(){ flash_title.flash('您有30條新消息');},15000);
55 setTimeout(function(){ flash_title.clear();},25000);//停止
存在flash_title.doc 主要是考慮到ifame的情況，如在iframe使窗口標題閃動，就可以這樣寫
flash_title.doc=parent.document;
flash_title.flash('有'+result.new_orders+'個新訂單');
flash_title.flash();
最后想說的是，有些功能能自己寫的做好自己親自動手寫一下（如果有時間的話，哈哈）。往往能從此過程中學習到很多以前不知道的東西；
浙公網安備 33010602011771號