通过网页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>
相关推荐
实现标题闪动提示效果的基本思路是通过JavaScript中的AJAX技术与后端进行通信，获取新消息数据，然后通过改变<title>标签中的内容来提示用户。提示信息通常会在提示内容与空标题之间切换，通过全角空格和半角空格的...
JS 实现浏览器的 title 闪烁、滚动、声音提示、通知，没有依赖JS 实现浏览器的 title 闪烁、滚动、声音提示、通知，没有依赖JS 实现浏览器的 title 闪烁、滚动、声音提示、通知，没有依赖JS 实现浏览器的 title 闪烁...
在这篇文章中，主要介绍了使用JavaScript编写的一个函数来实现网页标题闪动效果的方法。标题中的“一个JS函数搞定网页标题闪动效果”明确指出了实现该效果只需要一个JavaScript函数，这表明了该方法的简洁性与高效性...
本文将深入探讨如何使用纯JavaScript实现浏览器的`title`闪烁、滚动、声音提示以及通知功能，而无需依赖任何外部库或框架。 首先，让我们关注`title`闪烁效果。在JavaScript中，可以利用`setInterval`函数定时更改...
总的来说，要实现消息来时网页标题的闪动效果，主要涉及JavaScript的DOM操作（如 `document.title`），定时器（`setInterval` 和 `clearInterval`），以及可能的AJAX请求（用于实时数据更新）。这样的技术可以帮助...
### JavaScript 实现网页标题栏闪动效果解析 #### 背景介绍 在网页设计中，为了提升用户体验和增加交互性，开发者们经常会利用各种视觉效果来吸引用户的注意力。其中，网页标题栏（即浏览器标签页上的标题）的动态...
一个常见的做法是通过改变网页标题来实现“闪动”的提醒效果。本文将详细讲解如何使用JavaScript来实现在窗口未获得焦点或最小化时，使标题栏在“【新消息】”和空白之间交替闪烁。 首先，我们来看一下核心的...
`title`是消息标题，`message`是消息内容，`type`可以是`TrayIcon.MessageType.INFO`、`TrayIcon.MessageType.WARNING`或`TrayIcon.MessageType.ERROR`，以表示不同的消息类型。 4. **添加到系统托盘**： 在确认...