透過網頁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){}對它進行特殊處理了
分享下原始碼: