通过网页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当提示消息中有一个或没有半角字符时没问题。
网页标题,title,闪动提示
更新动态
- 群星《2023好听新歌28》十倍音质 U盘音乐[WAV分轨][1G]
- faker拿了几个全球冠军 faker全球冠军数量介绍
- 英雄联盟faker拿了多少个冠军 Faker获得冠军数量介绍
- 英雄联盟全华班有夺冠过吗 英雄联盟全华班有没有夺过冠
- ChadCrouch-BartonCreekSoundwalk(2024)[24Bit-96kHz]FLAC
- BestAudiophileVoices4(2005)[FLAC]
- 常月《中国红》[DTS-WAV分轨]
- 国外《CS》选手抱怨上海major外设:桌子不能调节
- 美女推主COS合集图赏
- FS社母公司角川宣布:旗下共有26款游戏积极开发中!
- 黄莺莺.1984-炎夏的梦(2004环球复黑王)【宝丽金】【WAV+CUE】
- 黄雅莉.2009-雅莉不怕【福茂】【FLAC分轨】
- 张宇.1997-温古知新一个人的天荒地老【EMI百代】【WAV+CUE】
- 「灵与火的织卷」前瞻讨论开启 参与赢原石
- 【原神手游】原神基尼奇生日快乐