<script type="text/javascript" src="http://www.myfootprints.cn/jsLib/mfMessage.js"></script>

两种信息提示方式的对比:


在2009年12月13日,我写了篇博文《无干扰模式的信息提示》,其中有文件 mfMessage.js,今天对它进行了一些小的改进,在这里将它贴出来。

以下是mfMessage.js的源代码,你可以复制到自己的网页应用中,不用作任何修改它就会工作得很好。如果你将它改进得更好,也请慷慨地与我([email protected])分享。谢谢!

//
// 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浏览器 - [email protected], 2009-11-13 var isChrome = sUserAgent.indexOf('Chrome') > -1; // - [email protected] if ((isIE && isWin) || (isChrome)) { // 下面这句程序对Chrome浏览器无效。你调用时请用 oEvent.keyCode,否则在Chrome浏览器可能总是出现 oEvent.charCode = 0 的现象,让你的程序失常 - [email protected], 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 - [email protected], 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; };