如何在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 判断元素上是否绑定了事件
Oct 28 Javascript
js getElementsByTagName的简写方式
Jun 27 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
es6中let和const的使用方法详解
Feb 24 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
如何让动态插入的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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
php实现URL加密解密的方法
2016/11/17 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
jquery图片切换插件
2015/03/16 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
微信小程序 地图map详解及简单实例
2017/01/10 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
[03:12]完美世界DOTA2联赛PWL DAY9集锦
2020/11/10 DOTA
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
python 制作简单的音乐播放器
2020/11/25 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
abstract是什么意思
2012/02/12 面试题
大学生村官考核材料
2014/05/23 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
个人德育工作总结
2015/03/05 职场文书
公司放假通知怎么写
2015/04/15 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
关于Python中进度条的六个实用技巧分享
2022/04/05 Python