web-dev-qa-db-ja.com

JavaScriptを使用してXMLとXSLTを変換するにはどうすればよいですか？

JavaScriptを使用してXSLTを表示したいのですが、サーバー上でブラウザーに何も表示されません。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<meta http-equiv="Content-Language" content="en-us"/>
<title>Contracting, Licensing and Compliance News</title>
</head>
<body>
<script language="javascript">
    function displayMessage() {
        // Load XML 

        var xml = new ActiveXObject("Microsoft.XMLDOM")
        xml.async = false
        xml.load("site-index.xml")

        // Load the XSL
        var xsl = new ActiveXObject("Microsoft.XMLDOM")
        xsl.async = false
        xsl.load("site-index.xsl")

        // Transform
        document.write(xml.transformNode(xsl))
    }
</script>
</body>
</html>
javascriptxmlinternet-explorerbrowserxslt
11
okMonty

ブラウザが変換を実行できます。 javascriptは必要ありません。次のように、.xmlから.xslをリンクするだけです。

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="site-index.xsl" ?>

htmlではなくxmlを提供するだけです。 .xslに正しいコードが含まれていると仮定します

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.01" indent="yes"/>
<xsl:output doctype-system="http://www.w3.org/TR/html4/strict.dtd"/>
<xsl:output doctype-public="-//W3C//DTD HTML 4.01//EN"/>
8
Xenan

Xenanが概説する方法を使用して、ブラウザーが変換を実行できるようにすることをお勧めします。ただし、JavaScriptでもこれを行うことは完全に可能です。これは、クロスブラウザ方式でこれを実現する方法の概要です。

まず、XMLとXSLをロードする必要があります。これを行うには多くの方法があります。通常、これにはある種のAJAXが含まれますが、必ずしもそうとは限りません。この回答を簡単にするために、この部分はカバーされていると仮定しますが、さらにヘルプが必要な場合はお知らせください。XMLの読み込みの例を含めるように編集します。

したがって、次のオブジェクトがあると仮定します。

var xml, xsl;

ここで、xmlにはXML構造が含まれ、xslには変換に使用するスタイルシートが含まれます。

編集：

これらのオブジェクトをロードする必要がある場合は、何らかの形式のAJAXを使用することになります。クロスブラウザーの例はたくさんありますAJAX 。独自のソリューションをロールバックするよりも、ライブラリを使用してこれを実現する方がよいでしょう。jqueryまたはYUIを調べることをお勧めします。どちらも、これをうまく処理します。

ただし、基本的な考え方は非常に単純です。この答えを完成させるために、これをクロスブラウザ方式で実現するライブラリ固有ではないコードを次に示します。

function loadXML(path, callback) {
    var request;

    // Create a request object. Try Mozilla / Safari method first.
    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest();

    // If that doesn't work, try IE methods.
    } else if (window.ActiveXObject) {
        try {
            request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e1) {
            try {
                request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
            }
        }
    }

    // If we couldn't make one, abort.
    if (!request) {
        window.alert("No ajax support.");
        return false;
    }

    // Upon completion of the request, execute the callback.
    request.onreadystatechange = function () {
        if (request.readyState === 4) {
            if (request.status === 200) {
                callback(request.responseXML);
            } else {
                window.alert("Could not load " + path);
            }
        }
    };

    request.open("GET", path);
    request.send();
}

このコードを使用するには、XMLへのパスと、読み込みが完了したときに実行する関数を指定します。

loadXML('/path/to/your/xml.xml', function (xml) {
    // xml contains the desired xml document.
    // do something useful with it!
});

このテクニックを示すために例を更新しました。いくつかの実用的なデモコードを見つけることができます ここ 。

変換を実行するには、その変換の結果である3番目のXMLドキュメントが作成されます。 IEを使用している場合は、 " transformNodeToObject "メソッドを使用し、他のブラウザーを使用している場合は、 " transformToDocument "メソッドを使用します。

var result;

// IE method
if (window.ActiveXObject) {
    result = new ActiveXObject("MSXML2.DOMDocument");
    xml.transformNodeToObject(xsl, result);

// Other browsers
} else {
    result = new XSLTProcessor();
    result.importStylesheet(xsl);
    result = result.transformToDocument(xml);
}

この時点で、resultには結果の変換が含まれているはずです。これはまだXMLドキュメントであり、そのように扱う必要があります。 document.writeまたはinnerHTMLに渡すことができる文字列が必要な場合は、もう少し作業が必要です。

繰り返しになりますが、これにはIEメソッドと、他のブラウザーに適用されるメソッドがあります。

var x, ser, s = '';

// IE method.
if (result.childNodes[0] && result.childNodes[0].xml) {
    for (x = 0; x < result.childNodes.length; x += 1) {
        s += result.childNodes[x].xml;
    }
// Other browsers
} else {
    ser = new XMLSerializer();
    for (x = 0; x < result.childNodes.length; x += 1) {
        s += ser.serializeToString(result.childNodes[x]);
    }
}

これで、sに結果のXMLが文字列として含まれるはずです。これをdocument.writeまたはinnerHTMLに渡して、何か便利なことをさせることができるはずです。 XML宣言が含まれている可能性があることに注意してください。これは、削除する場合としない場合があります。

Chrome、IE9、FF4でこれをテストしました。簡略化されたベアボーンを見つけることができます 私のテストベッドでのこの実例 。

幸運と幸せなコーディング！

31
Chris Nielsen

このスクリプトを使用して、test.xmlを使用してtest.xslを変換し、出力をcontainerに追加します。 。

 <div id="container"></div>
 <script>
     function loadXMLDoc(filename) {
        if (window.ActiveXObject) {
             xhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } else {
             xhttp = new XMLHttpRequest();
        }
        xhttp.open("GET", filename, false);
        xhttp.send("");
        return xhttp.responseXML;
     }

     xml = loadXMLDoc("test.xml");
     xsl = loadXMLDoc("test.xsl");
     if (document.implementation && document.implementation.createDocument) {
        xsltProcessor = new XSLTProcessor();
        xsltProcessor.importStylesheet(xsl);
        resultDocument = xsltProcessor.transformToFragment(xml, document);
        document.getElementById('container').appendChild(resultDocument);
     }
 </script>
7
Sorter

これはChrome/Firefox/Edge/IE11で機能します

 function loadXMLDoc(filename) {
     if (window.ActiveXObject || "ActiveXObject" in window) {
         xhttp = new ActiveXObject("Msxml2.XMLHTTP");
     } else {
         xhttp = new XMLHttpRequest();
     }
     xhttp.open("GET", filename, false);
     xhttp.send("");
     return xhttp.responseXML;
 }


 if (window.ActiveXObject || "ActiveXObject" in window) {
     ie();
 } else {

     xml = loadXMLDoc("input.xml");
     xsl = loadXMLDoc("mmlctop2_0.xsl");

     if (document.implementation && document.implementation.createDocument) {
         xsltProcessor = new XSLTProcessor();
         xsltProcessor.importStylesheet(xsl);
         resultDocument = xsltProcessor.transformToDocument(xml, document);

         var serializer = new XMLSerializer();
         var transformed = serializer.serializeToString(resultDocument.documentElement);

         alert(transformed);
     }
 }

 // https://msdn.Microsoft.com/en-us/library/ms753809(v=vs.85).aspx
 function ie() {

     var xslt = new ActiveXObject("Msxml2.XSLTemplate.3.0");
     var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
     var xslProc;
     xslDoc.async = false;
     xslDoc.load("mmlctop2_0.xsl");
     if (xslDoc.parseError.errorCode != 0) {
         var myErr = xslDoc.parseError;
         alert("You have error " + myErr.reason);
     } else {
         xslt.stylesheet = xslDoc;
         var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
         xmlDoc.async = false;
         xmlDoc.load("input.xml");
         if (xmlDoc.parseError.errorCode != 0) {
             var myErr = xmlDoc.parseError;
             alert("You have error " + myErr.reason);
         } else {
             xslProc = xslt.createProcessor();
             xslProc.input = xmlDoc;
             xslProc.addParameter("param1", "Hello");
             xslProc.transform();
             alert(xslProc.output);
         }
     }


 }
0
murkle

評判が低いため、回答の形でコメントするだけです。 AJAX call、[〜＃〜] do [〜＃〜] return xhttp.responseXML and do not not return xhttp.responseXML.documentElement。

どちらもXMLSerializerを使用してドキュメントの意味のある表現に変換できますが、XSL変換の実行可能なパラメーターは最初のステートメントのみです。

後者を使用する場合、XSLTransformationの戻り値（toDocumentまたはtoFragment関数のいずれかを使用）は、私の場合（Chromeを使用）はnullです。

さらに言えば、ここのページのどこかに記載されているように、ChromeがXSLTサポートを廃止したとは思わない。

お役に立てば幸いです

0
BennyHilarious