通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见。如何实现则个功能呢?
思路是:通过ajax访问后台,若有新消息,则将网页的title替换为 提示信息 ,并与空格来回切换。例:【你有新消息】与【 】切换。提示内容弄是动态的,所以替换文字的空格数目也是算出的。这里用全角的空格。但是如果提示消息中有‘数字’等半角字符的话就会出现问题。全角的空格比半角的1的宽度要宽的多。这样的话,闪动起来看着就不是很舒服;解决方法就是用全角的空格替换全角的字符,半角的空格替换半角的字符。
但是document.title=' ';不论半角空格有多少个,浏览器只显示一个。用 的话,它原样输出;只能用var t=document.getElementsByTagName('title')[0]。获取title dom对象,通过 t.innerHTML=' '来修改。
但会这么顺利么,当然不会。bjdkfp.codeplex.com;
bjkfp.codeplex.com;
bjkp.codeplex.com;
bjkpi.codeplex.com;
bjkpo.codeplex.com;
shdkfp.codeplex.com;
shdkp.codeplex.com;
shkpi.codeplex.com;
shfpo.codeplex.com;
shfpi.codeplex.com;
tjdkfp.codeplex.com;
tjfpo.codeplex.com;
tjkpi.codeplex.com;
tjkpu.codeplex.com;
tjkpy.codeplex.com;
cqkfp.codeplex.com;
cqfpo.codeplex.com;
cqkpi.codeplex.com;
cqkpu.codeplex.com;
cqkpy.codeplex.com;
hebdkfp.codeplex.com;
hebfpo.codeplex.com;
hedkp.codeplex.com;
hebmp.codeplex.com;
hebtp.codeplex.com;
jlkfp.codeplex.com;
jlkfpq.codeplex.com;
jldkp.codeplex.com;
jlkfw.codeplex.com;
jlfp.codeplex.com;
ccfp.codeplex.com;
cckfp.codeplex.com;
ccfpw.codeplex.com;
ccfpe.codeplex.com;
ccfpr.codeplex.com;
sykfp.codeplex.com;
syfpq.codeplex.com;
syfpe.codeplex.com;
sydpq.codeplex.com;
syfp.codeplex.com;
dlfpw.codeplex.com;
dlfpe.codeplex.com;
dlfpr.codeplex.com;
dlfpa.codeplex.com;
dlfps.codeplex.com;
asfpq.codeplex.com;
asfpe.codeplex.com;
asfpa.codeplex.com;
asfps.codeplex.com;
asfpd.codeplex.com;
jnfpq.codeplex.com;
jnfpw.codeplex.com;
jnfpr.codeplex.com;
jnfpt.codeplex.com;
jnfpa.codeplex.com;
jnfpd.codeplex.com;
qdfp.codeplex.com;
qdkfp.codeplex.com;
qddfp.codeplex.com;
qddkp.codeplex.com;
qdfpa.codeplex.com;
qdfpd.codeplex.com;
zbkfp.codeplex.com;
zbfpa.codeplex.com;
zbdfp.codeplex.com;
dykfp.codeplex.com;
dydkfp.codeplex.com;
dyfpk.codeplex.com;
ytkfp.codeplex.com;
ytdfp.codeplex.com;
ytfp.codeplex.com;
ytfp.codeplex.com;
wfkfp.codeplex.com;
wffpa.codeplex.com;
wffp.codeplex.com;
tykfp.codeplex.com;
tyfpq.codeplex.com;
tyfpw.codeplex.com;
tyfpe.codeplex.com;
tyfps.codeplex.com;
xafp.codeplex.com;
xafpa.codeplex.com;
xadfp.codeplex.com;
xaksp.codeplex.com;
xafpq.codeplex.com;
sjzfp.codeplex.com;
sjzkp.codeplex.com;
sjzpp.codeplex.com;
sdkfp.codeplex.com;
sjfpq.codeplex.com;
sjfpw.codeplex.com;
tsfpq.codeplex.com;
tsdfp.codeplex.com;
tsfpw.codeplex.com;
qhdfp.codeplex.com;
qhfp.codeplex.com;
qdfpq.codeplex.com;
lyfp.codeplex.com;
lyfpq.codeplex.com;
lyfpw.codeplex.com;
zzfp.codeplex.com;
zzfpq.codeplex.com;
zzfpw.codeplex.com;
zzfpe.codeplex.com;
zzfpr.codeplex.com;
whfpq.codeplex.com;
whfpw.codeplex.com;
whfpe.codeplex.com;
whfpt.codeplex.com;
whfpa.codeplex.com;
csfp.codeplex.com;
csfpq.codeplex.com;
csfpw.codeplex.com;
csfpe.codeplex.com;
csfpt.codeplex.com;
wxfp.codeplex.com;
wxkfp.codeplex.com;
wxfpq.codeplex.com;
wxdfp.codeplex.com;
wxfpw.codeplex.com;
njdfp.codeplex.com;
njfpw.codeplex.com;
njfpe.codeplex.com;
njfpa.codeplex.com;
njfps.codeplex.com;
szfp.codeplex.com;
szkfp.codeplex.com;
szfpq.codeplex.com;
szfpe.codeplex.com;
szfpw.codeplex.com;
nbfp.codeplex.com;
nbfpq.codeplex.com;
nbfpw.codeplex.com;
nbfpe.codeplex.com;
nbfpr.codeplex.com;
hzdfp.codeplex.com;
hzkfp.codeplex.com;
hzfpq.codeplex.com;
hzfpa.codeplex.com;
hzfps.codeplex.com;
fzkfp.codeplex.com;
fzfpq.codeplex.com;
fzfpe.codeplex.com;
fzfpt.codeplex.com;
fzfpy.codeplex.com;
xmfp.codeplex.com;
xmfpq.codeplex.com;
xmfpw.codeplex.com;
xmfpe.codeplex.com;
xmdfp.codeplex.com;
kmkfp.codeplex.com;
kmfp.codeplex.com;
kmfpq.codeplex.com;
kmfpr.codeplex.com;
kmfpe.codeplex.com;
cdfp.codeplex.com;
cdfpe.codeplex.com;
cdfpt.codeplex.com;
cdfpw.codeplex.com;
csfpa.codeplex.com;
hffp.codeplex.com;
hffpq.codeplex.com;
hffpw.codeplex.com;
hffpe.codeplex.com;
hffpr.codeplex.com;
gyfp.codeplex.com;
gyfpq.codeplex.com;
gykfp.codeplex.com;
gyfpr.codeplex.com;
gyfpt.codeplex.com;
xzfp.codeplex.com;
xzkfp.codeplex.com;
xzfpq.codeplex.com;
xzfpt.codeplex.com;
xzfpa.codeplex.com;
ntfp.codeplex.com;
ntdfp.codeplex.com;
ntkfp.codeplex.com;
ntfpt.codeplex.com;我们可爱的ie在这个时候总会出来捣乱。在ie浏览器下title的innerHTML是只读的(不光是title,其它的如:COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TR的innerHTML属性是只读的)。如果强制赋值的话会出现“未知的运行时错误”。目前我也没有找到很到的办法,只能加上try{}catch(e){}对它进行特殊处理了
分享下源代码:
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();
}