通过网页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>
相关推荐
网站网页标题title获取工具，快速批量导入网址，快速获取网址标题title，方便快捷进行统计分析处理。
通过网页title来提示用户有新消息这个功能很常见，下面有个不错的示例，大家可以参考下
主要介绍了使用JS函数实现网页标题(title)闪动效果的代码,需要的朋友可以参考下
设置网页元素 提示信息 如title,alt提示,在没有任何处理的时候设置提示，一般都会在默认时间后自动消失，要完成鼠标不离开，就不会消失提示信息。
谷歌插件-打开网页修改网页标题
VC获取网页标题.zip
JS实现title标题闪烁提示信息是一款只需几行JS实现闪烁的标题特效。
那么怎么让title随着路由的切换动态变化呢？ 1.在定义路由时增加title属性。 { path: /regularinvestment, component: Loadable({ loader: () => import('./../../business/Regularinvestment/index'), ...
JS 实现浏览器的 title 闪烁、滚动、声音提示、通知，没有依赖. 它不会干扰任何 JavaScript 库或框架。有合理的体积 5.05kb (gzipped: 1.75kb)，
摘要:C#源码,网络相关,提取网页源码 C#获取网页标题信息，在地址栏输入一串网址，稍等片刻后即可得到该网页地址的标题信息，也就是Title内的信息，由此可改进成获取网页源代码的程序。
批量获取网页标题工具是帮助SEO批量获取网页Title，检查栏目页、文章页title有效工具。 提升效率，让关键词布局更有效，更有针对性。
此代码使用jquery编写，直接让网页加载这个JS即可替换原来的title提示，如果你懂一点代码，还可以进入这个JS进行修改样式。本人亲自编写测试成功通过，如果对您有用，请给予支持。(baiyukey.blog.163.com)
JS 实现浏览器的 title 闪烁、滚动、声音提示、通知，没有依赖JS 实现浏览器的 title 闪烁、滚动、声音提示、通知，没有依赖JS 实现浏览器的 title 闪烁、滚动、声音提示、通知，没有依赖JS 实现浏览器的 title 闪烁...
本文实例讲述了JS实现消息来时让网页标题闪动效果的方法。分享给大家供大家参考，具体如下： <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title&...
本文实例讲述了JavaScript获取当前网页标题（title）的方法。分享给大家供大家参考。具体如下： JS中的document.title可以获取当前网页的标题 <!DOCTYPE html> <html> <head> <title>jb51.net...
你是不是还在羡慕别人网站的标题闪烁效果？没事，在这里就原码啦。 语言：jquery 实现功能：超炫的闪烁网页标题 看过的记得评价哦。
本文实例讲述了JS实现超简洁网页title标题跑动闪烁提示效果代码。分享给大家供大家参考，具体如下： 这里演示不几行JS代码实现的网页Title文字跑动效果，类似有消息时的标题闪烁提醒功能，在JS代码中，当变量_record...
效果就是网页窗口在没有获取焦点并且最小化的时候，网页窗口的标题栏“title”显示的内容为“【 】”，“【新消息】”的闪烁效果。 [removed] setTimeout('flash_title()',2000); //2秒之后调用一次 function flash...
显示网页的Title及链接路径.rar显示网页的Title及链接路径.rar显示网页的Title及链接路径.rar显示网页的Title及链接路径.rar显示网页的Title及链接路径.rar显示网页的Title及链接路径.rar