小弟JS一窍不通,可是公司的程序又不得不需要,写好了却发现Firefox不支持selectSingleNode()和selectNodes()方法。
我把我的代码单独提取出来做成了一个小Demo,请各位帮忙看看!!谢谢了!!(1)HTML代码:js.html
<html>
<head>
<SCRIPT language=JavaScript type=text/JavaScript>
function changeRoomTypeMaxAllowedRooms(roomTypeElementId, numberOfRoomTypeElementId) {
for(var i = document.getElementById(numberOfRoomTypeElementId).options.length - 1; i >= 0; --i) {
document.getElementById(numberOfRoomTypeElementId).options.remove(i);
}
var roomTypeCode = document.getElementById(roomTypeElementId).value;
//这是从网上搜索出来的一个方法
var oXMLDoc = parseXML("roomtypes.xml");
oXMLDoc.async="false"; //Firefox浏览器不支持selectSingleNode()方法.
var roomTypeElement = oXMLDoc.selectSingleNode("//TempRoomType[@RoomTypeCode='" + roomTypeCode + "']");
var roomTypeMaxNumberOfAllowedRooms = 0;
if (roomTypeElement != null) roomTypeMaxNumberOfAllowedRooms = parseInt(roomTypeElement.getAttribute("MaxNumberOfAllowedRooms"));
else {
var oOption = document.createElement('OPTION');
oOption.text = "0";
oOption.value = "0";
document.getElementById(numberOfRoomTypeElementId).options.add(oOption);
}
for (var i = 1; i <= roomTypeMaxNumberOfAllowedRooms; ++i) {
var oOption = document.createElement('OPTION');
oOption.text = i;
oOption.value = i;
document.getElementById(numberOfRoomTypeElementId).options.add(oOption);
}
}
</SCRIPT>
<script type="text/javascript" src="firefox_dom_support1.js"></script>
</head><body onload="changeRoomTypeMaxAllowedRooms('roomType', 'numberOfRoomType');">
<select name="roomType" onchange="changeRoomTypeMaxAllowedRooms('roomType', 'numberOfRoomType');">
<option selected="selected" value="">-选择房间-</option>
<option value='TR'>三人房</option>
<option value='SB'>单人房</option>
<option value='TB'>双人两床房</option>
<option value='DB'>双人大床房</option>
<option value='Q'>四人房</option>
</select>
<select id="numberOfRoomType" name="numberOfRoomType" style="width:60">
</body>
</html>(2)XML文件,和刚才的文件放在同一个文件夹下面就行了:roomtypes.xml
<?xml version="1.0" encoding="UTF-8"?>
<xml-fragment>
<TempRoomType RoomTypeCode="Q" MaxNumberOfAllowedRooms="2" NumberOfPeople="4"/>
<TempRoomType RoomTypeCode="TR" MaxNumberOfAllowedRooms="3" NumberOfPeople="3"/>
<TempRoomType RoomTypeCode="TB" MaxNumberOfAllowedRooms="4" NumberOfPeople="2"/>
<TempRoomType RoomTypeCode="DB" MaxNumberOfAllowedRooms="4" NumberOfPeople="2"/>
<TempRoomType RoomTypeCode="SB" MaxNumberOfAllowedRooms="9" NumberOfPeople="1"/>
</xml-fragment>(3)我在网上搜出来一段代码,说是可以解决这个问题,但是没有起作用:
var isIE = !!document.all;function parseXML(fileName) {
var xmlDoc;
if (isIE) {
xmlDoc = new ActiveXObject("microsoft.XMLDOM");
xmlDoc.load(fileName);
} else {
//这里应该是关键。
//var parser = new DOMParser();
//xmlDoc = parser.parseFromString(xml, "text/xml");
xmlDoc = document.implementation.createDocument("", "xml-fragment", null);
xmlDoc.load(fileName)
}
return xmlDoc;
}if (!isIE) {
var ex;
XMLDocument.prototype.__proto__.__defineGetter__("xml", function () {
try {
return new XMLSerializer().serializeToString(this);
} catch(ex) {
var d = document.createElement("div");
d.appendChild(this.cloneNode(true));
return d.innerHTML;
}
});
Element.prototype.__proto__.__defineGetter__("xml", function () {
try {
return new XMLSerializer().serializeToString(this);
} catch(ex) {
var d = document.createElement("div");
d.appendChild(this.cloneNode(true));
return d.innerHTML;
}
});
XMLDocument.prototype.__proto__.__defineGetter__("text", function () {
return this.firstChild.textContent;
});
Element.prototype.__proto__.__defineGetter__("text", function () {
return this.textContent;
});
XMLDocument.prototype.selectSingleNode = Element.prototype.selectSingleNode = function (xpath) {
var x = this.selectNodes(xpath);
if (!x || x.length < 1) return null;
return x[0];
}
XMLDocument.prototype.selectNodes = Element.prototype.selectNodes = function (xpath) {
var xpe = new XPathEvaluator();
var nsResolver = xpe.createNSResolver(this.ownerDocument == null ? this.documentElement: this .ownerDocument.documentElement);
var result = xpe.evaluate(xpath, this, nsResolver, 0, null);
var found = [];
var res;
while (res = result.iterateNext()) found.push(res);
return found;
}
}请大家帮忙看一下,我的Demo在IE下运行的没有问题,但是在Firefox里面就不行。
我都着急死了!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
我把我的代码单独提取出来做成了一个小Demo,请各位帮忙看看!!谢谢了!!(1)HTML代码:js.html
<html>
<head>
<SCRIPT language=JavaScript type=text/JavaScript>
function changeRoomTypeMaxAllowedRooms(roomTypeElementId, numberOfRoomTypeElementId) {
for(var i = document.getElementById(numberOfRoomTypeElementId).options.length - 1; i >= 0; --i) {
document.getElementById(numberOfRoomTypeElementId).options.remove(i);
}
var roomTypeCode = document.getElementById(roomTypeElementId).value;
//这是从网上搜索出来的一个方法
var oXMLDoc = parseXML("roomtypes.xml");
oXMLDoc.async="false"; //Firefox浏览器不支持selectSingleNode()方法.
var roomTypeElement = oXMLDoc.selectSingleNode("//TempRoomType[@RoomTypeCode='" + roomTypeCode + "']");
var roomTypeMaxNumberOfAllowedRooms = 0;
if (roomTypeElement != null) roomTypeMaxNumberOfAllowedRooms = parseInt(roomTypeElement.getAttribute("MaxNumberOfAllowedRooms"));
else {
var oOption = document.createElement('OPTION');
oOption.text = "0";
oOption.value = "0";
document.getElementById(numberOfRoomTypeElementId).options.add(oOption);
}
for (var i = 1; i <= roomTypeMaxNumberOfAllowedRooms; ++i) {
var oOption = document.createElement('OPTION');
oOption.text = i;
oOption.value = i;
document.getElementById(numberOfRoomTypeElementId).options.add(oOption);
}
}
</SCRIPT>
<script type="text/javascript" src="firefox_dom_support1.js"></script>
</head><body onload="changeRoomTypeMaxAllowedRooms('roomType', 'numberOfRoomType');">
<select name="roomType" onchange="changeRoomTypeMaxAllowedRooms('roomType', 'numberOfRoomType');">
<option selected="selected" value="">-选择房间-</option>
<option value='TR'>三人房</option>
<option value='SB'>单人房</option>
<option value='TB'>双人两床房</option>
<option value='DB'>双人大床房</option>
<option value='Q'>四人房</option>
</select>
<select id="numberOfRoomType" name="numberOfRoomType" style="width:60">
</body>
</html>(2)XML文件,和刚才的文件放在同一个文件夹下面就行了:roomtypes.xml
<?xml version="1.0" encoding="UTF-8"?>
<xml-fragment>
<TempRoomType RoomTypeCode="Q" MaxNumberOfAllowedRooms="2" NumberOfPeople="4"/>
<TempRoomType RoomTypeCode="TR" MaxNumberOfAllowedRooms="3" NumberOfPeople="3"/>
<TempRoomType RoomTypeCode="TB" MaxNumberOfAllowedRooms="4" NumberOfPeople="2"/>
<TempRoomType RoomTypeCode="DB" MaxNumberOfAllowedRooms="4" NumberOfPeople="2"/>
<TempRoomType RoomTypeCode="SB" MaxNumberOfAllowedRooms="9" NumberOfPeople="1"/>
</xml-fragment>(3)我在网上搜出来一段代码,说是可以解决这个问题,但是没有起作用:
var isIE = !!document.all;function parseXML(fileName) {
var xmlDoc;
if (isIE) {
xmlDoc = new ActiveXObject("microsoft.XMLDOM");
xmlDoc.load(fileName);
} else {
//这里应该是关键。
//var parser = new DOMParser();
//xmlDoc = parser.parseFromString(xml, "text/xml");
xmlDoc = document.implementation.createDocument("", "xml-fragment", null);
xmlDoc.load(fileName)
}
return xmlDoc;
}if (!isIE) {
var ex;
XMLDocument.prototype.__proto__.__defineGetter__("xml", function () {
try {
return new XMLSerializer().serializeToString(this);
} catch(ex) {
var d = document.createElement("div");
d.appendChild(this.cloneNode(true));
return d.innerHTML;
}
});
Element.prototype.__proto__.__defineGetter__("xml", function () {
try {
return new XMLSerializer().serializeToString(this);
} catch(ex) {
var d = document.createElement("div");
d.appendChild(this.cloneNode(true));
return d.innerHTML;
}
});
XMLDocument.prototype.__proto__.__defineGetter__("text", function () {
return this.firstChild.textContent;
});
Element.prototype.__proto__.__defineGetter__("text", function () {
return this.textContent;
});
XMLDocument.prototype.selectSingleNode = Element.prototype.selectSingleNode = function (xpath) {
var x = this.selectNodes(xpath);
if (!x || x.length < 1) return null;
return x[0];
}
XMLDocument.prototype.selectNodes = Element.prototype.selectNodes = function (xpath) {
var xpe = new XPathEvaluator();
var nsResolver = xpe.createNSResolver(this.ownerDocument == null ? this.documentElement: this .ownerDocument.documentElement);
var result = xpe.evaluate(xpath, this, nsResolver, 0, null);
var found = [];
var res;
while (res = result.iterateNext()) found.push(res);
return found;
}
}请大家帮忙看一下,我的Demo在IE下运行的没有问题,但是在Firefox里面就不行。
我都着急死了!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
<html>
<head>
<title>Firefox中Javascript读取XML数据selectSingleNode实例</title>
<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");
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"));
var msg=document.getElementById("msg");
msg.innerHTML+="<a href="+strloc+">"+strsite+"</a> 加入日期:"+straddtime+"<br/>";
}
}
catch(exception)
{
alert("error!");
}
}
}
}
xmlHttp.open("GET", "urllink.xml", true);
xmlHttp.send(null);
}
catch(exception)
{
alert("您要访问的资源不存在!");
}
}</script>
</head><body>这是一个实例<br>
firefox模拟selectSingleNode方法获取xml数据,兼容IE<br>
解决了一些一些网站的ajax在firefox下面无法显示的问题,<a href="javascript:loadXML();" ><B>查看</B></a>:<br>
<div id="msg" style="width:500px; height:auto;margin:8px;padding:4px"></div>
查看本页源代码,有相应的js, XML数据文件urllink.xml
</body>
</html>