Main / 程序语言

<< Iptables | Javascript | 其他 >>

Updated: 2007-09-15-13:25:48
让 Firefox 也支持 insertAdjacentElement
简化 document.getElementById('elementID') 为 $('elementID')
控制层的显示和隐藏
支持 和 不支持 浏览器 前进后退操作的 Ajax 函数
在数据加载的过程中,打开一个小提示,加载完后,将其隐去
可拖动的层 (抄Google的 层的ID为mainmsg 初始高度为148 左边距 160)

让 Firefox 也支持 insertAdjacentElement

if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement)
{
    HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode)
        {
            switch (where)
        {
            case 'beforeBegin':
                this.parentNode.insertBefore(parsedNode,this)
                break;
            case 'afterBegin':
                this.insertBefore(parsedNode,this.firstChild);
                break;
            case 'beforeEnd':
                this.appendChild(parsedNode);
                break;
            case 'afterEnd':
                if (this.nextSibling) this.parentNode.insertBefore(parsedNode,this.nextSibling);
                else this.parentNode.appendChild(parsedNode);
                break;
        }
    }

    HTMLElement.prototype.insertAdjacentHTML = function (where,htmlStr)
    {
        var r = this.ownerDocument.createRange();
        r.setStartBefore(this);
        var parsedHTML = r.createContextualFragment(htmlStr);
        this.insertAdjacentElement(where,parsedHTML)
    }


    HTMLElement.prototype.insertAdjacentText = function (where,txtStr)
    {
        var parsedText = document.createTextNode(txtStr)
        this.insertAdjacentElement(where,parsedText)
    }
}

简化 document.getElementById('elementID') 为 $('elementID')

var w=window, d=w.document, $=null;

var IE_all_cache = new Object();

function IE_getElementById(id) {
    if (IE_all_cache[id] == null)
        IE_all_cache[id] = d.all[id];
    return IE_all_cache[id];
};

if (d.all) {if (!d.getElementById){d.getElementById = IE_getElementById;}};

var $=function(){
    if (typeof(arguments[0])!='string' || !arguments[0] || arguments[0]=="")
        return false;
    return d.getElementById(arguments[0]);
};

控制层的显示和隐藏

function MM_showHidden(id,show) {
    var mye=null;
    if (!id || id == "") return;
    if ((mye=$(id)) == null) return;
    // alert(mye.style.visibility);
    if (typeof(show)=="string" && show!="") {
        mye.style.display = (show=="none") ? "none" : "block";
    } else {
        mye.style.display = (mye.style.display=="none") ? "block" : "none";
    }
    return;
}

支持 和 不支持 浏览器 前进后退操作的 Ajax 函数

var w=window, d=w.document, $=null, r=Math.ceil(Math.random()*1000000);

w.dataUrl = "index.php";

// 构造并返回xml数据的URL地址
function MM_getDataUrl()
{
    var act = ""
    if (typeof(arguments[0])=="string" && arguments[0]!="")
        act = "?act=" + arguments[0];
    else
        act = "?act=main.xml_view";
    return w.dataUrl + act + "&rand=" + (++r); // 添加递增的数,避免数据被缓存
}

// 如果需要前进后退操作 onclick=MM_iframePost('act_str')
function MM_iframePost()
{
    var act="", mye=null;
    if (typeof(w.citie)=="string" && w.citie=="") return;
    if ((mye=d.getElementById('iframedata'))==null) return;
    mye.src = (typeof(arguments[0])=="string" && arguments[0]!="") ? MM_getDataUrl(arguments[0]) : MM_getDataUrl();
}

// 当 iframe 加载完 xml 的时候会调用此函数,获取iframe里的xmlObject,并传递给 MM_xmlAction
function MM_dataLoad()
{
    var xmlObj = new Object();
    var xmlDoc = null;
    if (w.isIE) {
        xmlDoc = iframedata.document.XMLDocument.documentElement;
        xmlObj.xml = "<?xml version=\"1.0\"?>\n" + xmlDoc.xml;
    } else if (w.isNav){
        xmlDoc = iframedata.document.documentElement;
        var oSerializer = new XMLSerializer();
        xmlObj.xml = "<?xml version=\"1.0\"?>\n" + oSerializer.serializeToString(xmlDoc);
    }
    xmlObj = MM_objectToval(xmlObj, xmlDoc, 'xmlObj');
    MM_xmlAction(xmlObj);
}

// 不需要前进后退操作 onclick=MM_xmlLoad('act_str')
function MM_xmlLoad(url,data) //{{{ Create xmlhttp object
{
    var xmlhttp=null;
    try {
        xmlhttp = new XMLHttpRequest();
    } catch (e) {
        var a = ['MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0',
                 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'MICROSOFT.XMLHTTP.1.0',
                 'MICROSOFT.XMLHTTP.1', 'MICROSOFT.XMLHTTP'];
        for (var ii=0; ii<a.length; ii++) {
            try {
                xmlhttp = new ActiveXObject(a[ii]);
                break;
            } catch (e) {}
        }
    }
    if(xmlhttp)
    {
        var url = (typeof(url)=="string" && url!="") ? MM_getDataUrl(url) : MM_getDataUrl();
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status=="200")
            {
                try{
                    var x = null;
                    x = xmlhttp.responseXML;
                    x = MM_docToobj(x);
                    MM_xmlAction(x);
                } catch(e) {}
            }
        }
        if (url.indexOf("?")!=-1){url += '&rand='+(++w.rand);}else{url += '?rand='+(++w.rand);};
        if (typeof(data)!="string" || !data || data==""){
            xmlhttp.open("GET", url, true);
            data=null;
        }else{
            xmlhttp.open("POST", url, true);
        }
        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
        xmlhttp.send(data);
    }
}

// 获取 xml 内容, 调用 MM_objectToval ,返回xml数结构数组
function MM_docToobj(xmlDoc){
    var xmlObj = new Object();
    xmlObj.cmd = "";
    var rootElement = xmlDoc.documentElement;
    if (w.isIE) {
        xmlObj.xml = xmlDoc.xml;
    } else if (w.isNav){
        var oSerializer = new XMLSerializer();
        xmlObj.xml = "<?xml version=\"1.0\"?>\n" + oSerializer.serializeToString(rootElement);
    }
    if (typeof(xmlDoc)!="object" || !rootElement)
        return false;
    xmlObj = MM_objectToval(xmlObj, rootElement, 'xmlObj');
    return xmlObj;
}

// 将 xmlObject 转为 xml 树结构数组
function MM_objectToval(xmlObj, nElement, parentObjName)
{
    var xmlObjNodeName = xmlObjNodeText = "";
    xmlObjNodeName += nElement.nodeName + "";
    try{
        xmlObjNodeText = nElement.childNodes[0].nodeValue;
    } catch(e) {
        xmlObjNodeText="";
    }
    xmlObjNodeText = (!xmlObjNodeText || xmlObjNodeText==null || xmlObjNodeText=="") ? "" : xmlObjNodeText.trim();
    var xmlDocNodeAttributes = nElement.attributes;
    var nowObjName = parentObjName + '.' + xmlObjNodeName;
    var n = 0;
    try{
        eval('nowObj = ' + parentObjName + '.' + xmlObjNodeName);
        if (nowObj && nowObj[0])
            n = nowObj.length;
        else
            eval(nowObjName + '=[]');
    } catch(e) {
        eval(nowObjName + '=[]');
    }
    nowObjName += '[' + n + ']';
    eval(nowObjName + ' = new Object()')
    eval(nowObjName + '.text=\'' + xmlObjNodeText.removeEnter() + '\'');
    eval(nowObjName + '.attrib=[]');
    for (var ii=0; ii<xmlDocNodeAttributes.length; ii++)
    {
        eval(nowObjName + '.attrib[\''+xmlDocNodeAttributes[ii].nodeName+'\']=\''+xmlDocNodeAttributes[ii].nodeValue+'\'');
    }
    var nChildNodes = nElement.childNodes;
    for (var ii=0; ii<nChildNodes.length; ii++)
    {
        if (nChildNodes[ii].nodeType==1)
        {
            xmlObj = MM_objectToval(xmlObj, nChildNodes[ii], nowObjName);
        }
    }
    return xmlObj;
}

// 拿到 xml 数组后 执行的动作
function MM_xmlAction()
{
    var xmlObj=new Object();
    if (typeof(arguments[0])!="object"){return;}else{xmlObj=arguments[0];}
    alert(xmlObj.xml);
}

// 在页面最后 建立一个 iframe 如果完成调试,可以将高和框变为0 , 并且可以通过设置 style
// style="position:absolute; top:0px; left:0px; width:0px; height:0px; display:none; overflow:hidden"
// 将其隐藏
function MM_iframeLoad2()
{
    var ifm="";//, act="";
    ifm+='<iframe width="1004" height="500" frameborder="1" scrolling="yes" src="" height="0" id="iframedata" name="iframedata"';
    ifm+='  onload="MM_dataLoad();"';
    ifm+=' style="width:1004px; height:500px;"></iframe>';
    d.getElementsByTagName('body')[0].insertAdjacentHTML("beforeEnd",ifm);
}

// 当页面加载完的时候,在页面最后添加 iframe ,如果不通过JS,而是直接把iframe写在html里,那么
// 当html 加载的时候 iframe.onload 就会执行,结果可能是出错,逻辑上也不正确
function MM_bodyOnload()
{
    MM_iframeLoad2();
}

// 这样来添加 window.onload 不会覆盖 页面的 onload ,而是产生 onload 的队列(好像是...)
if (window.addEventListener) {
    window.addEventListener('load', MM_bodyOnload, false);
} else if (window.attachEvent) {
    window.attachEvent('onload', MM_bodyOnload);
}

在数据加载的过程中,打开一个小提示,加载完后,将其隐去

function MM_xmlLoaded()
{
    var mye = d.getElementById('xmlLoading');
    if (mye)
        MM_showHidden('xmlLoading', 'none');
}

function MM_xmlLoading()
{
    var LoadHtml = '<div style="padding: 5px 5px 2px 2px; position:absolute; top:5px; right:5px; border: 1px solid #646464; z-index:10; background-color: #FFFFCC; width:146px; height:20px; font-weight: bold; font-size: 8.5pt; display:block" align="center" valign="center" id="xmlLoading" onclick="this.style.display=\'none\'"><img src="http://union.doopai.com/images/manage/animated_loading.gif" width="16" height="16" align="center" valign="center"/>&nbsp;&nbsp;Data&nbsp;Loding&nbsp;...</div>';
    var mye = d.getElementById('xmlLoading');
    if (!mye)
        d.body.insertAdjacentHTML('beforeEnd', LoadHtml);
    if (mye)
        MM_showHidden('xmlLoading', 'block');
}

可拖动的层 (抄Google的 层的ID为mainmsg 初始高度为148 左边距 160)

w.ur_popid = 'mainmsg';
w.ur_mpos_x=0;
w.ur_mpos_y=0;
w.ur_ppos_x=148;
w.ur_ppos_y=160;

function urMovePopup(action) {
   var mye=null;
   if ((mye=document.getElementById(w.ur_popid)) == null) return;
   if (!action) {
      document.body.onmousemove = function(e) { urMovePopWin(e);  }
      document.body.onmouseup = function(e) { urMovePopup(1); }
      mye.onmouseup = function(e) { urMovePopup(1);  }
      if (!w.isIE5) mye.style.cursor = "move";
   } else {
      document.body.onmousemove = null;
      document.body.onmouseup = null;
      mye.onmouseup = null;
      if (!w.isIE5) mye.style.cursor = "auto";

      ur_mpos_x=0;
      ur_mpos_y=0;
   }
}

function urMovePopWin(evt) {
   var mye=null;
   if ((mye=document.getElementById(w.ur_popid)) == null) return;
   if (w.isIE) evt = event;

   if (!w.ur_mpos_x) w.ur_mpos_x=evt.clientX;
   if (!w.ur_mpos_y) w.ur_mpos_y=evt.clientY;

   myx = (evt.clientX-w.ur_mpos_x);
   myy = (evt.clientY-w.ur_mpos_y);

   w.ur_ppos_x += myx;
   w.ur_ppos_y += myy;
   mye.style.left = w.ur_ppos_x+"px";
   mye.style.top  = w.ur_ppos_y+"px";

   w.ur_mpos_x = evt.clientX;
   w.ur_mpos_y = evt.clientY;
}