xml+xslでの変換内容をtextareaへ

解決済

質問者：taku0
質問日時：2011/12/13 17:47
回答数：1件

お世話になります。
xml+xslでhtmlに変換する際、その変換内容をtextareaにも表示させるようにしたいのです。
使用ブラウザ：FireFox。現状はFirebugでDOMツリーを手動で参照してる状況です。

現在は、ノードをtextareaに表示しようとすると[object DocumentFragment]とだけ出てしまい、DocumentFragmentという概念あることは分かり、色々調べcreateElement()やcreateTextNode()など、その他思いつく限りの事でテストしてみてるのですが、どうにもノードをHTMLタグとしてtextareaに表示させる事が出来ません。

以下にポイントとなるソースを掲示しますので、どなた様か、お助け願えませんでしょうか

--test.html----
<html><head>
<meta content="text/html; charset=utf8" http-equiv="content-type">
<title>JS+xslt</title>
<script type="text/javascript">
function tramsformlists(xmlFile, xslFile, resultNodeID){
var xml, xslt, newDoc;
if(document.all){
xml = new ActiveXObject("Microsoft.XMLDOM");
xslt = new ActiveXObject("Microsoft.XMLDOM");
}else {
xml = document.implementation.createDocument("", "", null);
xslt = document.implementation.createDocument("", "", null);
}
xml.async = false;
xslt.async = false;
xml.load(xmlFile);
xslt.load(xslFile);
if(document.all){
document.getElementById(resultNodeID).innerHTML = xml.transformNode(xslt);
}else {
var xsltp = new XSLTProcessor();
xsltp.importStylesheet(xslt);
newDoc = xsltp.transformToFragment(xml, window.document);

var df = document.createDocumentFragment();
cloneDoc= newDoc.cloneNode(true);

document.getElementById("Div"+resultNodeID).innerHTML = "";
document.getElementById("Div"+resultNodeID).appendChild(newDoc);

t = document.msg_form.TextareaTest.value;
document.msg_form.TextareaTest.value =t + df.appendChild(cloneDoc);

}
}
</script>
</head><body>
<form name="msg_form">
<ul>
<li>
<input type="button" value="Menu" onclick="tramsformlists('test0.xml','test0.xsl','Test')"><br>
<div id="DivTest"></div>
<textarea cols="50" rows="10" id="TextareaTest">あああああああ</textarea>
</li>
</ul>
</form>
</body></html>

--test0.xml--
<?xml version="1.0" encoding="utf-8"?>
<root>
<nolink_logo>
</nolink_logo>
</root>

--test0.xsl--
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8"/>
<xsl:template match="root">
<xsl:apply-templates select="nolink_logo"/>
</xsl:template>

<xsl:template match="nolink_logo">
<xsl:call-template name="Test" />
</xsl:template>

<xsl:template name="Test">
<xsl:variable name="menu" select="document('test1.xml')/root"/>
<div>画像を表示
<xsl:for-each select="$menu">
<xsl:element name="a">
<xsl:attribute name="href">
<xsl:value-of select="url[1]"/>
</xsl:attribute>
<xsl:attribute name="target">_blank</xsl:attribute>
<xsl:element name="img">
<xsl:attribute name="src">
<xsl:value-of select="img[1]"/>
</xsl:attribute>
</xsl:element>
</xsl:element>
</xsl:for-each>
</div>
</xsl:template>

</xsl:stylesheet>

--test1.xml--
<?xml version="1.0" encoding="utf-8"?>
<root>
<img>http://domain/image2.gif</img>
<url>http://domain/test.html</url>
</root>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： Chaire
回答日時：2011/12/13 21:39

使用ブラウザが Firefox（および Opera、Safari）であるなら、以下だけで十分です。

var doc = document;
var impl = doc.implementation;

var xml = impl.createDocument("", "", null);
xml.async = false;
xml.load(xmlFile);

var xslt = impl.createDocument("", "", null);
xslt.async = false;
xslt.load(xslFile);

var xsltp = new XSLTProcessor();
xsltp.importStylesheet(xslt);

var df = xsltp.transformToFragment(xml, doc);

var t1 = doc.forms["msg_form"].elements["TextareaTest"];
t1.value += (new XMLSerializer).serializeToString(df);

var t2 = doc.getElementById("Div"+resultNodeID);
t2.innerHTML = "";
t2.appendChild(doc.importNode(df, true));

ポイントは XMLSerializer、ついでに importNode です。

---
IE を含めるなら、Windows 2000 を使っているのでなければ、もう "Microsoft" のを使わないで下さい（廃止されています）。また、document.all での分岐は禁物です（これはもともと非常にマズいやり方で、しかもあまりに広まってしまったので、他のブラウザも分岐を通すようになったからです）。

try {
var xml = new ActiveXObject("Msxml2.DOMDocument.3.0");
xml.async = false;
xml.load(xmlFile);

var xslt = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
xslt.async = false;
xslt.load(xslFile);
...
} catch (err) { ... }

なお、ここでは MSXML 3.0 を使いましたが、importNode を使いたければ 6.0 を使う必要があります。バージョンを省略すると必ず 3.0 が呼び出されますので、使い分けて下さい。