这几天一直在研究xslt转换xml为xhtml,前面文章有介绍 使用xslt将xml解析成xhtml 的文章

由于前面的方法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进行绑定,这样就实现这个效果了。如果需要扩展,再创建新的构造函数,注册并绑定到这个类上就可以实现效果。

更多相关文章

  1. 在KVM虚拟机中的配置xml的代码详解
  2. xml在powerbuilder中应用的代码示例
  3. Android 淡入淡出动画xml配置代码展示
  4. dom4j解析xml文件代码示例
  5. java通过XPath解析xml节点的代码详解
  6. XSL将XML中的CDATA注释输出为HTML文本的代码实例
  7. 用Java解析XML文件的代码示例
  8. android读取xml的代码实例
  9. java使用SAX解析xml的代码实例

随机推荐

  1. 工作总结|Android(安卓)自定义列表刷新控
  2. android 网络访问-图片处理优秀开源项目
  3. android九宫格实现
  4. Android横屏竖屏切换的问题
  5. Android学习入门
  6. 淘宝Android客户端技术分析
  7. android中Intent简介
  8. 程序设置横屏后,锁屏时会被销毁一遍,解锁时
  9. 自定义tabhost实现
  10. (翻译)又一个Android Sqlite库: Cupboard