試しに作ってみました。
tramsform(xmlFile, xslFile, resultNodeID)
という形で、ＸＭＬファイルとＸＳＬＴファイルそして適用結果を表示するDIV の ＩＤ を指定します。
例：
tramsform('data.xml', 'style1.xsl', 'XML')
ＩＥとFirefox で動作します。
＃３のサイトでも書かれているように
xml = new ActiveXObject("Microsoft.XMLDOM");
を使うより、ＸＭＬＨＴＴＰリクエストを使う方がいいのかもしれません。
----------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>ＸＭＬの読込とＸＳＬＴの適用</TITLE>
<SCRIPT TYPE="text/javascript">
<!--
window.onload=function(){
tramsform('data.xml', 'style1.xsl', 'XML');
};
function tramsform(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);
document.getElementById('XML').innerHTML = "";
document.getElementById('XML').appendChild(newDoc);
}
}
-->
</SCRIPT>
</HEAD>
<BODY>
<div id="XML"></div>
<button onclick="tramsform('data.xml', 'style1.xsl', 'XML')">スタイル１</button>
<button onclick="tramsform('data.xml', 'style2.xsl', 'XML')">スタイル２</button>
</BODY>
</HTML>
お礼
素早い返信ありがとうございます！！ なかなか複雑になりそうですね・・・。 しかし両方で動作する方法があって安心しました(無い訳はないか・・・)。 ご丁寧にありがとうございました。 これを参考に頑張ってみます！！