文章詳情頁(yè)
一個(gè)用xslt樣式將xml解析為xhtml的類TransformBinder（兼容FF和IE7.0）
瀏覽：540日期：2022-06-04 11:56:40
由于前面的方法xslt需要在xml文件內(nèi)部直接導(dǎo)入，而項(xiàng)目中用到的xml文件是系統(tǒng)生成的，只能提供路徑，而沒有辦法改寫xml里面的內(nèi)容，所以需要找一個(gè)方法能夠在外部將xml和xslt關(guān)聯(lián)在一起，這樣既達(dá)到了目的，也可以應(yīng)用于多個(gè)xml文件，方便管理。
先上代碼，系統(tǒng)中使用module這個(gè)js進(jìn)行打包，module這個(gè)工具是專門用來(lái)將js進(jìn)行打包，這個(gè)工具以后的文章再做介紹，我自己現(xiàn)在只會(huì)使用，還沒研究其底層的代碼；這邊我們將js寫在一個(gè)文件里面，包括類以及類實(shí)現(xiàn)的方法，
下面是js代碼：transform.js
復(fù)制代碼 代碼如下:
var XmlDom=function(){
if (window.ActiveXObject) { // IE
var arrSignatures = ["MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0",
"MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument",
"Microsoft.XmlDom"];
for (var i=0; i < arrSignatures.length; i++) {
try {
var oXmlDom = new ActiveXObject(arrSignatures[i]);
return oXmlDom;
} catch (oError) {
//ignore
}
}
throw new Error("你的系統(tǒng)沒有安裝 MSXML.");
} else if(document.implementation.createDocument){ // Firefox
var oXmlDom = document.implementation.createDocument("", "", null);
return oXmlDom;
} else{
throw new Error("瀏覽器不支持 XML DOM object.");
}
}
var transformXSLT=function(_XML,_XSL) {
if (window.Node) {
Node.prototype.transformNode = function(XslDom) {
var oProcessor = new XSLTProcessor();
oProcessor.importStylesheet(XslDom);
var oResultDom = oProcessor.transformToDocument(myXmlDom);
var oSerializer = new XMLSerializer();
var sXml = oSerializer.serializeToString(oResultDom, "text/xml");
return sXml;
}
}
var myXmlDom = new XmlDom();
myXmlDom.async=false;
var myXslDom = new XmlDom();
myXslDom.async=false;
myXmlDom.load(_XML);
myXslDom.load(_XSL);
var sResult=myXmlDom.transformNode(myXslDom);
if(window.ActiveXObject){
if(myXmlDom.parseError.errorCode != 0){
var sError=myXmlDom.parseError;
var txt = "";
txt += "<br>錯(cuò)誤代碼： ";
txt += sError.errorCode;
txt += "<br>錯(cuò)誤原因： ";
txt += sError.reason;
txt += "<br>錯(cuò)誤行號(hào)： ";
txt += sError.line;
document.write(txt);
}else{
document.write(sResult);
}
} else if(document.implementation.createDocument){
var oSerializer = new XMLSerializer();
var sXmlDom = oSerializer.serializeToString(myXmlDom, "text/xml");
var oParser = new DOMParser();
var oXmlDom = oParser.parseFromString(sXmlDom,"text/xml");
if (oXmlDom.documentElement.tagName == "parsererror") {
var oXmlSerializer = new XMLSerializer();
var sXmlError = oXmlSerializer.serializeToString(oXmlDom);
alert(sXmlError);
} else {
document.write(sResult);
}
}
}
var TransformBinder = function(XML,XSL) {
this.XML = XML;
this.XSL = XSL;
}
TransformBinder.prototype.registerAction = function(handlers) {
this.handlers = handlers;
}
TransformBinder.prototype.bind = function() {
var _this = this;
this.handlers(_this.XML,_this.XSL);
}
下面是html代碼：XSLTtransform.htm
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="transform.js"></script>
</head>
<body>
<script type="text/javascript">
var XML = "這里輸入XML路徑";
var XSL = "這里輸入XSL路徑";
var tempObj = new TransformBinder(XML,XSL);
tempObj.registerAction(transformXSLT);
tempObj.bind();
</script>
</body>
</html>
分析一下transform.js：
xmlDom這個(gè)構(gòu)造函數(shù)是用來(lái)創(chuàng)建xml的dom元素，對(duì)于IE和FF，創(chuàng)建dom的方法不一樣，IE是用window.ActiveXObject這個(gè)方法來(lái)創(chuàng)建，而FF用document.implementation.createDocument這個(gè)方法來(lái)創(chuàng)建，我們用這兩個(gè)屬性來(lái)判斷是IE還是FF。
IE下針對(duì)不同版本的xml["MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0", "MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument","Microsoft.XmlDom"]，用for循環(huán)進(jìn)行遍歷查找到對(duì)應(yīng)的版本再new ActiveXObject(arrSignatures[i])建立dom；
FF下用document.implementation.createDocument("", "", null);直接創(chuàng)建dom ；
如果瀏覽器不支持 XML DOM object則throw錯(cuò)誤 。
transformXSLT這個(gè)構(gòu)造函數(shù)用XSLT將xml轉(zhuǎn)換成html，F(xiàn)F下沒有transformNode這個(gè)方法，所以我們自己構(gòu)造了一個(gè)方法，
復(fù)制代碼 代碼如下:
Node.prototype.transformNode = function(XslDom) {
var oProcessor = new XSLTProcessor();
oProcessor.importStylesheet(XslDom);
var oResultDom = oProcessor.transformToDocument(myXmlDom);
var oSerializer = new XMLSerializer();
var sXml = oSerializer.serializeToString(oResultDom, "text/xml");
return sXml;
}
然后用這個(gè)方法實(shí)現(xiàn)轉(zhuǎn)換，在處理錯(cuò)誤上IE和FF又有不同的處理方法，IE比較簡(jiǎn)單，有一個(gè)parseError屬性裝載錯(cuò)誤信息，errorCode是錯(cuò)誤的代碼，reason是錯(cuò)誤原因，line是錯(cuò)誤的行號(hào)，還有其他一些信息，這里只要顯示主要的錯(cuò)誤信息就可以了，如果出錯(cuò)了就顯示出錯(cuò)內(nèi)容，如果沒有出錯(cuò)則顯示轉(zhuǎn)換的結(jié)果sResult。FF下就比較復(fù)雜一點(diǎn)，用XMLSerializer和XMLSerializer.serializeToString()將xmlDom轉(zhuǎn)換為字符串，再將字符串轉(zhuǎn)換成dom對(duì)象，在轉(zhuǎn)換的過(guò)程中如果報(bào)錯(cuò)，就能得到包含有parsererror的信息，判斷得到的字符串的tagName是不是parsererror，如果是則將dom對(duì)象再轉(zhuǎn)換成字符串拋出字符串中的內(nèi)容，如果不是則顯示轉(zhuǎn)換的結(jié)果sResult。
這里有幾個(gè)注意點(diǎn)：
a.IE能檢驗(yàn)出XML的DTD錯(cuò)誤，而FF下只能檢驗(yàn)出XML本身的語(yǔ)法錯(cuò)誤；
b.因?yàn)樾枰跒g覽器下判斷錯(cuò)誤，最終的結(jié)果不好合并，可能代碼結(jié)構(gòu)上看起來(lái)不太合理，這也是無(wú)奈之舉。
用TransformBinder這個(gè)類進(jìn)行封裝，便于擴(kuò)展和修改。TransformBinder.prototype.registerAction這個(gè)原型用于注冊(cè)事件，再用TransformBinder.prototype.bind將事件進(jìn)行綁定，需要使用這個(gè)類的時(shí)候，只需要new TransformBinder(XML,XSL),注冊(cè)transformXSLT事件，再bind進(jìn)行綁定，這樣就實(shí)現(xiàn)這個(gè)效果了。如果需要擴(kuò)展，再創(chuàng)建新的構(gòu)造函數(shù)，注冊(cè)并綁定到這個(gè)類上就可以實(shí)現(xiàn)效果。
先上代碼，系統(tǒng)中使用module這個(gè)js進(jìn)行打包，module這個(gè)工具是專門用來(lái)將js進(jìn)行打包，這個(gè)工具以后的文章再做介紹，我自己現(xiàn)在只會(huì)使用，還沒研究其底層的代碼；這邊我們將js寫在一個(gè)文件里面，包括類以及類實(shí)現(xiàn)的方法，
下面是js代碼：transform.js
復(fù)制代碼 代碼如下:
var XmlDom=function(){
if (window.ActiveXObject) { // IE
var arrSignatures = ["MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0",
"MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument",
"Microsoft.XmlDom"];
for (var i=0; i < arrSignatures.length; i++) {
try {
var oXmlDom = new ActiveXObject(arrSignatures[i]);
return oXmlDom;
} catch (oError) {
//ignore
}
}
throw new Error("你的系統(tǒng)沒有安裝 MSXML.");
} else if(document.implementation.createDocument){ // Firefox
var oXmlDom = document.implementation.createDocument("", "", null);
return oXmlDom;
} else{
throw new Error("瀏覽器不支持 XML DOM object.");
}
}
var transformXSLT=function(_XML,_XSL) {
if (window.Node) {
Node.prototype.transformNode = function(XslDom) {
var oProcessor = new XSLTProcessor();
oProcessor.importStylesheet(XslDom);
var oResultDom = oProcessor.transformToDocument(myXmlDom);
var oSerializer = new XMLSerializer();
var sXml = oSerializer.serializeToString(oResultDom, "text/xml");
return sXml;
}
}
var myXmlDom = new XmlDom();
myXmlDom.async=false;
var myXslDom = new XmlDom();
myXslDom.async=false;
myXmlDom.load(_XML);
myXslDom.load(_XSL);
var sResult=myXmlDom.transformNode(myXslDom);
if(window.ActiveXObject){
if(myXmlDom.parseError.errorCode != 0){
var sError=myXmlDom.parseError;
var txt = "";
txt += "<br>錯(cuò)誤代碼： ";
txt += sError.errorCode;
txt += "<br>錯(cuò)誤原因： ";
txt += sError.reason;
txt += "<br>錯(cuò)誤行號(hào)： ";
txt += sError.line;
document.write(txt);
}else{
document.write(sResult);
}
} else if(document.implementation.createDocument){
var oSerializer = new XMLSerializer();
var sXmlDom = oSerializer.serializeToString(myXmlDom, "text/xml");
var oParser = new DOMParser();
var oXmlDom = oParser.parseFromString(sXmlDom,"text/xml");
if (oXmlDom.documentElement.tagName == "parsererror") {
var oXmlSerializer = new XMLSerializer();
var sXmlError = oXmlSerializer.serializeToString(oXmlDom);
alert(sXmlError);
} else {
document.write(sResult);
}
}
}
var TransformBinder = function(XML,XSL) {
this.XML = XML;
this.XSL = XSL;
}
TransformBinder.prototype.registerAction = function(handlers) {
this.handlers = handlers;
}
TransformBinder.prototype.bind = function() {
var _this = this;
this.handlers(_this.XML,_this.XSL);
}
下面是html代碼：XSLTtransform.htm
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="transform.js"></script>
</head>
<body>
<script type="text/javascript">
var XML = "這里輸入XML路徑";
var XSL = "這里輸入XSL路徑";
var tempObj = new TransformBinder(XML,XSL);
tempObj.registerAction(transformXSLT);
tempObj.bind();
</script>
</body>
</html>
分析一下transform.js：
xmlDom這個(gè)構(gòu)造函數(shù)是用來(lái)創(chuàng)建xml的dom元素，對(duì)于IE和FF，創(chuàng)建dom的方法不一樣，IE是用window.ActiveXObject這個(gè)方法來(lái)創(chuàng)建，而FF用document.implementation.createDocument這個(gè)方法來(lái)創(chuàng)建，我們用這兩個(gè)屬性來(lái)判斷是IE還是FF。
IE下針對(duì)不同版本的xml["MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0", "MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument","Microsoft.XmlDom"]，用for循環(huán)進(jìn)行遍歷查找到對(duì)應(yīng)的版本再new ActiveXObject(arrSignatures[i])建立dom；
FF下用document.implementation.createDocument("", "", null);直接創(chuàng)建dom ；
如果瀏覽器不支持 XML DOM object則throw錯(cuò)誤 。
transformXSLT這個(gè)構(gòu)造函數(shù)用XSLT將xml轉(zhuǎn)換成html，F(xiàn)F下沒有transformNode這個(gè)方法，所以我們自己構(gòu)造了一個(gè)方法，
復(fù)制代碼 代碼如下:
Node.prototype.transformNode = function(XslDom) {
var oProcessor = new XSLTProcessor();
oProcessor.importStylesheet(XslDom);
var oResultDom = oProcessor.transformToDocument(myXmlDom);
var oSerializer = new XMLSerializer();
var sXml = oSerializer.serializeToString(oResultDom, "text/xml");
return sXml;
}
然后用這個(gè)方法實(shí)現(xiàn)轉(zhuǎn)換，在處理錯(cuò)誤上IE和FF又有不同的處理方法，IE比較簡(jiǎn)單，有一個(gè)parseError屬性裝載錯(cuò)誤信息，errorCode是錯(cuò)誤的代碼，reason是錯(cuò)誤原因，line是錯(cuò)誤的行號(hào)，還有其他一些信息，這里只要顯示主要的錯(cuò)誤信息就可以了，如果出錯(cuò)了就顯示出錯(cuò)內(nèi)容，如果沒有出錯(cuò)則顯示轉(zhuǎn)換的結(jié)果sResult。FF下就比較復(fù)雜一點(diǎn)，用XMLSerializer和XMLSerializer.serializeToString()將xmlDom轉(zhuǎn)換為字符串，再將字符串轉(zhuǎn)換成dom對(duì)象，在轉(zhuǎn)換的過(guò)程中如果報(bào)錯(cuò)，就能得到包含有parsererror的信息，判斷得到的字符串的tagName是不是parsererror，如果是則將dom對(duì)象再轉(zhuǎn)換成字符串拋出字符串中的內(nèi)容，如果不是則顯示轉(zhuǎn)換的結(jié)果sResult。
這里有幾個(gè)注意點(diǎn)：
a.IE能檢驗(yàn)出XML的DTD錯(cuò)誤，而FF下只能檢驗(yàn)出XML本身的語(yǔ)法錯(cuò)誤；
b.因?yàn)樾枰跒g覽器下判斷錯(cuò)誤，最終的結(jié)果不好合并，可能代碼結(jié)構(gòu)上看起來(lái)不太合理，這也是無(wú)奈之舉。
用TransformBinder這個(gè)類進(jìn)行封裝，便于擴(kuò)展和修改。TransformBinder.prototype.registerAction這個(gè)原型用于注冊(cè)事件，再用TransformBinder.prototype.bind將事件進(jìn)行綁定，需要使用這個(gè)類的時(shí)候，只需要new TransformBinder(XML,XSL),注冊(cè)transformXSLT事件，再bind進(jìn)行綁定，這樣就實(shí)現(xiàn)這個(gè)效果了。如果需要擴(kuò)展，再創(chuàng)建新的構(gòu)造函數(shù)，注冊(cè)并綁定到這個(gè)類上就可以實(shí)現(xiàn)效果。
標(biāo)簽：
XML/RSS
相關(guān)文章：
1. 用Flash和XML來(lái)構(gòu)造一個(gè)聊天室2. 編寫xml沒有代碼提示的解決方法3. 解決idea 從mapper方法直接點(diǎn)進(jìn)xml文件的問(wèn)題4. XML入門的常見問(wèn)題(二)5. javascript xml xsl取值及數(shù)據(jù)修改第1/2頁(yè)6. XML、DataSet、DataGrid結(jié)合一7. Python批量將csv文件轉(zhuǎn)化成xml文件的實(shí)例8. 怎樣在PHP 中運(yùn)用 SimpleXML 處理任務(wù)9. 得到XML文檔大小的方法10. XML基本概念XPath、XSLT與XQuery函數(shù)介紹
排行榜
網(wǎng)公網(wǎng)安備