The page title to prompt the user to have new messages this feature is very common, such as the current microblogging, there are some mailboxes, this feature is very common. How do you implement a function?
The idea is: through Ajax access to the background, if there is a new message, the title of the page will be replaced with the message, and switch back and forth with the space. For example: "You have new messages" and "" switch. Hint content is dynamic, so the number of spaces to replace the text is also calculated. Here we use a full angle space. However, if the message has a ' number ' and other half-width characters, the problem occurs. The width of an empty aligning half angle of 1 is much wider. In this way, flashing up and looking at is not very comfortable; The workaround is to replace full-width characters with full-width spaces, and half-corner spaces to replace half-width characters.
But document.title= '; Regardless of the number of half-width spaces, the browser displays only one. In words, it is output as it is, only with Var t=document.getelementsbytagname (' title ') [0]. Gets the title Dom object, which is modified by t.innerhtml= '.
But it will be so smooth, of course not. Our lovely ie always comes out of trouble at this time. The innerHTML of title in IE is read-only (not just title, others such as: COL, Colgroup, FRAMESET, HTML, STYLE, TABLE, Tbody, TFOOT, THEAD, The innerHTML property of TR is read-only. An "Unknown run-time error" appears if the assignment is forced. At present, I have not found a very good way, can only add Try{}catch (e) {} to it for special treatment
Share the following source code:
Copy Code code as follows:
<script type= "Text/javascript" language= "JavaScript" >
var Flashtitleplayer = {
Start:function (msg) {
This.title = Document.title;
if (!this.action) {
try {
This.element = document.getElementsByTagName (' title ') [0];
This.element.innerHTML = This.title;
this.action = function (TTL) {
This.element.innerHTML = TTL;
};
catch (e) {
this.action = function (TTL) {
Document.title = TTL;
}
Delete this.element;
}
This.toggletitle = function () {
This.action (' "' + this.messages[this.index = This.index = 0? 1:0] + ' Welcome to the Concise modern Magic ');
};
}
This.messages = [MSG];
var n = msg.length;
var s = ';
if (this.element) {
var num = Msg.match (/\w/g);
if (num!= null) {
var n2 = Num.length;
N-= n2;
while (N2 > 0) {
s + + "";
n2--;
}
}
}
while (n > 0) {
s + = ';
n--;
};
This.messages.push (s);
This.index = 0;
This.timer = setinterval (function () {
Flashtitleplayer.toggletitle ();
}, 1000);
},
Stop:function () {
if (This.timer) {
Clearinterval (This.timer);
This.action (This.title);
Delete This.timer;
Delete this.messages;
}
}
};
function Flashtitle (msg) {
Flashtitleplayer.start (msg);
}
function Stopflash () {
Flashtitleplayer.stop ();
}
</script>
Firefox, Chrome is no problem, ie when the message has one or no half-width characters are not a problem.