如何在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 相关文章推荐
关于javascript 回调函数中变量作用域的讨论
Sep 11 Javascript
javascript 全等号运算符使用说明
May 31 Javascript
jquery中this的使用说明
Sep 06 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
vue如何判断dom的class
Apr 26 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 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
通过html表格发电子邮件
2006/10/09 PHP
php number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
php获取随机数组列表的方法
2014/11/13 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
js实现select下拉框选择
2020/01/11 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
python操作日期和时间的方法
2014/03/11 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
对python周期性定时器的示例详解
2019/02/19 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
python五子棋游戏的设计与实现
2019/06/18 Python
python分数表示方式和写法
2019/06/26 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
基于python实现图片转字符画代码实例
2020/09/04 Python
推荐WEB开发者最佳HTML5和CSS3代码生成器
2015/11/24 HTML / CSS
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
仓管岗位职责范本
2014/02/08 职场文书
六查六看剖析材料
2014/02/15 职场文书
情人节活动策划方案
2014/02/27 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
团队队名口号大全
2014/06/06 职场文书
东京审判观后感
2015/06/01 职场文书