先看效果。 Click Here To View
在Mozilla Develop Center里,我们可以看到有以下的文章: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元素。
示例代码
var ownerDocument = document.implementation.createDocument("", "test", null);
var newFragment = processor.transformToFragment(domToBeTransformed, ownerDocument);
当然也可以用transformToDocument
var newDocument = processor.transformToDocument(domToBeTransformed);
需要注意的是,转换后的节点是Element或者是一个片段,所以要经过下面的序列化才可使用obj.innerHTML=new Document
4。序列化。
(new XMLSerializer()).serializeToString(newDocument)
5。在IE中,可以用XMLDOM方法,xmldoc.transformNode(xslDocument)方法来进行接的转换。
首先,我们先建立一个XML文件与XSLT文件,方便后面的讲解。
foo.xml
<?xml version="1.0" encoding="utf-8"?><Article><Title>javascript load xslt in ie and mozilla</Title><Author>never-online</Author> <Web>http://www.never-online.net</Web><Body>content is here</Body></Article>foo.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" /><xsl:template match="/"><h1 class="title"><xsl:value-of select="/Article/Title"/></h1><div class="desc">Author: <xsl:value-of select="/Article/Author"/> - Web: <xsl:value-of select="/Article/Web"/></div><p class="box"><xsl:value-of select="/Article/Body"/></p></xsl:template></xsl:stylesheet>foo.html
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title> convert xsl using javascript - http://www.never-online.net </title> <meta http-equiv="ImageToolbar" content="no" /> <meta name="author" content="never-online, BlueDestiny"/> <meta name="keywords" content="never modules, Mozilla CSS, C#, .net, Refercence, BlueDestiny, never-online"/> <meta name="description" content="BlueDestiny, never-online"/> <meta name="title" content=" - http://www.never-online.net" /> <meta name="creator.name" content="never-online, BlueDestiny" /> <style type="text/css" media="all" title="Default">....title {...}{ margin:10px 10% 0 10%; text-align:center; background-color:#639ACE; padding:10px; color:#fff; }.desc {...}{ margin:10px 10% 0 10%; text-align:center; }.box {...}{ margin:10px 10% 0 10%; border: 1px dotted #639ACE; padding:20px; } </style> <script type="text/javascript">... //<![CDATA[ //]]> </script> <body id="www.never-online.net"><div id="demo"></div><script type="text/javascript">...//<![CDATA[ var xsltParser = function(xmlfileStr, xslfileStr) ...{ var retval = xslStylesheet = xmlDocument = null; var browser = ...{ isIE:!!window.ActiveXObject, isMozilla:(typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined') && (typeof HTMLDocument!='undefined') }; var loadDocument = function (fileStr) ...{ if (!fileStr) throw new Error([65221, "调用XMLHTTP错误,没有指定文件名。"]); var req = browser.isIE?new ActiveXObject("MSXML2.XMLHTTP"):new XMLHttpRequest(); req.open("GET", fileStr, false); req.send(null); if (req.readyState==4 && req.status==200) ...{ return req.responseXML; } else throw new Error([65222, "调用XMLHTTP错误,远程文件失败。"+fileStr+""]); }; var ready2Transform = function () ...{ xmlDocument = loadDocument(xmlfileStr); xslStylesheet = loadDocument(xslfileStr); }(); var parseFromMoz = function () ...{ var xsltProcessor = new XSLTProcessor(); xsltProcessor.importStylesheet(xslStylesheet); var retval = xsltProcessor.transformToDocument(xmlDocument); return (new XMLSerializer()).serializeToString(retval);//序列化 }; var parseFromIE = function () ...{ return xmlDocument.transformNode(xslStylesheet.documentElement); }; if (browser.isMozilla) ...{ retval = parseFromMoz(xmlfileStr, xslfileStr); } else if (browser.isIE) ...{ retval = parseFromIE(xmlfileStr, xslfileStr); } else ...{ /**//* TO DO */ ;}; return retval; } document.getElementById("demo").innerHTML=xsltParser("foo.xml","foo.xsl")//]]></script> </body></html>