一个网页标题title的闪动提示效果实现思路
2023-06-13 09:15:20 时间
通过网页title来提示用户有新消息这个功能很常见，比如现在的微博，还有一些邮箱，这个功能都很常见。如何实现则个功能呢？
思路是：通过ajax访问后台，若有新消息，则将网页的title替换为提示信息，并与空格来回切换。例：【你有新消息】与【 】切换。提示内容弄是动态的，所以替换文字的空格数目也是算出的。这里用全角的空格。但是如果提示消息中有‘数字"等半角字符的话就会出现问题。全角的空格比半角的1的宽度要宽的多。这样的话，闪动起来看着就不是很舒服；解决方法就是用全角的空格替换全角的字符，半角的空格替换半角的字符。
但是document.title="";不论半角空格有多少个，浏览器只显示一个。用的话，它原样输出；只能用vart=document.getElementsByTagName("title")[0]。获取titledom对象，通过t.innerHTML=""来修改。
但会这么顺利么，当然不会。我们可爱的ie在这个时候总会出来捣乱。在ie浏览器下title的innerHTML是只读的（不光是title，其它的如：COL,COLGROUP,FRAMESET,HTML,STYLE,TABLE,TBODY,TFOOT,THEAD,TR的innerHTML属性是只读的）。如果强制赋值的话会出现“未知的运行时错误”。目前我也没有找到很到的办法，只能加上try{}catch(e){}对它进行特殊处理了
分享下源代码：
<scripttype="text/javascript"language="javascript">
varflashTitlePlayer={
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;
}
deletethis.element;
}
this.toggleTitle=function(){
this.action("【"+this.messages[this.index=this.index==0?1:0]+"】欢迎访问简明现代魔法");
};
}
this.messages=[msg];
varn=msg.length;
vars="";
if(this.element){
varnum=msg.match(/\w/g);
if(num!=null){
varn2=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);
deletethis.timer;
deletethis.messages;
}
}
};
functionflashTitle(msg){
flashTitlePlayer.start(msg);
}
functionstopFlash(){
flashTitlePlayer.stop();
}
</script>
火狐，chrome下没问题，ie当提示消息中有一个或没有半角字符时没问题。