如何在Mozilla Gecko 用Javascript加载XSL


Posted in Javascript onJanuary 09, 2007

在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>

Javascript 相关文章推荐
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
原生js实现吸顶效果
Mar 13 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
React实现todolist功能
Dec 28 Javascript
如何让动态插入的javascript脚本代码跑起来。
Jan 09 #Javascript
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 #Javascript
你所要知道JS(DHTML)中的一些技巧
Jan 09 #Javascript
sina的lightbox效果。
Jan 09 #Javascript
JS中简单的实现像C#中using功能(有源码下载)
Jan 09 #Javascript
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
Jan 09 #Javascript
兼容Mozilla必须知道的知识。
Jan 09 #Javascript
You might like
PHP通用检测函数集合
2006/11/25 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
js跳转页面方法总结
2014/01/29 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
Python yield使用方法示例
2013/12/04 Python
python装饰器初探(推荐)
2016/07/21 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
python实现字符串和数字拼接
2020/03/02 Python
为什么称python为胶水语言
2020/06/16 Python
python如何导入依赖包
2020/07/13 Python
pandas实现导出数据的四种方式
2020/12/13 Python
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
铭立家具面试题
2012/12/06 面试题
优秀英语专业毕业生求职信
2013/11/23 职场文书
校园歌手大赛策划书
2014/01/17 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
公安局班子个人对照检查材料思想汇报
2014/10/09 职场文书
2015民办小学年度工作总结
2015/05/26 职场文书
房贷工资证明范本
2015/06/12 职场文书
运动会致辞稿
2015/07/29 职场文书