在MozillaDevelopCenter里,我们可以看到有以下的文章:http://developer.mozilla.org/en/docs/The_XSLT/JavaScript_Interface_in_Gecko:Basic_Example
首先,你需要了解如何动态载入xml文件的方法,可以用XMLDOM对象,也可以用XMLHttpRequest,的responseXML对象,这里我用的是XMLHttpRequest。
用javascript载入xslt的方法如下:
1。用XMLDOM或者用XMLHttpRequest来加载xml和xslt。
2。用XSLTProcessor.importStylesheet来引入XSLT。
3。用XSLTProcessor.transformToFragment方法来把它转换成DOM的Fragment。然后用appendChild或者用insertBefore等方法来追加或者插入这个DOM的fragment元素。
示例代码
varownerDocument=document.implementation.createDocument("","test",null);
varnewFragment=processor.transformToFragment(domToBeTransformed,ownerDocument);
当然也可以用transformToDocument
varnewDocument=processor.transformToDocument(domToBeTransformed);
需要注意的是,转换后的节点是Element或者是一个片段,所以要经过下面的序列化才可使用obj.innerHTML=newDocument
4。序列化。
(newXMLSerializer()).serializeToString(newDocument)
5。在IE中,可以用XMLDOM方法,xmldoc.transformNode(xslDocument)方法来进行接的转换。
首先,我们先建立一个XML文件与XSLT文件,方便后面的讲解。
foo.xml
<?xmlversion="1.0"encoding="utf-8"?>
<Article>
<Title>javascriptloadxsltinieandmozilla</Title>
<Author>never-online</Author>
<Web>http://www.never-online.net</Web>
<Body>contentishere</Body>
</Article>
foo.xsl
<?xmlversion="1.0"encoding="utf-8"?>
<xsl:stylesheetversion="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:outputmethod="html"/>
<xsl:templatematch="/">
<h1class="title"><xsl:value-ofselect="/Article/Title"/></h1>
<divclass="desc">Author:<xsl:value-ofselect="/Article/Author"/>-
Web:<xsl:value-ofselect="/Article/Web"/></div>
<pclass="box">
<xsl:value-ofselect="/Article/Body"/>
</p>
</xsl:template>
</xsl:stylesheet>
foo.html
<?xmlversion="1.0"encoding="UTF-8"?>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/tr/html4/strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>convertxslusingjavascript-http://www.never-online.net</title>
<metahttp-equiv="ImageToolbar"content="no"/>
<metaname="author"content="never-online,BlueDestiny"/>
<metaname="keywords"content="nevermodules,MozillaCSS,C#,.net,Refercence,BlueDestiny,never-online"/>
<metaname="description"content="BlueDestiny,never-online"/>
<metaname="title"content="-http://www.never-online.net"/>
<metaname="creator.name"content="never-online,BlueDestiny"/>
<styletype="text/css"media="all"title="Default">
.title{margin:10px10%010%;text-align:center;background-color:#639ACE;padding:10px;color:#fff;}
.desc{margin:10px10%010%;text-align:center;}
.box{margin:10px10%010%;border:1pxdotted#639ACE;padding:20px;}
</style>
<scripttype="text/javascript">
//<![CDATA[
//]]>
</script>
<bodyid="www.never-online.net">
<divid="demo"></div>
<scripttype="text/javascript">
//<![CDATA[
varxsltParser=function(xmlfileStr,xslfileStr){
varretval=xslStylesheet=xmlDocument=null;
varbrowser={
isIE:!!window.ActiveXObject,
isMozilla:(typeofdocument.implementation!='undefined')&&(typeofdocument.implementation.createDocument!='undefined')&&(typeofHTMLDocument!='undefined')
};
varloadDocument=function(fileStr){
if(!fileStr)thrownewError([65221,"调用XMLHTTP错误,没有指定文件名。"]);
varreq=browser.isIE?newActiveXObject("MSXML2.XMLHTTP"):newXMLHttpRequest();
req.open("GET",fileStr,false);
req.send(null);
if(req.readyState==4&&req.status==200){returnreq.responseXML;}
elsethrownewError([65222,"调用XMLHTTP错误,远程文件失败。"+fileStr+""]);
};
varready2Transform=function(){
xmlDocument=loadDocument(xmlfileStr);
xslStylesheet=loadDocument(xslfileStr);
}();
varparseFromMoz=function(){
varxsltProcessor=newXSLTProcessor();
xsltProcessor.importStylesheet(xslStylesheet);
varretval=xsltProcessor.transformToDocument(xmlDocument);
return(newXMLSerializer()).serializeToString(retval);//序列化
};
varparseFromIE=function(){
returnxmlDocument.transformNode(xslStylesheet.documentElement);
};
if(browser.isMozilla){
retval=parseFromMoz(xmlfileStr,xslfileStr);
}
elseif(browser.isIE){
retval=parseFromIE(xmlfileStr,xslfileStr);
}else{/*TODO*/;};returnretval;
}
document.getElementById("demo").innerHTML=xsltParser("foo.xml","foo.xsl")
//]]>
</script>
</body>
</html>