xmlをxsltスタイルでxhtmlにパースするクラス TransformBinder (FFとIE7.0に対応)
2022-01-18 09:40:18
これまでの方法ではxsltはxmlファイル内に直接取り込む必要があり、プロジェクトで使用するxmlファイルはシステム生成のため、パスを提供するだけで、xml内の内容を書き換える方法がないため、xmlとxsltを外部から関連付けて、目的を達成し、かつ複数のxmlファイルに適用できる、管理のしやすい方法を探す必要があるのだそうです。
このシステムは、moduleという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("Your system does not have MSXML installed.");
} else if(document.implementation.createDocument){ // Firefox
var oXmlDom = document.implementation.createDocument("", "", null);
return oXmlDom;
} else{
throw new Error("The browser does not support the 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>Error code: ";
txt += sError.errorCode;
txt += "<br>Reason for error: ";
txt += sError.reason;
txt += "<br>Error line number: ";
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
<!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 = "Enter the XML path here";
var XSL = "Enter XSL path here";
var tempObj = new TransformBinder(XML,XSL);
tempObj.registerAction(transformXSLT);
tempObj.bind();
</script>
</body>
</html>
transform.jsの解析のため。
コンストラクタ xmlDom は、xml の dom 要素を作成するために使用されます。 IEではwindow.ActiveXObjectというメソッドで、FFではdocument.implementation.createDocumentというメソッドでdom要素を生成しています。
異なるバージョンのxmlに対応するIE ["MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0", "MSXML2.DOMDocument.3", "MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.5.0"] 。 .0", " MSXML2.DOMDocument","Microsoft.XmlDom"] と、for ループでトラバースして対応するバージョンを見つけ、new ActiveXObject(arrSignatures[i]) で dom を生成しています。
FF では document.implementation.createDocument("", "", null) を使用し、直接 dom を作成します。
ブラウザがXML DOMオブジェクトをサポートしていない場合、エラーを投げます。
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は比較的単純で、そこにエラー情報を読み込むparseError属性、errorCodeはエラーのコード、理由はエラーの原因、行はエラーの行番号、およびいくつかの他の情報、ここで限り、主なエラー情報を表示することができます、エラーがある場合は、次にエラーコンテンツを表示、エラーがない場合は、変換結果SResultを表示すること。FFはもう少し複雑で、XMLSerializerとXMLSerializer.serializeToString()を使用してxmlDomを文字列に変換し、domオブジェクトに文字列に変換し、変換の過程でエラーが報告された場合、あなたはparsererrorを含む情報を取得し、それがある場合取得文字列のタグ名がparsererrorであるかを判断し、domオブジェクトは再び文字列に変換して文字の内容を捨て、ない場合、sResultは変換結果が表示されます。
以下は注意点です。
a. IEではXMLのDTDエラーをチェックすることができますが、FFではXML自体の構文エラーしかチェックすることができません。
b. ブラウザの下でエラーを判断する必要があるため、最終的にうまくマージされず、コード構造があまり合理的に見えないことがあり、これもまた無力である。
TransformBinderというクラスで包むことで、拡張や修正が容易になります。 TransformBinder.prototype.registerAction というプロトタイプでイベントを登録し、TransformBinder.prototype.bind でイベントをバインドするので、このクラスを使う場合は new TransformBinder(XML, XSL) で transformXSLT イベントを登録し、bind でバインドするだけで効果が得られるようになっています。もし拡張が必要なら、新しいコンストラクタを作成し、このクラスに登録し、バインドすることで効果を得ることができます。
このシステムは、moduleという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("Your system does not have MSXML installed.");
} else if(document.implementation.createDocument){ // Firefox
var oXmlDom = document.implementation.createDocument("", "", null);
return oXmlDom;
} else{
throw new Error("The browser does not support the 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>Error code: ";
txt += sError.errorCode;
txt += "<br>Reason for error: ";
txt += sError.reason;
txt += "<br>Error line number: ";
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
コピーコード
コードは以下の通りです。
<!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 = "Enter the XML path here";
var XSL = "Enter XSL path here";
var tempObj = new TransformBinder(XML,XSL);
tempObj.registerAction(transformXSLT);
tempObj.bind();
</script>
</body>
</html>
transform.jsの解析のため。
コンストラクタ xmlDom は、xml の dom 要素を作成するために使用されます。 IEではwindow.ActiveXObjectというメソッドで、FFではdocument.implementation.createDocumentというメソッドでdom要素を生成しています。
異なるバージョンのxmlに対応するIE ["MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0", "MSXML2.DOMDocument.3", "MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.5.0"] 。 .0", " MSXML2.DOMDocument","Microsoft.XmlDom"] と、for ループでトラバースして対応するバージョンを見つけ、new ActiveXObject(arrSignatures[i]) で dom を生成しています。
FF では document.implementation.createDocument("", "", null) を使用し、直接 dom を作成します。
ブラウザがXML DOMオブジェクトをサポートしていない場合、エラーを投げます。
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は比較的単純で、そこにエラー情報を読み込むparseError属性、errorCodeはエラーのコード、理由はエラーの原因、行はエラーの行番号、およびいくつかの他の情報、ここで限り、主なエラー情報を表示することができます、エラーがある場合は、次にエラーコンテンツを表示、エラーがない場合は、変換結果SResultを表示すること。FFはもう少し複雑で、XMLSerializerとXMLSerializer.serializeToString()を使用してxmlDomを文字列に変換し、domオブジェクトに文字列に変換し、変換の過程でエラーが報告された場合、あなたはparsererrorを含む情報を取得し、それがある場合取得文字列のタグ名がparsererrorであるかを判断し、domオブジェクトは再び文字列に変換して文字の内容を捨て、ない場合、sResultは変換結果が表示されます。
以下は注意点です。
a. IEではXMLのDTDエラーをチェックすることができますが、FFではXML自体の構文エラーしかチェックすることができません。
b. ブラウザの下でエラーを判断する必要があるため、最終的にうまくマージされず、コード構造があまり合理的に見えないことがあり、これもまた無力である。
TransformBinderというクラスで包むことで、拡張や修正が容易になります。 TransformBinder.prototype.registerAction というプロトタイプでイベントを登録し、TransformBinder.prototype.bind でイベントをバインドするので、このクラスを使う場合は new TransformBinder(XML, XSL) で transformXSLT イベントを登録し、bind でバインドするだけで効果が得られるようになっています。もし拡張が必要なら、新しいコンストラクタを作成し、このクラスに登録し、バインドすることで効果を得ることができます。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン