两种信息提示方式的对比：
在2009年12月13日，我写了篇博文《无干扰模式的信息提示》，其中有文件 mfMessage.js，今天对它进行了一些小的改进，在这里将它贴出来。
以下是mfMessage.js的源代码，你可以复制到自己的网页应用中，不用作任何修改它就会工作得很好。如果你将它改进得更好，也请慷慨地与我（admin@myfootprints.cn）分享。谢谢！
//
// mfMessage 对象
//
function mfMessage(sMessageWindowId) {
this.message = '';
if (sMessageWindowId) {
this.messageWindowId = sMessageWindowId;
} else {
this.messageWindowId = 'mfMessageWindow';
}
this._init_ = false;
// 通知window对象，在HTML文档加载完成后告诉我（mfMessage对象）一声
if (!window.document.body) {
this.addEventHandler(window, 'load', function() {
window.isReady = true;
});
} else {
window.isReady = true;
}
}
//
// 初始化工作
// 注意：此过程应该在HTML文档加载完成后再调用
//
mfMessage.prototype.init = function() {
if (this._init_) { return; }
if (!window.isReady) { return; }
var sMessageWindowId = this.messageWindowId;
function hideMessage() {
var oWin = document.getElementById(sMessageWindowId);
oWin.style.display = 'none';
}
// 如果发现有未销毁的mfMessage对象留下的信息窗口，则删掉它先
var oOldWin = document.getElementById(sMessageWindowId);
if (oOldWin != null) {
oOldWin.parentNode.removeChild(oOldWin);
}
var oDocFragment = document.createDocumentFragment();
var oWin = document.createElement('div');
oWin.setAttribute('id', this.messageWindowId);
oWin.style.display = 'none';
// 其他CSS属性
oWin.style.position = 'fixed';
oWin.style.left = '0';
oWin.style.top = '0';
oWin.style.width = '100%';
oWin.style.zIndex = '1001';
oWin.style.textAlign = 'center';
oDocFragment.appendChild(oWin);
// 将文档碎片加入到页面的body中
try {
var oBody = document.body;
oBody.insertBefore(oDocFragment, oBody.firstChild);
} catch (oError) {
// 如果在这里碰到了错误，一般是由于HTML文档未加载完成，所以造成 document.body 对象是 null
// 应该等到文档加载完成后再来做此操作
// this.addEventHandler(window, 'load', function() {
// var oBody = document.body;
// oBody.insertBefore(oDocFragment, oBody.firstChild);
// });
}
this.addEventHandler(oWin, 'click', hideMessage);
this._init_ = true;
};
//
// 显示信息
// 注意：此过程应该在HTML文档加载完成后再调用
//
mfMessage.prototype.showMessage = function(vMsg, bNonIntrusive, lDelay) {
if (vMsg.length <= 0) { return; }
if (window.isReady) {
if (!this._init_) {
this.init();
}
var sMessageWindowId = this.messageWindowId;
function hideMessage() {
var oWin = document.getElementById(sMessageWindowId);
oWin.style.display = 'none';
}
var oWin = document.getElementById(this.messageWindowId);
try {
oWin.removeChild(oWin.firstChild);
} catch (oError) {
}
var oMessage;
if (vMsg.constructor == window.Array && vMsg.length > 1) {
oMessage = document.createElement('ul');
for (var i = 0; i < vMsg.length; i++) {
var oMessageLI = document.createElement('li');
var oMessageText = document.createTextNode(vMsg[i]);
oMessage.appendChild(oMessageLI);
oMessageLI.appendChild(oMessageText);
}
} else {
oMessage = document.createTextNode(vMsg);
}
var oMessageWrapper = document.createElement('div');
// 设置 oMessageWrapper 的CSS属性
oMessageWrapper.style.padding = '5px';
oMessageWrapper.style.color = 'black';
oMessageWrapper.style.fontWeight = 'bold';
oMessageWrapper.style.backgroundColor = '#FFF1A8';
oMessageWrapper.style.cursor = 'pointer';
oMessageWrapper.style.display = 'inline-block';
oMessageWrapper.style.width = 'auto';
oMessageWrapper.style.height = 'auto';
oMessageWrapper.style.textAlign = 'left';
oMessageWrapper.style.fontSize = '16px';
oMessageWrapper.appendChild(oMessage);
oWin.appendChild(oMessageWrapper);
oWin.style.display = 'block';
if (bNonIntrusive) {
// 无干扰模式，启动计时器
var lD;
if (lDelay) {
lD = lDelay;
} else {
lD = 2000;
}
window.setTimeout(hideMessage, lD);
}
} else {
}
};
//
// 显示信息，参数为HTML代码
// 注意：此过程应该在HTML文档加载完成后再调用
//
mfMessage.prototype.showHTMLMessage = function(sMsg, bNonIntrusive, lDelay) {
if (sMsg.length <= 0) { return; }
if (window.isReady) {
if (!this._init_) {
this.init();
}
var sMessageWindowId = this.messageWindowId;
function hideMessage() {
var oWin = document.getElementById(sMessageWindowId);
oWin.style.display = 'none';
}
var oWin = document.getElementById(this.messageWindowId);
try {
oWin.removeChild(oWin.firstChild);
} catch (oError) {
}
var oMessageWrapper = document.createElement('div');
// 设置 oMessageWrapper 的CSS属性
oMessageWrapper.style.padding = '5px';
oMessageWrapper.style.color = 'black';
oMessageWrapper.style.fontWeight = 'bold';
oMessageWrapper.style.backgroundColor = '#FFF1A8';
oMessageWrapper.style.cursor = 'pointer';
oMessageWrapper.style.display = 'inline-block';
oMessageWrapper.style.width = 'auto';
oMessageWrapper.style.height = 'auto';
oMessageWrapper.style.textAlign = 'left';
oMessageWrapper.style.fontSize = '16px';
oMessageWrapper.innerHTML = sMsg;
oWin.appendChild(oMessageWrapper);
oWin.style.display = 'block';
if (bNonIntrusive) {
// 无干扰模式，启动计时器
var lD;
if (lDelay) {
lD = lDelay;
} else {
lD = 2000;
}
window.setTimeout(hideMessage, lD);
}
} else {
}
};
// 获取浏览器客户窗口的左端位置
mfMessage.prototype.getClientLeft = function() {
return typeof self.pageXOffset != 'undefined' ? self.pageXOffset : document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
};
// 获取浏览器客户窗口的顶端位置
mfMessage.prototype.getClientTop = function() {
return typeof self.pageYOffset != 'undefined' ? self.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
};
// 获取浏览器客户端窗口的宽度
mfMessage.prototype.getClientWidth = function() {
return self.innerWidth ? self.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body ? document.body.clientWidth : 0;
};
// 获取浏览器客户端窗口的高度
mfMessage.prototype.getClientHeight = function() {
return self.innerHeight ? self.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body ? document.body.clientHeight : 0;
};
// 添加事件监听
mfMessage.prototype.addEventHandler = function(oTarget, sEventType, fnHandler, vArgument /* optional */) {
//# 生成handler函数
var handler;
if (typeof (vArgument) == 'undefined') {
handler = fnHandler;
} else {
handler = function() {
fnHandler(vArgument);
};
}
if (oTarget.addEventListener) { // for DOM-compliant browsers
oTarget.addEventListener(sEventType, handler, false);
} else if (oTarget.attachEvent) { // for IE
oTarget.attachEvent("on" + sEventType, handler);
} else { // for all others
oTarget["on" + sEventType] = handler;
}
};
// 移除事件监听
mfMessage.prototype.removeEventHandler = function(oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) { // for DOM-compliant browsers
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) { // for IE
oTarget.detachEvent("on" + sEventType, fnHandler);
} else { // for all others
oTarget["on" + sEventType] = null;
}
};
// 格式化事件对象
mfMessage.prototype.formatEvent = function(oEvent) {
var sUserAgent = navigator.userAgent;
var isOpera = sUserAgent.indexOf("Opera") > -1;
var isIE = sUserAgent.indexOf("compatible") > -1
&& sUserAgent.indexOf("MSIE") > -1
&& !isOpera;
var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
// 检测是否为Google公司开发的Chrome浏览器 - jie.tian@myfootprints.cn, 2009-11-13
var isChrome = sUserAgent.indexOf('Chrome') > -1;
// - jie.tian@myfootprints.cn
if ((isIE && isWin) || (isChrome)) {
// 下面这句程序对Chrome浏览器无效。你调用时请用 oEvent.keyCode，否则在Chrome浏览器可能总是出现 oEvent.charCode = 0 的现象，让你的程序失常 - jie.tian@myfootprints.cn, 2009-11-13
oEvent.charCode = (oEvent.type == "keypress" || oEvent.type == 'keyup' || oEvent.type == 'keydown') ? oEvent.keyCode : 0;
oEvent.eventPhase = 2;
oEvent.isChar = (oEvent.charcode > 0);
oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
oEvent.pageY = oEvent.clientY + document.body.scrollTop;
oEvent.preventDefault = function() {
this.returnValue = false;
};
if (oEvent.type == "mouseout") {
oEvent.relatedTarget = oEvent.toElement;
} else if (oEvent.type == "mouseover") {
oEvent.relatedTarget = oEvent.fromElement;
}
oEvent.stopPropagation = function() {
this.cancelBubble = true;
};
oEvent.target = oEvent.srcElement;
oEvent.time = (new Date()).getTime();
} else {
// 由于对于Chrome浏览器，event对象的charCode属性不可写，所以，不如统一成keyCode - jie.tian@myfootprints.cn, 2009-11-13
oEvent.keyCode = (oEvent.type == "keypress" || oEvent.type == 'keyup' || oEvent.type == 'keydown') ? oEvent.charCode : 0;
}
return oEvent;
};
mfMessage.prototype.getEvent = function() {
if (window.event) {
return this.formatEvent(window.event);
} else {
return EventUtil.getEvent.caller.arguments[0];
}
};
mfMessage.prototype.focusOnFirstFormElement = function() {
if (document.forms.length > 0) {
for (var i = 0; i < document.forms[0].elements.length; i++) {
var oField = document.forms[0].elements[i];
// 如果表单的某个元素是隐藏字段，这个字段是不支持focus()方法的。
// 另外在载入很慢的页面中，在页面完全载入完之前用户可能就开始进行输入了。这时如果再把焦点设置到第一个字段上，就会中断用户当前的输入。为处理这个问题，应该先检查是在第一个字段中已经有值。
// 如果有，则不改变焦点
if (oField.type != "hidden") {
try {
if (oField.value == '') {
oField.focus();
}
return;
} catch (e) {
// do nothing
}
}
}
}
};
mfMessage.prototype.showCookie = function() {
var s;
s = 'Cookie长度： ' + document.cookie.length + '
';
s += '- ' + document.cookie + '
';
s += '';
this.showHTMLMessage(s);
};
// 获取Cookie值
mfMessage.prototype.getCookieValue = function (sCookieName) {
var sSearch = sCookieName + '=';
var sReturn = '';
if (document.cookie.length > 0) {
var lOffset = document.cookie.indexOf(sSearch);
var lEnd;
if (lOffset != -1) {
lOffset += sSearch.length;
lEnd = document.cookie.indexOf(';', lOffset);
if (lEnd == -1) {
length = document.cookie.length;
}
sReturn = unescape(document.cookie.substring(lOffset, lEnd));
} else {
sReturn = '';
}
} else {
sReturn = '';
}
return sReturn;
};