网页标题title的闪动提示
通过网页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){}对它进行特殊处理了.
下面是我的jsp demo代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"
? ? pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>title闪动练习</title>
</head>
<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] + '】标题title闪动提示');
? ? ? ? ? ? ? ? };
? ? ? ? ? ? }
? ? ? ? ? ? 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>
<body>
<h4>效果演示</h4>
<p>显示信息数：<input id="textMsgs" value="3"></p>
<button title="开始闪动" onclick="flashTitle('您有' + document.getElementById('textMsgs').value + '条新信息');">开始闪动</button>
<button title="停止闪动" onclick="stopFlash();">停止闪动</button>
</body>
</html>
