通過網頁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){}對它進行特殊處理了
分享下源**:
1
火狐,chrome下沒問題,ie當提示訊息中有乙個或沒有半形字元時沒問題。
如何實現網頁標題的閃動提示
通過網頁title來提示使用者有新訊息這個功能很常見,比如現在的微博,還有一些郵箱,這個功能都很常見。如何實現則個功能呢?思路是 通過ajax訪問後台,若有新訊息,則將網頁的title替換為 提示資訊 並與空格來回切換。例 你有新訊息 與 切換。提示內容弄是動態的,所以替換文字的空格數目也是算出的。...
網頁title標題的閃動效果
通過網頁title來提示使用者有新訊息這個功能很常見,比如現在的微博,還有一些郵箱,這個功能都很常見。顯示資訊數 2 input type text id textmsgs 3 button title 開始閃動 onclick flashtitle 您有 document.getelementby...
如何實現網頁上的氣球提示
工作一直壓得喘不過氣來,也好久沒蒐集.net之外得東西了,作為乙個程式開發人員,我經常羨慕那些介面上非常友好得網頁,感覺乙個人性化得介面也是贏取使用者歡迎得最直接得方法,在開發window應用程式那會,經常遇到氣球提示等問題,解決起來比較麻煩,今天在經典論壇轉了下,發現了乙個在網頁上實現氣球提示得好...