FIREFOX/IE跨浏览器开发备忘

最新推荐文章于 2025-12-09 22:00:29 发布

原创最新推荐文章于 2025-12-09 22:00:29 发布 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #firefox #function #xml #ie #null

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种在Firefox和IE浏览器下处理XML文件的方法，包括判断浏览器类型、自定义属性的处理、XML加载方式及公共JS脚本实现。此外，还提供了解决XML节点为空的情况下的处理技巧。

　在客户这边解决B2C项目的FIREFOX/IE跨浏览器问题已经一个多月了，感觉FIREFOX比IE严谨很多，书写的代码需完全遵循W3C标准。现整理一下开发笔记，并不定期进行更新。

１、判断浏览器

if(document.implementation && document.implementation.createDocument){
　　//firefox code
}else if(typeof window.ActiveXObject != 'undefined') {
　　//ie code
}

２、input自定义属性的取值与赋值

　IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.

　取值：

　IE可以通过document.getElementById("test").flag或document.getElementById("test").getAttribute("flag")取值。

　FIREFOX必需通过document.getElementById("test").getAttribute("flag")才能取值。

　赋值：

　IE可以通过document.getElementById("test").flag="cool"或document.getElementById("test").setAttribute("flag","cool")

　FIREFOX必需通过document.getElementById("test").setAttribute("flag","cool")才能赋值。

３、XML的加载方式

　a）加载xml文件：

　IE:

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load("books.xml");

　FIREFOX:

xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async="false";
xmlDoc.load("books.xml");

　b）加载xml字符串：

　IE:

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(txt);

　FIREFOX:

parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");　

４、目前正在用的一个公共js脚本，此脚本从网络收集，自己整理了一下。

功能包括：使FIREFOX支持selectNodes()、selectSingleNode()以及xmlDom.xml()方法。

function loadConfigXml(urlXml)
{
    try{    
        if(document.implementation && document.implementation.createDocument){
            var Xmlhttp = new XMLHttpRequest();   
            var dom = document.implementation.createDocument("","",null);
            Xmlhttp.open("GET",urlXml,false);
            Xmlhttp.setRequestHeader("Content-Type","text/xml");
            Xmlhttp.send(null);
            parser=new DOMParser(); 
            dom = parser.parseFromString(Xmlhttp.responseText,"text/xml");
            return dom;
        }else if(typeof window.ActiveXObject != 'undefined') {      
            var Xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            var dom=new ActiveXObject("Msxml2.DOMDOCUMENT");
            Xmlhttp.open("GET",urlXml,false);
            Xmlhttp.setRequestHeader("Content-Type","text/xml");
            Xmlhttp.send();     
            dom.loadXML(Xmlhttp.responseText);
            return dom;
        }
    } catch(e){
        alert(e.description);
    }
}
//使FIREFOX支持selectNodes()、selectSingleNode() 
//代码出处：http://km0ti0n.blunted.co.uk/mozXPath.xap 
// check for XPath implementation 
if( document.implementation.hasFeature("XPath", "3.0") )
{
    // prototying the XMLDocument 
    XMLDocument.prototype.selectNodes = function(cXPathString, xNode)
    {
        if( !xNode ) { xNode = this; } 
        var oNSResolver = this.createNSResolver(this.documentElement)
        var aItems = this.evaluate(cXPathString, xNode, oNSResolver, 
        XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null)
        var aResult = [];
        for( var i = 0; i < aItems.snapshotLength; i++)
        {
            aResult[i] = aItems.snapshotItem(i);
        }
        return aResult;
    }
    // prototying the Element 
    Element.prototype.selectNodes = function(cXPathString){
        if(this.ownerDocument.selectNodes){
          return this.ownerDocument.selectNodes(cXPathString, this);
        }else{
            throw "For XML Elements Only";
        }
    }
}
    
    // check for XPath implementation 
if( document.implementation.hasFeature("XPath", "3.0")){
    // prototying the XMLDocument 
    XMLDocument.prototype.selectSingleNode = function(cXPathString, xNode){
        if( !xNode ){
            xNode = this;
        } 
        var xItems = this.selectNodes(cXPathString, xNode);
        if( xItems.length > 0 ){
            return xItems[0];
        }else{
            return null;
        }
    }
    
    // prototying the Element 
    Element.prototype.selectSingleNode = function(cXPathString){ 
        if(this.ownerDocument.selectSingleNode){
            return this.ownerDocument.selectSingleNode(cXPathString, this);
        }else{
            throw "For XML Elements Only";
        }
    }
}
//使fireFox也支持xmlDom.xml 
if(!document.all)
    Node.prototype.__defineGetter__
    (
        "xml",
        function()
        {
            return (new XMLSerializer).serializeToString(this);
        }
    );

以上方法在FIREFOX与IE环境下的使用方法相同，都是用 loadConfigXml("order.xml")加载一个xml文件，根据不同的浏览器返回一个xmlDom对象，然后就可以调用selectNodes()、selectSingleNode()、xml()方法。只是selectSingleNode()方法在使用时的写法不一样。

以下代码都是取ORDERNO节点的值：

IE：

xmlDom.selectSingleNode("/ORDER/ORDERNO").text;

fireFox:

xmlDom.selectSingleNode("/ORDER/ORDERNO/text()").nodeValue;

用getElementsByTagName()方法取ORDERNO节点的值：

IE：

xmlDoc.getElementsByTagName("ORDERNO").item(0).text

fireFox:

xmlDoc.getElementsByTagName("ORDERNO")[0].childNodes[0].nodeValue;

用getElementsByTagName()方法需要注意的是，如果ORDERNO节点为空节点即<ORDERNO/>时，以上IE的用法不会报错，而fireFox中会因为ORDERNO节点没有childNodes报错(报"undefined"错误);

５、判断XML节点是否为空节点并给空节点赋值

xmlDoc = loadConfigXml("order.xml");
if(document.implementation && document.implementation.createDocument){//FIREFOX 
    var c = xmlDoc.getElementsByTagName("ORDERNO")[0];
    if((typeof c.childNodes[0])=='undefined'){
        var newtext = xmlDoc.createTextNode("");
        c.appendChild(newtext);
    } 
        alert(c.childNodes[0].nodeValue);　//这里打印的值为空
        c.childNodes[0].nodeValue = "8888"; //赋值
        alert(c.childNodes[0].nodeValue);　//这里打印的值为"8888"
}else if(typeof window.ActiveXObject != 'undefined') {//IE 
　//selectSingleNode方式 
　/** 
　var c = xmlDoc.selectSingleNode("/ORDER/ORDERNO").text;
    alert(c);
    if(c==''){
        c="8888";
    }
    alert(c);
　**/
　//getElementsByTagName方式 
    var c = xmlDoc.getElementsByTagName("ORDERNO").item(0);
    alert(c.text);
    if(c.text==''){
        c.text="8888";
    }
    alert(c.text);
}