一个用xslt样式将xml解析为xhtml的类TransformBinder(兼容FF和IE7.0)

由于前面的方法xslt需要在xml文件内部直接导入,而项目中用到的xml文件是系统生成的,只能提供路径,而没有办法改写xml里面的内容,所以需要找一个方法能够在外部将xml和xslt关联在一起,这样既达到了目的,也可以应用于多个xml文件,方便管理。
先上代码,系统中使用module这个js进行打包,module这个工具是专门用来将js进行打包,这个工具以后的文章再做介绍,我自己现在只会使用,还没研究其底层的代码;这边我们将js写在一个文件里面,包括类以及类实现的方法,
下面是js代码:transform.js


代码如下:

var XmlDom=function(){
if (window.ActiveXObject) { // IE
var arrSignatures = ["MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0",
"MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument",
"Microsoft.XmlDom"];
for (var i=0; i < arrSignatures.length; i++) {
try {
var oXmlDom = new ActiveXObject(arrSignatures[i]);
return oXmlDom;
} catch (oError) {
//ignore
}
}
throw new Error("你的系统没有安装 MSXML.");
} else if(document.implementation.createDocument){ // Firefox
var oXmlDom = document.implementation.createDocument("", "", null);
return oXmlDom;
} else{
throw new Error("浏览器不支持 XML DOM object.");
}
}
var transformXSLT=function(_XML,_XSL) {
if (window.Node) {
Node.prototype.transformNode = function(XslDom) {
var oProcessor = new XSLTProcessor();
oProcessor.importStylesheet(XslDom);
var oResultDom = oProcessor.transformToDocument(myXmlDom);
var oSerializer = new XMLSerializer();
var sXml = oSerializer.serializeToString(oResultDom, "text/xml");
return sXml;
}
}
var myXmlDom = new XmlDom();
myXmlDom.async=false;
var myXslDom = new XmlDom();
myXslDom.async=false;
myXmlDom.load(_XML);
myXslDom.load(_XSL);
var sResult=myXmlDom.transformNode(myXslDom);
if(window.ActiveXObject){
if(myXmlDom.parseError.errorCode != 0){
var sError=myXmlDom.parseError;
var txt = "";
txt += "<br>错误代码: ";
txt += sError.errorCode;
txt += "<br>错误原因: ";
txt += sError.reason;
txt += "<br>错误行号: ";
txt += sError.line;
document.write(txt);
}else{
document.write(sResult);
}
} else if(document.implementation.createDocument){
var oSerializer = new XMLSerializer();
var sXmlDom = oSerializer.serializeToString(myXmlDom, "text/xml");
var oParser = new DOMParser();
var oXmlDom = oParser.parseFromString(sXmlDom,"text/xml");
if (oXmlDom.documentElement.tagName == "parsererror") {
var oXmlSerializer = new XMLSerializer();
var sXmlError = oXmlSerializer.serializeToString(oXmlDom);
alert(sXmlError);
} else {
document.write(sResult);
}
}
}
var TransformBinder = function(XML,XSL) {
this.XML = XML;
this.XSL = XSL;
}
TransformBinder.prototype.registerAction = function(handlers) {
this.handlers = handlers;
}
TransformBinder.prototype.bind = function() {
var _this = this;
this.handlers(_this.XML,_this.XSL);
}

下面是html代码:XSLTtransform.htm


代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src="transform.js"></script>
</head>
<body>
<script type="text/javascript">
var XML = "这里输入XML路径";
var XSL = "这里输入XSL路径";
var tempObj = new TransformBinder(XML,XSL);
tempObj.registerAction(transformXSLT);
tempObj.bind();
</script>
</body>
</html>

分析一下transform.js:
xmlDom这个构造函数是用来创建xml的dom元素,对于IE和FF,创建dom的方法不一样,IE是用window.ActiveXObject这个方法来创建,而FF用document.implementation.createDocument这个方法来创建,我们用这两个属性来判断是IE还是FF。
IE下针对不同版本的xml["MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0", "MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument","Microsoft.XmlDom"],用for循环进行遍历查找到对应的版本再new ActiveXObject(arrSignatures[i])建立dom;
FF下用document.implementation.createDocument("", "", null);直接创建dom ;
如果浏览器不支持 XML DOM object则throw错误 。
transformXSLT这个构造函数用XSLT将xml转换成html,FF下没有transformNode这个方法,所以我们自己构造了一个方法,


代码如下:

Node.prototype.transformNode = function(XslDom) {
var oProcessor = new XSLTProcessor();
oProcessor.importStylesheet(XslDom);
var oResultDom = oProcessor.transformToDocument(myXmlDom);
var oSerializer = new XMLSerializer();
var sXml = oSerializer.serializeToString(oResultDom, "text/xml");
return sXml;
}

然后用这个方法实现转换,在处理错误上IE和FF又有不同的处理方法,IE比较简单,有一个parseError属性装载错误信息,errorCode是错误的代码,reason是错误原因,line是错误的行号,还有其他一些信息,这里只要显示主要的错误信息就可以了,如果出错了就显示出错内容,如果没有出错则显示转换的结果sResult。FF下就比较复杂一点,用XMLSerializer和XMLSerializer.serializeToString()将xmlDom转换为字符串,再将字符串转换成dom对象,在转换的过程中如果报错,就能得到包含有parsererror的信息,判断得到的字符串的tagName是不是parsererror,如果是则将dom对象再转换成字符串抛出字符串中的内容,如果不是则显示转换的结果sResult。
这里有几个注意点:
a.IE能检验出XML的DTD错误,而FF下只能检验出XML本身的语法错误;
b.因为需要在浏览器下判断错误,最终的结果不好合并,可能代码结构上看起来不太合理,这也是无奈之举。
用TransformBinder这个类进行封装,便于扩展和修改。TransformBinder.prototype.registerAction这个原型用于注册事件,再用TransformBinder.prototype.bind将事件进行绑定,需要使用这个类的时候,只需要new TransformBinder(XML,XSL),注册transformXSLT事件,再bind进行绑定,这样就实现这个效果了。如果需要扩展,再创建新的构造函数,注册并绑定到这个类上就可以实现效果。

时间: 2009-11-21

用xslt将xml解析成xhtml的代码

使用xslt进行解析的基本格式是这样的:如 复制代码 代码如下: <?xml version="1.0" encoding="GB2312"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method='html' version='1.0' encodin

python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)

一.利用HTMLParser进行网页解析 具体HTMLParser官方文档可参考http://docs.python.org/library/htmlparser.html#HTMLParser.HTMLParser 1.从一个简单的解析例子开始 例1: test1.html文件内容如下: 复制代码 代码如下: <html> <head> <title> XHTML 与 HTML 4.01 标准没有太多的不同</title> </head> &l

解析xHTML源码的DLL组件AngleSharp介绍

AngleSharp是基于.NET(C#)开发的专门为解析xHTML源码的DLL组件. 项目地址:https://github.com/FlorianRappl/AngleSharp 我主要介绍是一些使用AngleSharp常用的方法,跟大家介绍,我会以我们站点作为原型. 其它的类似组件有: 国内:Jumony github地址: https://github.com/Ivony/Jumony 国外:Html Agility Pack 项目地址:http://htmlagilitypack.co

深入解析vue 源码目录及构建过程分析

​" 本文主要梳理一下vue代码的目录,以及vue代码构建流程,旨在对vue源码整体有一个认知,有助于后续对源码的阅读." 一.目录结构 上图是对vue的代码的所有目录进行的梳理,其中源码位于src目录下,下面对src下的目录进行介绍. compiler 该目录是编译相关的代码,即将 template 模板转化成 render 函数的代码. vue 提供了 render 函数,render 函数作用是用来创建 VNode,但在平时开发中,绝大多数情况下使用 template 来创建 H

深入解析Vue源码实例挂载与编译流程实现思路详解

在正文开始之前,先了解vue基于源码构建的两个版本,一个是 runtime only ,另一个是 runtime加compiler 的版本,两个版本的主要区别在于后者的源码包括了一个编译器. 什么是编译器,百度百科上面的解释是 简单讲,编译器就是将"一种语言(通常为高级语言)"翻译为"另一种语言(通常为低级语言)"的程序.一个现代编译器的主要工作流程:源代码 (source code) → 预处理器 (preprocessor) → 编译器 (compiler) →

解析从源码分析常见的基于Array的数据结构动态扩容机制的详解

本文的写作冲动来源于今晚看到的老赵的一则微博"大家知道System.Collections.Generic.List<T>是一种什么样的数据结构?内部的元素是怎么存放的?还有Dictionary<TKey,TValue>呢?-". 查了一下书,如果参考数据结构和算法里介绍的线性表合哈希表的特点,非常官方的答案就类似:List<T>是一种线性的内存连续分配的存储结构,元素是顺序存放的:它的优点是内存连续分配,相对节省空间,在设定长度范围内增加元素开销很

maven中下载jar包源码和javadoc的命令介绍

1:Maven命令下载源码和javadocs 当在IDE中使用Maven时如果想要看引用的jar包中类的源码和javadoc需要通过maven命令下载这些源码,然后再进行引入,通过mvn命令能够容易的达到这个目的: 复制代码 代码如下: mvn dependency:sources mvn dependency:resolve -Dclassifier=javadoc 命令使用方法:首先进入到相应的pom.xml目录中,然后执行以上命令: 第一个命令是尝试下载在pom.xml中依赖的文件的源代码

Vue 中 template 有且只能一个 root的原因解析(源码分析)

引言 今年, 疫情 并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...).然后,在前段时间也看到一个这样的关于 Vue 的问题, 为什么每个组件 template 中有且只能一个 root? 可能,大家在平常开发中,用的较多就是 template 写 html 的形式.当然,不排除用 JSX 和 render() 函数的.但是,究其本质,它们最终都会转化成 render() 函数.然后,再由 render() 函数转为 Vritual DOM (以下统称 VNode ).而 rende

Java源码解析之可重入锁ReentrantLock

本文基于jdk1.8进行分析. ReentrantLock是一个可重入锁,在ConcurrentHashMap中使用了ReentrantLock. 首先看一下源码中对ReentrantLock的介绍.如下图.ReentrantLock是一个可重入的排他锁,它和synchronized的方法和代码有着相同的行为和语义,但有更多的功能.ReentrantLock是被最后一个成功lock锁并且还没有unlock的线程拥有着.如果锁没有被别的线程拥有,那么一个线程调用lock方法,就会成功获取锁并返回.

使用Python3中的gettext模块翻译Python源码以支持多语言

你写了一个Python 3程序,还想要它适用于其他语言.你能复制全部代码库,然后刻意地检查每个.py文件,替换掉所有找到的文本字符串.但这意味着你有两份你代码的独立副本,每当你要做出个改动或修复个bug,你的工作量会加倍.而且如果你想要程序还适用于其他语言,就更糟了. 幸运的是,Python给了一个解决办法,就是用gettext模块. 一个Hack解法 你应该把你自己的解决办法统一改变.例如,你可以把你程序中的每个字符串替换为一个函数调用(函数名简单些,比如像_()一样),这会返回被翻译为该正确

使用Vue实现移动端左滑删除效果附源码

左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 今天我给大家介绍的移动端左滑删除效果是基于Vue2实现的,结合以电商平台的删除购物车商品为例,来看实现步骤. 准备 安装vue项目过程已忽略,如果不懂vue的同学可以上官网看下:https://cn.vuejs.org/v2/guide/installation.html#NPM 我们使用安装一个

Android10.0实现本地音乐播放(附源码下载)

1.概述 本篇文章仅是Android小白在写一个小程序,内容仅供参考,有很多不足之处希望各位大神指出,文章末尾有整个项目的下载,不需要币,只求帮你们解决到问题的同时收获到一颗小小的赞.这个项目中还有很多不足的地方,如:在按键中设置图片文字,这些正常的应该交给Handler处理,我只是粗略地完成这个项目.测试环境:Android10.0.实现:自动播放下一首,正常音乐的功能,全屏显示. Android10.0是内外分存了的,应用是没有权限读取内存的,需要在配置文件中application中加上属性