It is very common to use the title of a web page to remind users of new messages. For example, on Weibo and some mailboxes, this function is very common. How to implement this function?
The idea is: access the background through ajax. If there is new news, replace the title of the web page with prompt information and switch back and forth with spaces. Example: Switch between [You have new news] and [ ]. The prompt content is dynamic, so the number of spaces for the replacement text is also calculated. Use full-width spaces here. But if there are half-width characters such as ‘numbers’ in the prompt message, problems will arise. A full-width space is much wider than a half-width 1. In this case, it will be uncomfortable to look at when flashing; the solution is to replace full-width characters with full-width spaces, and replace half-width characters with half-width spaces.
But document.title=' '; no matter how many half-width spaces there are, the browser only displays one. If used, it is output as is; only var t=document.getElementsByTagName('title')[0] can be used. Get the title dom object and modify it through t.innerHTML=' '.
But will it go so smoothly? Of course not. Our lovely ie always comes out to cause trouble at this time. In the IE browser, the innerHTML of the title is read-only (not only the title, but other innerHTML attributes such as: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TR are read-only). If the assignment is forced, an "unknown runtime error" will occur. At present, I haven't found a good way. I can only add try{}catch(e){} for special processing
Share the source code: