1. 首頁 > 生活經驗 > >

兼容IE、FireFox、Chrome等瀏覽器的xml處理函數js代碼

在編寫處理xml的網頁時，經常為瀏覽器兼容性頭疼 。于是我將常用的xml操作封裝為函數 。經過一段時間的改進，現在已經很穩定了 ， 用起來很舒服 。
函數有——
xml_loadFile：xml同步/異步加載 。
xml_transformNode：xsl轉換 。
xml_text：節點的文本 。
selectSingleNode：根據XPath選擇單個節點 。
selectNodes：根據XPath選擇多個節點 。
全部代碼（zyllibjs_xml.js）——
復制代碼 代碼如下:
/*
zyllibjs_xml
XML處理
@author zyl910
注意——
1. Chrome 由于其安全機制限制, 不能讀取本地文件 。
Reference
~~~~~~~~~
http://www.jinlie.net/?p=302
Chrome瀏覽器加載XML文檔
Update
~~~~~~
[2011-11-02]
定義 。
[2011-11-09]
xml_loadFile: 為回調函數加上isError參數 。
[2011-11-21]
selectSingleNode
selectNodes
*/
// 加載XML文件并返回XML文檔節點
// return: 成功時返回一個對象（同步模式下返回xml文檔對象，異步模式下返回操作對象），失敗時返回空 。
// xmlUrl: xml文件的url 。
// funcAsync: 回調函數. function onload(xmlDoc, isError){ ... }
function xml_loadFile(xmlUrl, funcAsync)
{
var xmlDoc = null;
var isChrome = false;
var asyncIs = (null!=funcAsync); // 是否是異步加載 。當funcAsync不為空時，使用異步加載，否則是同步加載 。
// 檢查參數
if (""==xmlUrl) return null;
if (asyncIs)
{
if ("function"!=typeof(funcAsync)) return null;
}
// 創建XML對象
try
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); // Support IE
}
catch(ex)
{
}
if (null==xmlDoc)
{
try
{
// Support Firefox, Mozilla, Opera, etc
xmlDoc = document.implementation.createDocument("", "", null); // 創建一個空的 XML 文檔對象 。
}
catch(ex)
{
}
}
if (null==xmlDoc) return null;
// 加載XML文檔
xmlDoc.async = asyncIs;
if (asyncIs)
{
if(window.ActiveXObject)
{
xmlDoc.onreadystatechange = function(){
if(xmlDoc.readyState == 4)
{
var isError = false;
if (null!=xmlDoc.parseError)
{
isError = (0!=xmlDoc.parseError.errorCode); // 0成功, 非0失敗 。
}
funcAsync(xmlDoc, isError);
}
}
}
else
{
xmlDoc.onload = function(){
funcAsync(xmlDoc, false);
}
}
}
try
{
xmlDoc.load(xmlUrl);
}
catch(ex)
{
// alert(ex.message) // 如果瀏覽器是Chrome，則會catch這個異常：Object # (a Document) has no method "load"
isChrome = true;
xmlDoc = null;
}
if (isChrome)
{
var xhr = new XMLHttpRequest();
if (asyncIs) // 異步
{
xhr.onreadystatechange = function(){
if(xhr.readyState == 4)
{
funcAsync(xhr.responseXML, xhr.status != 200);
}
}
xhr.open("GET", xmlUrl, true);
try // 異步模式下，由回調函數處理錯誤 。
{
xhr.send(null);
}
catch(ex)
{
funcAsync(null, true);
return null;
}
return xhr; // 注意：返回的是XMLHttpRequest 。建議異步模式下僅用null測試返回值 。
}
else // 同步
{
xhr.open("GET", xmlUrl, false);
xhr.send(null); // 同步模式下，由調用者處理異常
xmlDoc = xhr.responseXML;
}
}
return xmlDoc;
}
// 使用XSLT把XML文檔轉換為一個字符串 。
function xml_transformNode(xmlDoc, xslDoc)
{
if (null==xmlDoc) return "";
if (null==xslDoc) return "";
if (window.ActiveXObject) // IE
{
return xmlDoc.transformNode(xslDoc);
}
else // FireFox, Chrome
{
//定義XSLTProcesor對象
var xsltProcessor=new XSLTProcessor();
xsltProcessor.importStylesheet(xslDoc);
// transformToDocument方式
var result=xsltProcessor.transformToDocument(xmlDoc);
var xmls=new XMLSerializer();
var rt = xmls.serializeToString(result);
return rt;
}
}
// 得到節點的文本
function xml_text(xmlNode)
{
if (null==xmlNode) return "";
var rt;
if (window.ActiveXObject) // IE
{
rt = xmlNode.text;
}
else
{
// FireFox, Chrome, ...
rt = xmlNode.textContent;
}
if (null==rt) rt=xmlNode.nodeValue; // XML DOM
return rt;
}
// 添加方法 。為了兼容FireFox、Chrome 。
if (!window.ActiveXObject)
{
XMLDocument.prototype.selectSingleNode = Element.prototype.selectSingleNode = function (xpath)
{
var x = this.selectNodes(xpath)
if ( ! x || x.length1 ) 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;
}
}

Chrome瀏覽器加載XML文檔
Chrome瀏覽器不支持load方法加載XML文檔 。網上找了下，需要如下解決：
復制代碼 代碼如下:
function loadXMLDoc(xml_name)
{
var xmlDoc;
try
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); // Support IE
｝
catch(e)
{
try
{
// Support Firefox, Mozilla, Opera, etc
xmlDoc = document.implementation.createDocument("", "", null) ;// 創建一個空的 XML 文檔對象 。
}
catch(e)
{
alert(e.message);
}
}
// 加載XML文檔
try
{
xmlDoc.async = false; // 關閉異步加載
xmlDoc.load(xml_name);
}
catch(e)
{
// alert(e.message) 如果瀏覽器是Chrome，則會catch這個異常：Object # (a Document) has no method "load"，所以，以下實現支持chrome加載XML文檔（只是粗略的寫下）
var xhr = new XMLHttpRequest();
xhr.open("GET", xml_name, false);
xhr.send(null);
xmlDoc = xhr.responseXML.documentElement;
}
return xmlDoc;
}

BTW ， 各瀏覽器加載XML字符串也不同 。
IE使用 loadXML() 方法來解析 XML 字符串：
復制代碼 代碼如下:xmlDoc.loadXML(xml_str);
FireFox等使用DOMParser 對象解析XML字符串:
復制代碼 代碼如下:
var parseXml = new DOMParser();
var doc = parseXml.parseFromString(xml_str,"text/xml");
您可能感興趣的文章:FireFox與IE 下js兼容觸發click事件的代碼JS獲得鼠標位置（兼容多瀏覽器ie,firefox）經驗啦網修正版JS 獲取span標簽中的值的代碼 支持ie與firefoxIE,firefox(火狐)瀏覽器無提示關閉窗口js實現代碼小結js Firefox 加入收藏夾功能代碼 兼容Firefox 和 IEJS遮罩層效果 兼容ie firefox jQuery遮罩層兼容IE與firefox火狐的回車事件(js與jquery)js操作textarea方法集合封裝(兼容IE,firefox)JS事件Event元素(兼容IE,Firefox,Chorme)兼容IE和Firefox火狐的上下、左右循環無間斷滾動JS代碼利用js判斷瀏覽器類型(是否為IE,Firefox,Opera瀏覽器)js在IE與firefox的差異集錦

相關經驗推薦