Home > Web Front-end > JS Tutorial > Ideas for implementing the flashing prompt effect of a web page title_javascript skills

Ideas for implementing the flashing prompt effect of a web page title_javascript skills

WBOY
Release: 2016-05-16 16:54:54
Original
1596 people have browsed it

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:

Copy code The code is as follows:



Firefox, no problem in chrome, ie No problem when there is one or no half-width characters in the prompt message.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template