xsltスタイルでxmlをxhtmlに解析するクラスTransformBinder(FFとIE 7.0に対応)
5906 ワード
前の方法xsltはxmlファイルの内部で直接インポートする必要があるため、プロジェクトで使用するxmlファイルはシステムで生成され、パスしか提供できず、xmlの中の内容を書き換えることができないため、外部でxmlとxsltを関連付ける方法を探す必要があります.これは目的を達成しただけでなく、複数のxmlファイルにも適用でき、管理が便利です.
まずコードをつけて、システムの中でmoduleというjsを使ってパッケージ化して、moduleというツールは専門的にjsをパッケージ化するために使って、このツールの後の文章は更に紹介して、私自身は今使うだけで、まだその下層のコードを研究していません;ここではjsをクラスとクラスの実装方法を含むファイルに書きます.
次はjsコード:transform.js
以下はhtmlコード:XSLTtransform.htm
分析してjs:
xmlDomというコンストラクション関数はxmlを作成するためのdom要素であり、IEとFFではdomを作成する方法が異なり、IEはwindowを使用する.ActiveXObjectという方法で作成し、FFはdocument.implementation.createDocumentという方法で作成し,この2つの属性でIEかFFかを判断する.
IEでは、異なるバージョンのxml["MSXML 2.DOMDocument.5.0","MSXML 2.DOMDocument.4.0","MSXML 2.DOMDocument.3.0","MSXML 2.DOMDocument","Microsoft.XmlDom"]について、forループで対応するバージョンを検索してnew ActiveXObject(arrSignatures[i])を作成する.
FF下用document.implementation.createDocument("", "", null);直接domを作成します.
ブラウザがXML DOM objectをサポートしていない場合はthrowエラーです.
TransformXSLTというコンストラクション関数はXSLTでxmlをhtmlに変換しますが、FFではtransformNodeという方法はありません.
それからこの方法で変換を実現して、処理エラーの上でIEとFFはまた異なる処理方法があって、IEは比較的に簡単で、1つのparseError属性がエラー情報をロードして、errorCodeはエラーのコードで、reasonはエラーの原因で、lineはエラーの行番号で、その他のいくつかの情報があって、ここで主要なエラー情報を表示すればいいだけで、エラーが発生するとエラー内容が表示され、エラーが発生しない場合は変換の結果sResultが表示されます.FFでは比較的複雑で、XMLSerializerとXMLSerializerを使います.serializeToString()xmlDomを文字列に変換してから文字列をdomオブジェクトに変換し、変換中にエラーが報告されるとparsererrorを含む情報が得られ、得られた文字列のtagNameがparsererrorであるかどうかを判断し、もしそうであればdomオブジェクトを文字列に再変換して文字列の内容を投げ出し、そうでなければ変換の結果sResultを表示する.
ここにはいくつかの注意点があります.
a.IEはXMLのDTDエラーを検出できるが、FFではXML自体の文法エラーしか検出できない.
b.ブラウザでエラーを判断する必要があるため、最終的な結果がマージされず、コード構造が不合理に見える可能性がありますが、これも仕方がありません.
TransformBinderというクラスでカプセル化され、拡張や修正が容易になります.TransformBinder.prototype.レジスターアクションというプロトタイプはイベントを登録するために使用され、TransformBinderを使用する.prototype.bindはイベントをバインドし、このクラスを使用する必要がある場合、new TransformBinder(XML,XSL)だけで、transformXSLTイベントを登録し、bindをバインドすることで、この効果を実現します.拡張が必要な場合は、新しいコンストラクション関数を作成し、このクラスに登録してバインドすると効果が得られます.
まずコードをつけて、システムの中でmoduleというjsを使ってパッケージ化して、moduleというツールは専門的にjsをパッケージ化するために使って、このツールの後の文章は更に紹介して、私自身は今使うだけで、まだその下層のコードを研究していません;ここではjsをクラスとクラスの実装方法を含むファイルに書きます.
次はjsコード:transform.js
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(" 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 += "
: ";
txt += sError.errorCode;
txt += "
: ";
txt += sError.reason;
txt += "
: ";
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
<br>var XML = " XML ";
<br>var XSL = " XSL ";
<br>var tempObj = new TransformBinder(XML,XSL);
<br>tempObj.registerAction(transformXSLT);
<br>tempObj.bind();
<br>
分析してjs:
xmlDomというコンストラクション関数はxmlを作成するためのdom要素であり、IEとFFではdomを作成する方法が異なり、IEはwindowを使用する.ActiveXObjectという方法で作成し、FFはdocument.implementation.createDocumentという方法で作成し,この2つの属性でIEかFFかを判断する.
IEでは、異なるバージョンのxml["MSXML 2.DOMDocument.5.0","MSXML 2.DOMDocument.4.0","MSXML 2.DOMDocument.3.0","MSXML 2.DOMDocument","Microsoft.XmlDom"]について、forループで対応するバージョンを検索してnew ActiveXObject(arrSignatures[i])を作成する.
FF下用document.implementation.createDocument("", "", null);直接domを作成します.
ブラウザがXML DOM objectをサポートしていない場合はthrowエラーです.
TransformXSLTというコンストラクション関数はXSLTでxmlをhtmlに変換しますが、FFではtransformNodeという方法はありません.
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;
}
それからこの方法で変換を実現して、処理エラーの上でIEとFFはまた異なる処理方法があって、IEは比較的に簡単で、1つのparseError属性がエラー情報をロードして、errorCodeはエラーのコードで、reasonはエラーの原因で、lineはエラーの行番号で、その他のいくつかの情報があって、ここで主要なエラー情報を表示すればいいだけで、エラーが発生するとエラー内容が表示され、エラーが発生しない場合は変換の結果sResultが表示されます.FFでは比較的複雑で、XMLSerializerとXMLSerializerを使います.serializeToString()xmlDomを文字列に変換してから文字列をdomオブジェクトに変換し、変換中にエラーが報告されるとparsererrorを含む情報が得られ、得られた文字列のtagNameがparsererrorであるかどうかを判断し、もしそうであればdomオブジェクトを文字列に再変換して文字列の内容を投げ出し、そうでなければ変換の結果sResultを表示する.
ここにはいくつかの注意点があります.
a.IEはXMLのDTDエラーを検出できるが、FFではXML自体の文法エラーしか検出できない.
b.ブラウザでエラーを判断する必要があるため、最終的な結果がマージされず、コード構造が不合理に見える可能性がありますが、これも仕方がありません.
TransformBinderというクラスでカプセル化され、拡張や修正が容易になります.TransformBinder.prototype.レジスターアクションというプロトタイプはイベントを登録するために使用され、TransformBinderを使用する.prototype.bindはイベントをバインドし、このクラスを使用する必要がある場合、new TransformBinder(XML,XSL)だけで、transformXSLTイベントを登録し、bindをバインドすることで、この効果を実現します.拡張が必要な場合は、新しいコンストラクション関数を作成し、このクラスに登録してバインドすると効果が得られます.