如何在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 实现表单验证功能代码(简洁)
Jul 03 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
jquery 使用简明教程
Mar 05 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 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(2)
2006/10/09 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
Python对象体系深入分析
2014/10/28 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
基于python实现学生管理系统
2018/10/17 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
python查看数据类型的方法
2019/10/12 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
销售演讲稿范文
2014/01/08 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
推荐信模板
2014/05/09 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python