如何在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 Date对象使用总结
May 14 Javascript
js null undefined 空区别说明
Jun 13 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
JavaScript在IE和FF下的兼容性问题
May 19 Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
javascript canvas时钟模拟器
Jul 13 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
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
apache rewrite_module模块使用教程
2008/01/10 PHP
php图片缩放实现方法
2014/02/20 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
很全的显示阴历(农历)日期的js代码
2009/01/01 Javascript
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
Node.js Windows Binary二进制文件安装方法
2019/05/16 Javascript
[04:20]DOTA2-DPC中国联赛 正赛 VG vs LBZS 选手采访 1月19日
2021/03/11 DOTA
Python和php通信乱码问题解决方法
2014/04/15 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
python+os根据文件名自动生成文本
2019/03/21 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
tornado+celery的简单使用详解
2019/12/21 Python
用python进行视频剪辑
2020/11/02 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
聚美优品的广告词
2014/03/14 职场文书
优秀员工推荐信
2014/05/10 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android
Python初识逻辑与if语句及用法大全
2021/08/07 Python
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python
Win11更新失败并提示0xc1900101
2022/04/19 数码科技
MySQL GTID复制的具体使用
2022/05/20 MySQL