XSLTでXMLを入力テキストエリアで変換する

私はXSLTを使用してXMLを変換しようとしています。そのために、テキストエリアを使用してXMLテキストを入力し、変換結果を他のテキストエリアに表示します。XSLTでXMLを入力テキストエリアで変換する

<script type="text/javascript"> 

     var xslTransform = new XslTransform("XSLTCode.xsl"); 

     function transformarXML(){ 
      var xmlIn = document.getElementById("XMLIN").value; 
      var xmlOut = document.getElementById("XMLOUT"); 

      var outputText = xslTransform.transform(xmlIn); 

      xmlOut.value = outputText; 

     } 

</script>

しかし、いくつかの理由で、出力テキストエリアは全く任意のテキストを表示しません：私のJavaScriptコードは、今までに、次の1です。 JavaScriptを使って正しく行う方法は？私が考えなかった他の簡単な解決法はありますか？

出典

2017-05-04 David Godoy

ブラウザ内にJavascriptがある場合は、Stackoverflowのコードスニペット機能を使用して、他の人が問題を再現できるように最小限の完全かつ実行可能なコードスニペットを表示することを検討してください。私が知っているブラウザは、あなたが 'new XslTransform（" XSLTCode.xsl "）;で使用しているような' XslTransform'オブジェクトを提供していないので、明らかにそれを実装するコードを見る必要があります。そしてあなたが示したスニペットは 'transformarXML'関数を示していますが、それを呼び出さないので、それがあなたのコードであれば何もしません。関数をどこかで呼び出す必要があります。 –

これはブラウザ内のJavascriptです。つまり、ブラウザ内のJavascriptには 'XslTransform'がありません。その場合、 'XslTransform'を置き換える別のクラスまたはソリューションがありますか？ –

IE以外のブラウザでは、XSLTプロセッサを使用してXSLT変換を実行し、DOMParserを使用して、XMLとXSLT文字列をドキュメントにそれぞれ解析することができます。あなたはDOMノードをシリアル化する必要があり、その結果を文字列として持つようにしたい場合はXSLTProcessorは、主にDOMノードを作成するために使用されることを意図していることを

function transform(xml, xslt) { 
 
    var domParser = new DOMParser(); 
 
    var sheet = domParser.parseFromString(xslt, 'application/xml'); 
 
    var doc = domParser.parseFromString(xml, 'application/xml'); 
 
    var proc = new XSLTProcessor(); 
 
    proc.importStylesheet(sheet); 
 
    var resultDoc = proc.transformToDocument(doc); 
 
    // depending on the kind of result created or wanted it might be better to use return new XMLSerializer().serializeToString(resultDoc) 
 
    return resultDoc.documentElement.outerHTML; 
 
} 
 

 
async function loadAndTransform(xml, xsltUrl) { 
 
    try { 
 
    var response = await fetch(xsltUrl); 
 
    var xsltCode = await response.text(); 
 
    return transform(xml, xsltCode); 
 
    } 
 
    catch (e) { 
 
    console.log(e); 
 
    throw e; 
 
    } 
 
} 
 

 
async function handler1() { 
 
    document.getElementById('result').value = await loadAndTransform(document.getElementById('input-xml').value, 'data:application/xml,' + encodeURIComponent(document.getElementById('xslt').value)); 
 
} 
 

 
async function handler2() { 
 
    document.getElementById('result').value = await loadAndTransform(document.getElementById('input-xml').value, 'sheet.xsl'); 
 
}

<textarea id="input-xml" rows="10" cols="80"><root> 
 
    <list> 
 
    <item>a</item> 
 
    <item>b</item> 
 
    </list> 
 
</root> 
 
</textarea> 
 

 
<textarea id="xslt" rows="10" cols="80"> 
 
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> 
 
    <xsl:output method="html"/> 
 
    
 
    <xsl:template match="root"> 
 
    <html> 
 
     <body> 
 
     <xsl:apply-templates/> 
 
     </body> 
 
    </html> 
 
    </xsl:template> 
 
    
 
    <xsl:template match="list"> 
 
    <ul> 
 
     <xsl:apply-templates/> 
 
    </ul> 
 
    </xsl:template> 
 
    
 
    <xsl:template match="item"> 
 
    <li> 
 
     <xsl:apply-templates/> 
 
    </li> 
 
    </xsl:template> 
 
</xsl:stylesheet> 
 
</textarea> 
 

 
<input type="button" value="transform" 
 
    onclick="document.getElementById('result').value = transform(document.getElementById('input-xml').value, document.getElementById('xslt').value);"> 
 
    
 
<input type="button" value="load and transform" 
 
    onclick="handler1();"> 
 
    
 
<!-- 
 
<input type="button" value="load and transform from url" 
 
    onclick="handler2();"> 
 
--> 
 
    
 
<textarea id="result" rows="10" cols="80"></textarea>

注さらにで、使用しますHTML用にouterHTMLを使用しました。XML出力が必要な場合は、新しいXMLSerializer（）も説明しました。

出典

2017-05-04 10:12:54

そして 'importStylesheet（）'にXSLTをローカルファイルとしてどのように追加できますか？ 'importStylesheet" XSLTCode.xsl "）' –

"local"とは何ですか？ Javascriptを使用したHTML文書と同じWebサーバー上にありますか？または、HTMLドキュメントがファイルシステムからロードされていますか？一般的に、XMLHttpRequestを使用してXML文書をロードしますが、ロード元の場所には通常のブラウザ固有のセキュリティ制限があります（同じオリジンポリシーでは、HTML文書の元の原点からのファイルのロードのみが許可されます） Chromeのようなブラウザ）。 –

@DavidGodoy、私はEdge、Chrome、Firefoxの最新バージョンにクライアントサイドのJavascriptを使用してURLからテキストを取得し、同じ機能を使用するためのコードスニペットを編集しました。（document.getElementById（ 'input-xml'）。value、 'sheet.xsl'）; 'この変換を実行し、その結果をテキストエリアに表示する（' document.getElementById（ 'result' ） –

XSLTでXMLを入力テキストエリアで変換する

答えて

関連する問題