首頁  >  文章  >  web前端  >  一個網頁標題title的閃爍提示效果實現思路_javascript技巧

一個網頁標題title的閃爍提示效果實現思路_javascript技巧

WBOY
WBOY原創
2016-05-16 16:54:541579瀏覽

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

複製程式碼 程式碼如下:


火狐,chrome下沒問題,ie當提示訊息中有一個或沒有半角字符時沒問題。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn