快捷導(dǎo)航

一個(gè)網(wǎng)頁(yè)標(biāo)題title的閃動(dòng)提示效果實(shí)現(xiàn)思路

更新時(shí)間：2014年03月22日 12:07:56 作者：

通過(guò)網(wǎng)頁(yè)title來(lái)提示用戶有新消息這個(gè)功能很常見(jiàn)，下面有個(gè)不錯(cuò)的示例，大家可以參考下

通過(guò)網(wǎng)頁(yè)title來(lái)提示用戶有新消息這個(gè)功能很常見(jiàn)，比如現(xiàn)在的微博，還有一些郵箱，這個(gè)功能都很常見(jiàn)。如何實(shí)現(xiàn)則個(gè)功能呢？

思路是：通過(guò)ajax訪問(wèn)后臺(tái)，若有新消息，則將網(wǎng)頁(yè)的title替換為提示信息，并與空格來(lái)回切換。例：【你有新消息】與【　　　　　】切換。提示內(nèi)容弄是動(dòng)態(tài)的，所以替換文字的空格數(shù)目也是算出的。這里用全角的空格。但是如果提示消息中有‘?dāng)?shù)字'等半角字符的話就會(huì)出現(xiàn)問(wèn)題。全角的空格比半角的1的寬度要寬的多。這樣的話，閃動(dòng)起來(lái)看著就不是很舒服；解決方法就是用全角的空格替換全角的字符，半角的空格替換半角的字符。
但是document.title=' ';不論半角空格有多少個(gè)，瀏覽器只顯示一個(gè)。用的話，它原樣輸出；只能用var t=document.getElementsByTagName('title')[0]。獲取title dom對(duì)象，通過(guò) t.innerHTML=' '來(lái)修改。

但會(huì)這么順利么，當(dāng)然不會(huì)。我們可愛(ài)的ie在這個(gè)時(shí)候總會(huì)出來(lái)?yè)v亂。在ie瀏覽器下title的innerHTML是只讀的（不光是title，其它的如：COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TR的innerHTML屬性是只讀的）。如果強(qiáng)制賦值的話會(huì)出現(xiàn)“未知的運(yùn)行時(shí)錯(cuò)誤”。目前我也沒(méi)有找到很到的辦法，只能加上try{}catch(e){}對(duì)它進(jìn)行特殊處理了
分享下源代碼：

復(fù)制代碼代碼如下:

 
<script type="text/javascript" language="javascript"> 
var flashTitlePlayer = { 
start: function (msg) { 
this.title = document.title; 
if (!this.action) { 
try { 
this.element = document.getElementsByTagName('title')[0]; 
this.element.innerHTML = this.title; 
this.action = function (ttl) { 
this.element.innerHTML = ttl; 
}; 
} catch (e) { 
this.action = function (ttl) { 
document.title = ttl; 
} 
delete this.element; 
} 
this.toggleTitle = function () { 
this.action('【' + this.messages[this.index = this.index == 0 ? 1 : 0] + '】歡迎訪問(wèn)簡(jiǎn)明現(xiàn)代魔法'); 
}; 
} 
this.messages = [msg]; 
var n = msg.length; 
var s = ''; 
if (this.element) { 
var num = msg.match(/\w/g); 
if (num != null) { 
var n2 = num.length; 
n -= n2; 
while (n2 > 0) { 
s += " "; 
n2--; 
} 
} 
} 
while (n > 0) { 
s += '　'; 
n--; 
}; 
this.messages.push(s); 
this.index = 0; 
this.timer = setInterval(function () { 
flashTitlePlayer.toggleTitle(); 
}, 1000); 
}, 
stop: function () { 
if (this.timer) { 
clearInterval(this.timer); 
this.action(this.title); 
delete this.timer; 
delete this.messages; 
} 
} 
}; 
function flashTitle(msg) { 
flashTitlePlayer.start(msg); 
} 
function stopFlash() { 
flashTitlePlayer.stop(); 
} 
</script> 