如何实现网页标题的闪动提示
通过网页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当提示消息中有一个或没有半角字符时没问题。
或
<script> var g_blinkswitch = 0; var g_blinktitle = document.title; function blinkNewMsg() { document.title = g_blinkswitch % 2==0 ? "【 】 - " + g_blinktitle : "【新消息】 - " + g_blinktitle; g_blinkswitch++; } setInterval(blinkNewMsg, 1000); </script>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。