如何在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 阴影插件代码分享
Jan 09 Javascript
JS父页面与子页面相互传值方法
Mar 05 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
vuejs指令详解
Feb 07 Javascript
layui分页效果实现代码
May 19 Javascript
Easyui使用Dialog行内按钮布局的实例
Jul 27 Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 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
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
php合并js请求的例子
2013/11/01 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
获取服务器传来的数据 用JS去空格的正则表达式
2012/03/26 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
2016/11/22 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
python urllib爬虫模块使用解析
2019/09/05 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
keras 权重保存和权重载入方式
2020/05/21 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
移动通信专业自荐信范文
2013/11/12 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
求职信格式要求
2014/05/23 职场文书
班级文化建设标语
2014/06/23 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
授权收款委托书范本
2014/10/10 职场文书
初二学生评语大全
2014/12/26 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书