一个网页标题title的闪动提示效果实现思路

2014-03-22 5

通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见。如何实现则个功能呢?

思路是:通过ajax访问后台,若有新消息,则将网页的title替换为 提示信息 ,并与空格来回切换。例:【你有新消息】与【

 】切换。提示内容弄是动态的,所以替换文字的空格数目也是算出的。这里用全角的空格。但是如果提示消息中有‘数字'等半角字符的话就会出现问题。全角的空格比半角的1的宽度要宽的多。这样的话,闪动起来看着就不是很舒服;解决方法就是用全角的空格替换全角的字符,半角的空格替换半角的字符。
但是document.title=' ';不论半角空格有多少个,浏览器只显示一个。用 的话,它原样输出;只能用var t=document.getElementsByTagName('title')[0]。获取title dom对象,通过 t.innerHTML=' '来修改。

但会这么顺利么,当然不会。我们可爱的ie在这个时候总会出来捣乱。在ie浏览器下title的innerHTML是只读的(不光是title,其它的如:COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TR的innerHTML属性是只读的)。如果强制赋值的话会出现“未知的运行时错误”。目前我也没有找到很到的办法,只能加上try{}catch(e){}对它进行特殊处理了
分享下源代码:

<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] + '】欢迎访问简明现代魔法'); 
}; 
} 
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>

火狐,chrome下没问题,ie当提示消息中有一个或没有半角字符时没问题。
展开阅读全文

更多Javascript文章

javascript的变量、传值、传址、参数之间关系
Jul 26 7
对称加密与非对称加密优缺点详解
Feb 06 8
深入nodejs中流(stream)的理解
Mar 27 12
windows下vue-cli及webpack搭建安装环境
Apr 25 9
Angular.js中定时器循环的3种方法总结
Apr 27 13
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 7
详解React的回调渲染模式
Sep 10 9
手机访问当前页面