兼容IE、FireFox、Chrome等瀏覽器的xml處理函數(shù)js代碼
更新時(shí)間:2011年11月30日 22:12:26 作者:
JavaScript 兼容IE、FireFox、Chrome等瀏覽器的xml處理函數(shù)(xml同步/異步加載、xsl轉(zhuǎn)換、selectSingleNode、selectNodes)
在編寫(xiě)處理xml的網(wǎng)頁(yè)時(shí),經(jīng)常為瀏覽器兼容性頭疼。于是我將常用的xml操作封裝為函數(shù)。經(jīng)過(guò)一段時(shí)間的改進(jìn),現(xiàn)在已經(jīng)很穩(wěn)定了,用起來(lái)很舒服。
函數(shù)有——
xml_loadFile:xml同步/異步加載。
xml_transformNode:xsl轉(zhuǎn)換。
xml_text:節(jié)點(diǎn)的文本。
selectSingleNode:根據(jù)XPath選擇單個(gè)節(jié)點(diǎn)。
selectNodes:根據(jù)XPath選擇多個(gè)節(jié)點(diǎn)。
全部代碼(zyllibjs_xml.js)——
/*
zyllibjs_xml
XML處理
@author zyl910
注意——
1. Chrome 由于其安全機(jī)制限制, 不能讀取本地文件。
Reference
~~~~~~~~~
http://www.jinlie.net/?p=302
Chrome瀏覽器加載XML文檔
Update
~~~~~~
[2011-11-02]
定義。
[2011-11-09]
xml_loadFile: 為回調(diào)函數(shù)加上isError參數(shù)。
[2011-11-21]
selectSingleNode
selectNodes
*/
// 加載XML文件并返回XML文檔節(jié)點(diǎn)
// return: 成功時(shí)返回一個(gè)對(duì)象(同步模式下返回xml文檔對(duì)象,異步模式下返回操作對(duì)象),失敗時(shí)返回空。
// xmlUrl: xml文件的url。
// funcAsync: 回調(diào)函數(shù). function onload(xmlDoc, isError){ ... }
function xml_loadFile(xmlUrl, funcAsync)
{
var xmlDoc = null;
var isChrome = false;
var asyncIs = (null!=funcAsync); // 是否是異步加載。當(dāng)funcAsync不為空時(shí),使用異步加載,否則是同步加載。
// 檢查參數(shù)
if (""==xmlUrl) return null;
if (asyncIs)
{
if ("function"!=typeof(funcAsync)) return null;
}
// 創(chuàng)建XML對(duì)象
try
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); // Support IE
}
catch(ex)
{
}
if (null==xmlDoc)
{
try
{
// Support Firefox, Mozilla, Opera, etc
xmlDoc = document.implementation.createDocument("", "", null); // 創(chuàng)建一個(gè)空的 XML 文檔對(duì)象。
}
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,則會(huì)catch這個(gè)異常: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 // 異步模式下,由回調(diào)函數(shù)處理錯(cuò)誤。
{
xhr.send(null);
}
catch(ex)
{
funcAsync(null, true);
return null;
}
return xhr; // 注意:返回的是XMLHttpRequest。建議異步模式下僅用null測(cè)試返回值。
}
else // 同步
{
xhr.open("GET", xmlUrl, false);
xhr.send(null); // 同步模式下,由調(diào)用者處理異常
xmlDoc = xhr.responseXML;
}
}
return xmlDoc;
}
// 使用XSLT把XML文檔轉(zhuǎn)換為一個(gè)字符串。
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對(duì)象
var xsltProcessor=new XSLTProcessor();
xsltProcessor.importStylesheet(xslDoc);
// transformToDocument方式
var result=xsltProcessor.transformToDocument(xmlDoc);
var xmls=new XMLSerializer();
var rt = xmls.serializeToString(result);
return rt;
}
}
// 得到節(jié)點(diǎn)的文本
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.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;
}
}
Chrome瀏覽器加載XML文檔
Chrome瀏覽器不支持load方法加載XML文檔。網(wǎng)上找了下,需要如下解決:
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) ;// 創(chuàng)建一個(gè)空的 XML 文檔對(duì)象。
}
catch(e)
{
alert(e.message);
}
}
// 加載XML文檔
try
{
xmlDoc.async = false; // 關(guān)閉異步加載
xmlDoc.load(xml_name);
}
catch(e)
{
// alert(e.message) 如果瀏覽器是Chrome,則會(huì)catch這個(gè)異常:Object # (a Document) has no method "load",所以,以下實(shí)現(xiàn)支持chrome加載XML文檔(只是粗略的寫(xiě)下)
var xhr = new XMLHttpRequest();
xhr.open("GET", xml_name, false);
xhr.send(null);
xmlDoc = xhr.responseXML.documentElement;
}
return xmlDoc;
}
BTW,各瀏覽器加載XML字符串也不同。
IE使用 loadXML() 方法來(lái)解析 XML 字符串:
FireFox等使用DOMParser 對(duì)象解析XML字符串:
var parseXml = new DOMParser();
var doc = parseXml.parseFromString(xml_str,"text/xml");
函數(shù)有——
xml_loadFile:xml同步/異步加載。
xml_transformNode:xsl轉(zhuǎn)換。
xml_text:節(jié)點(diǎn)的文本。
selectSingleNode:根據(jù)XPath選擇單個(gè)節(jié)點(diǎn)。
selectNodes:根據(jù)XPath選擇多個(gè)節(jié)點(diǎn)。
全部代碼(zyllibjs_xml.js)——
復(fù)制代碼 代碼如下:
/*
zyllibjs_xml
XML處理
@author zyl910
注意——
1. Chrome 由于其安全機(jī)制限制, 不能讀取本地文件。
Reference
~~~~~~~~~
http://www.jinlie.net/?p=302
Chrome瀏覽器加載XML文檔
Update
~~~~~~
[2011-11-02]
定義。
[2011-11-09]
xml_loadFile: 為回調(diào)函數(shù)加上isError參數(shù)。
[2011-11-21]
selectSingleNode
selectNodes
*/
// 加載XML文件并返回XML文檔節(jié)點(diǎn)
// return: 成功時(shí)返回一個(gè)對(duì)象(同步模式下返回xml文檔對(duì)象,異步模式下返回操作對(duì)象),失敗時(shí)返回空。
// xmlUrl: xml文件的url。
// funcAsync: 回調(diào)函數(shù). function onload(xmlDoc, isError){ ... }
function xml_loadFile(xmlUrl, funcAsync)
{
var xmlDoc = null;
var isChrome = false;
var asyncIs = (null!=funcAsync); // 是否是異步加載。當(dāng)funcAsync不為空時(shí),使用異步加載,否則是同步加載。
// 檢查參數(shù)
if (""==xmlUrl) return null;
if (asyncIs)
{
if ("function"!=typeof(funcAsync)) return null;
}
// 創(chuàng)建XML對(duì)象
try
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); // Support IE
}
catch(ex)
{
}
if (null==xmlDoc)
{
try
{
// Support Firefox, Mozilla, Opera, etc
xmlDoc = document.implementation.createDocument("", "", null); // 創(chuàng)建一個(gè)空的 XML 文檔對(duì)象。
}
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,則會(huì)catch這個(gè)異常: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 // 異步模式下,由回調(diào)函數(shù)處理錯(cuò)誤。
{
xhr.send(null);
}
catch(ex)
{
funcAsync(null, true);
return null;
}
return xhr; // 注意:返回的是XMLHttpRequest。建議異步模式下僅用null測(cè)試返回值。
}
else // 同步
{
xhr.open("GET", xmlUrl, false);
xhr.send(null); // 同步模式下,由調(diào)用者處理異常
xmlDoc = xhr.responseXML;
}
}
return xmlDoc;
}
// 使用XSLT把XML文檔轉(zhuǎn)換為一個(gè)字符串。
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對(duì)象
var xsltProcessor=new XSLTProcessor();
xsltProcessor.importStylesheet(xslDoc);
// transformToDocument方式
var result=xsltProcessor.transformToDocument(xmlDoc);
var xmls=new XMLSerializer();
var rt = xmls.serializeToString(result);
return rt;
}
}
// 得到節(jié)點(diǎn)的文本
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.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;
}
}
Chrome瀏覽器加載XML文檔
Chrome瀏覽器不支持load方法加載XML文檔。網(wǎng)上找了下,需要如下解決:
復(fù)制代碼 代碼如下:
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) ;// 創(chuàng)建一個(gè)空的 XML 文檔對(duì)象。
}
catch(e)
{
alert(e.message);
}
}
// 加載XML文檔
try
{
xmlDoc.async = false; // 關(guān)閉異步加載
xmlDoc.load(xml_name);
}
catch(e)
{
// alert(e.message) 如果瀏覽器是Chrome,則會(huì)catch這個(gè)異常:Object # (a Document) has no method "load",所以,以下實(shí)現(xiàn)支持chrome加載XML文檔(只是粗略的寫(xiě)下)
var xhr = new XMLHttpRequest();
xhr.open("GET", xml_name, false);
xhr.send(null);
xmlDoc = xhr.responseXML.documentElement;
}
return xmlDoc;
}
BTW,各瀏覽器加載XML字符串也不同。
IE使用 loadXML() 方法來(lái)解析 XML 字符串:
復(fù)制代碼 代碼如下:
xmlDoc.loadXML(xml_str);
FireFox等使用DOMParser 對(duì)象解析XML字符串:
復(fù)制代碼 代碼如下:
var parseXml = new DOMParser();
var doc = parseXml.parseFromString(xml_str,"text/xml");
您可能感興趣的文章:
- js代碼判斷瀏覽器種類(lèi)IE、FF、Opera、Safari、chrome及版本
- 使用Chrome調(diào)試JavaScript的斷點(diǎn)設(shè)置和調(diào)試技巧
- JavaScript無(wú)提示關(guān)閉窗口(兼容IE/Firefox/Chrome)
- 解決javascript:window.close()在chrome,Firefox下失效的問(wèn)題
- 如何實(shí)現(xiàn)chrome瀏覽器關(guān)閉頁(yè)面時(shí)彈出“確定要離開(kāi)此面嗎?”
- 完美兼容IE,chrome,ff的設(shè)為首頁(yè)、加入收藏及保存到桌面js代碼
- JQuery自適應(yīng)IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
- jQuery一步一步實(shí)現(xiàn)跨瀏覽器的可編輯表格,支持IE、Firefox、Safari、Chrome、Opera
- jQuery旋轉(zhuǎn)插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
- chrome瀏覽器當(dāng)表單自動(dòng)填充時(shí)如何去除瀏覽器自動(dòng)添加的默認(rèn)樣式
- js chrome瀏覽器判斷代碼
- json格式化/壓縮工具 Chrome插件擴(kuò)展版
- 解決ExtJS在chrome或火狐中正常顯示在ie中不顯示的瀏覽器兼容問(wèn)題
- JavaScript獲取鼠標(biāo)坐標(biāo)的函數(shù)(兼容IE、FireFox、Chrome)
- 禁止選中文字兼容IE、Chrome、FF等
- javascript判斷chrome瀏覽器的方法
- Chrome擴(kuò)展頁(yè)面動(dòng)態(tài)綁定JS事件提示錯(cuò)誤
- Chrome開(kāi)發(fā)者工具9個(gè)調(diào)試技巧詳解
相關(guān)文章
微信小程序按鈕點(diǎn)擊跳轉(zhuǎn)頁(yè)面詳解
這篇文章主要介紹了微信小程序按鈕點(diǎn)擊跳轉(zhuǎn)頁(yè)面,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05JavaScript設(shè)計(jì)模式之職責(zé)鏈模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之職責(zé)鏈模式,對(duì)設(shè)計(jì)模式感興趣的同學(xué),可以參考下2021-04-04JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊箭頭旋轉(zhuǎn)180度功能
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊箭頭旋轉(zhuǎn)180度的效果,通過(guò)點(diǎn)擊三角按鈕旋轉(zhuǎn)180度,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-02-02JS求1到任意數(shù)之間的所有質(zhì)數(shù)的方法詳解
這篇文章主要介紹了JS求1到任意數(shù)之間的所有質(zhì)數(shù),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05Javascript string 擴(kuò)展庫(kù)代碼
Javascript原生的String處理函數(shù)顯得很不夠豐富2010-04-04