firefox兼容ie读取xml节点方法的解决方案实例-优快云博客

本文介绍了一种在Firefox及IE浏览器中读取XML数据的方法，通过JavaScript实现了跨浏览器兼容性的解决方案。该方法利用了XPath进行XML节点的选择，并演示了如何在不同浏览器环境下加载并解析XML文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<title>Firefox中Javascript读取XML数据selectSingleNode实例</title>
<style>
body,p{font:normal 12px/180% "宋体";}
</style>

<script type="text/javascript">
var GetNodeValue = function(obj)
{
var str = "";
if(window.ActiveXObject)    //IE
{
str = obj.text;
}
else //Mozilla
{
try
{
   str = obj.childNodes[0].nodeValue;
}
catch(ex)
{
   str = "";
}
}
return str;
}

if(document.implementation && document.implementation.createDocument)
{
XMLDocument.prototype.loadXML = function(xmlString)
{
var childNodes = this.childNodes;
for (var i = childNodes.length - 1; i >= 0; i--)
   this.removeChild(childNodes[i]);

var dp = new DOMParser();
var newDOM = dp.parseFromString(xmlString, "text/xml");
var newElt = this.importNode(newDOM.documentElement, true);
this.appendChild(newElt);
};

// 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";}
    }
}
}

function loadXML()
{
    var xmlHttp;
    var name;

    if(window.ActiveXObject)
    {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest)
    {
        xmlHttp = new XMLHttpRequest();
    }
    try
    {
        xmlHttp.onreadystatechange = function()
        {
            if(xmlHttp.readyState == 4)
            {
                if (xmlHttp.status == 200)
                {
                    // 取得XML的DOM对象
                    var xmlDOM = xmlHttp.responseXML;
                    // 取得XML文档的根
                    var root = xmlDOM.documentElement;
                    try
                    {
                       var items = root.selectNodes("//urlset/url");
					   var msg = document.getElementById("msg1");
					   msg.innerHTML="";
                       for(var i=0;i<items.length;i++)
					   {
                        //取得XML文件中内容
                        var strloc = GetNodeValue(items[i].selectSingleNode("loc"));
                        var strsite=GetNodeValue(items[i].selectSingleNode("site"));
                        var straddtime=GetNodeValue(items[i].selectSingleNode("addtime"));
                        msg.innerHTML+="<a href="+strloc+" target=_blank>"+strsite+"</a>&nbsp;加入日期："+straddtime+"<br/>";
                       }
                    }
                    catch(exception)
                    {
                        alert("error!");
                    }
                }
            }
        }
        xmlHttp.open("GET", "urllink.xml", true);
        xmlHttp.send(null);
    }
    catch(exception)
    {
      alert("您要访问的资源不存在!");
    }
}
var xmlDoc;
function getdata()
{ 
  if (window.ActiveXObject) 
  { //IE
	  xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
	  xmlDoc.async=false;
	  xmlDoc.load("urllink.xml");	
	  domsg();
  }
  else if (document.implementation &&document.implementation.createDocument) 
  {//FF
	  xmlDoc= document.implementation.createDocument("","",null);	 
	  xmlDoc.async=false;
	  xmlDoc.load("urllink.xml");	
	  xmlDoc.onload=domsg();
  }
  else
  {
	alert('浏览器不支持脚本,无法加载XML文件');
  }  
}

function domsg()
{
	var root = xmlDoc.documentElement;	
    try{
        var msg2 = document.getElementById("msg2");
	    var items = root.selectNodes("//urlset/url");
		msg2.innerHTML="";
		for(i=0;i<items.length;i++)
		{
		   var strloc = GetNodeValue(items[i].selectSingleNode("loc"));
		   var strsite=GetNodeValue(items[i].selectSingleNode("site"));
		   var straddtime=GetNodeValue(items[i].selectSingleNode("addtime"));
		   msg2.innerHTML+="<a href="+strloc+" target=_blank>"+strsite+"</a>&nbsp;加入日期："+straddtime+"<br/>";
		}
	 }
	 catch (exception){
	   msg2.innerHTML="加载XML数据错误!";
	 }	
	 
	 

}
</script>
</head>

<body onload="getdata()">
<h1>这是一个firefox兼容ie读取xml节点方法的解决方案实例</h1>

<div style="margin:10px auto">
<h2>这里是实时读取xml文件节点</h2>
可以用于Html文件读取 XML中的最新数据、广告数据等。
<div id="msg2" style="width:500px;border:1px solid #e0e0e0; height:auto;margin:8px;padding:4px"><span>如果您看到这些内容，说明加载失败</span></div>
</div>

<div style="margin:10px auto">
<h2>这里是ajax异步读取xml文件节点</h2>
firefox模拟selectsinglenode方法获取xml数据，兼容ie，
解决了一些一些网站的ajax在firefox下面无法显示的问题<br>
<a href="javascript:loadXML();" ><B>点击加载XMl</B></a>：<br>
<div id="msg1" style="width:500px;;border:1px solid #e0e0e0; height:auto;margin:8px;padding:4px">请点击上面按钮加载XMl...</div>
</div>


查看本页源代码,有相应的js, XML数据文件urllink.xml<br>
<textarea name="urllink" rows="6" cols="60">
<?xml version="1.0" encoding="gb2312"?>
<urlset>
<url>
<site>思高数码</site>
<loc>http://www.cycoo.com</loc>
<addtime>2006-02-11</addtime>
</url>
<url>
<site>深南大道</site>
<loc>http://bbs.szroad.com</loc>
<addtime>2006-05-22</addtime>
</url>
<url>
<site>芒果网</site>
<loc>http://www.man-go.cn</loc>
<addtime>2007-01-21</addtime>
</url>
</urlset>
</textarea>
</body>
</html>

<?xml version="1.0" encoding="gb2312"?>
<urlset>
<url>
<site>思高数码</site>
<loc>http://www.cycoo.com</loc>
<addtime>2006-02-11</addtime>
</url>
<url>
<site>深南大道</site>
<loc>http://bbs.szroad.com</loc>
<addtime>2006-05-22</addtime>
</url>
<url>
<site>芒果网</site>
<loc>http://www.man-go.cn</loc>
<addtime>2007-01-21</addtime>
</url>
</urlset>