如何在Mozilla Gecko 用Javascript加载XSL

在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



javascript load xslt in ie and mozilla

never-online

  http://www.never-online.net

content is here


foo.xsl






Author: 

 - 

Web: 







foo.html

 




  convert xsl using javascript - http://www.never-online.net 

 


 


 


 


 


 


 

.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; }

 

 

 //


 //]]>

 

 



//

 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 {  ;}; return retval;

 }

 document.getElementById("demo").innerHTML=xsltParser("foo.xml","foo.xsl")

//]]>


 


0.232176s