A web page title flashing prompt effect

  • 2020-03-30 02:24:22
  • OfStack

It is very common to use the title of a web page to alert the user to a new message, such as the current weibo, and some email, this function is very common. How to implement it?

The idea is to access the background through ajax, if there is a new message, the title of the page will be replaced by a prompt message, and the space to switch back and forth. Example: [you have a new message] and [] switch. The prompt is dynamic, so the number of Spaces to replace the text is also calculated. I'll use the full Angle space here. However, this can be a problem if there is a 'number' in the message. The full Angle space is much wider than the width of the half Angle one. In this case, the flash is not very comfortable to look at; The solution is to replace full-angle characters with full-angle Spaces, and half-angle characters with half-angle Spaces.
But the document. The title = ' '; No matter how many half Spaces there are, the browser displays only one. If used, it outputs as is; Can only use the var t = document. GetElementsByTagName (" title ") [0]. Gets the title dom object and modifies it with t.i. nerhtml =' '.

But will it go so well? Of course not. Our lovely ie always comes out to make trouble at this time. The innerHTML of title in Internet explorer is read-only (not just the title, but the innerHTML properties of COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TR are read-only). An "unknown runtime error" occurs if an assignment is forced. So far I haven't found a way to do this, except to add try{}catch(e){} to it
Share the source code:

 
<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 simple 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> 

No problem in firefox, no problem in chrome, no problem in ie when there is one or no half corner in the message.


Related articles: