如何在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禁用右键示例
Apr 28 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
原生js制作简单的数字键盘
Apr 24 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
Mar 08 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
Vue.extend实现挂载到实例上的方法
May 01 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
JS倒计时两种实现方式代码实例
Jul 27 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
Terran建筑一览
2020/03/14 星际争霸
php实现复制移动文件的方法
2015/07/29 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
做网页的一些技巧
2007/02/01 Javascript
对frameset、frame、iframe的js操作示例代码
2013/08/16 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
小试SVG之新手小白入门教程
2019/01/08 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
PyQt5每天必学之事件与信号
2018/04/20 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
竞选班长自荐书范文
2014/03/09 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
骨干教师个人总结
2015/02/11 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书