不同浏览器读取XML问题

IE和火狐读取XML的方式不同，所以也导致了系统兼容性的问题，下面介绍一种我认为比较好的兼容IE、火狐的读取XML方法。

因为IE和火狐在读取XML节点是有不同的属性，而我们不能再每次写一个节点的时候就判断是否为IE或者为火狐，这样不仅容易出错，而且代码还非常冗余，而如果我们在一开始就判断IE或者火狐的话，即需要些两套对应的代码，如果窗体布局需要修改，就需要修改两个地方，也相对不好维护，而这里我们把IE和火狐读取到的节点装入到数组中，然后通过调用数据来实现显示，是一个不错的解决方法。

 

var xmlChildDoc;
    var type = 1;                                        //默认为IE浏览器
    var data = new Array();                            //存储实体的数组   

    if (navigator.userAgent.indexOf("MSIE") > 0) {
        xmlChildDoc = new ActiveXObject("Microsoft.XMLDOM");   //实例化dom对象

        xmlChildDoc.async = false;
        xmlChildDoc.load(path);                       //加载xml文件
        // window.alert('IE');
    }
    else if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
        type = 2;
        xmlChildDoc = document.implementation.createDocument("", "", null);        //火狐不支持ActiveXObject
        xmlChildDoc.async = false;
        xmlChildDoc.load(path);

    }
    else {
        window.alert('暂不识别该浏览器!');
        return;
    }

    if (xmlChildDoc) {
        var nodes;

        if (type == 1)  //判断是否为IE浏览器
        {
         

            if (xmlChildDoc.documentElement == null)
                return;  //如果遇到空节点，则返回
            
            node = xmlChildDoc.documentElement.childNodes;     //这里的node大家可以理解为net中的表,方便大家理解  

            for (var i = 0; i < node.length; i++) {
                var ChildName = node[i].attributes[0].nodeTypedValue;             //取出i行中的字段的值，大家这样理解更方便
                var ChildUrl = node[i].attributes[1].nodeTypedValue;
                var ChildTarget = node[i].attributes[2].nodeTypedValue;
                data.push({ ChildName: ChildName, ChildUrl: ChildUrl, ChildTarget: ChildTarget });    

            }
        }
        else {
            var node = xmlChildDoc.getElementsByTagName("lititle");
            for (var i = 0; i < node.length; i++) {

                var ChildName = node[i].attributes[0].nodeValue;             //取出i行中的字段的值，大家这样理解更方便
                var ChildUrl = node[i].attributes[1].nodeValue;
                var ChildTarget = node[i].attributes[2].nodeValue;
                data.push({ ChildName: ChildName, ChildUrl: ChildUrl, ChildTarget: ChildTarget });   
            }
        }
    }
    else {
        window.alert("dom对象为空，失败了!");
        return;
    }


    //获得根接点
    var childNodes = xmlChildDoc.documentElement.childNodes;
    str += "<div class='menu-list'  ><div class='top-line'></div><ul class='nav-items'>";

    for (var i = 0; i < data.length; i++) {
        str += "<li class='ceshi move' ><a class='" + strNum + "'  href=javascript:Edit('" + data[i].ChildName + "','" + data[i].ChildUrl + "','" + data[i].ChildTarget + "')";


        str += "><span class='" + path + "'>";
        str += data[i].ChildName;
        str += "</span></a></li>";
    }

HTML += str + "</ul> </div>";

 

当然，浏览器不仅只有火狐和IE，所以，如果我们想继续兼容该怎么办呢，下面以谷歌和Opera为例。

如果我们像兼容其他浏览器，比如谷歌，谷歌读取XML和IE火狐都不同，所以我们需要在读取的时候在加上判断

 

else if (navigator.userAgent.indexOf("Chrome") >= 0) {        type = 2;
        var oXmlHttp = new XMLHttpRequest();
        oXmlHttp.open("GET", path, false);
        oXmlHttp.send(null);
        xmlChildDoc = oXmlHttp.responseXML;
    }

 

如果为Opera浏览器，同样，加上判断即可

(navigator.userAgent.indexOf("Opera") >= 0) 

 

这样，如果我们在不同的地方用到浏览器兼容问题，就可以写成判断，然后从网上找出相应浏览器的对于的语句，就可以解决问题了。

 

当然，随着现在浏览器的增加，我们不可能去兼容所有的浏览器，关键在于如何达到一个平衡，让我们的程序兼容主流的浏览器，对于一些很个性的浏览器，我们就可以不必去理会，毕竟，让系统兼容每一个浏览器，是一件费力不讨好的工作。