兼容Firefox的Javascript XSLT 处理XML文件


Posted in Javascript onDecember 31, 2014

最近使用Firefox进行网页的调试,发现有些Javascript XSLT处理XML的语句仅仅支持IE浏览器。而网络中的一些介绍javascript XSLT 处理XML的文章基本上都是依据AJAX来做的。

    无奈中,自己写了一个Javascript XSLT处理XML展现页面的小功能。现在帖出来和大家共享,希望大家给点改进意见。
    在Firefox中使用XSLTProcessor对象处理XML,主要使用该对象的两个方法:
一、transformToFragment()。

二、transformToDocument()。

    下面的代码仅仅使用transformToFragment()方法来实现对XML文件处理,如果你对在Firefox中使用Javascript XSLT 处理XML文件感兴趣的话不妨试着将以下代码改写成使用transformToDocument()方法来实现的处理功能。
Javascript 代码如下:
 

function initialize() {

    var xmlDoc;

    var xslDoc;
    // 判断浏览器的类型

    if(document.implementation && document.implementation.createDocument)

    {        

        // 支持Mozilla浏览器

        try

        {

            xmlDoc = document.implementation.createDocument("", "", null);    

            xmlDoc.async = false;

            xmlDoc.load("guestbook/guestbook.xml");

        }

        catch(e)

        {

            alert("error:001");

        }

        try

        {

            xslDoc = document.implementation.createDocument("", "", null);

            xslDoc.async = false;     

              xslDoc.load("guestbook/guestbook.xsl");

              

          }

          catch(e)

          {

              alert("error:002");

          }

          try

          {

              // 定义XSLTProcessor对象    

            var xsltProcessor = new XSLTProcessor();

            xsltProcessor.importStylesheet(xslDoc);

            var oResultFragment = xsltProcessor.transformToFragment(xmlDoc,document);

            // 将解析过的文本输出到页面

            var oDiv = document.getElementById("guestbookPanel");

            oDiv.appendChild(oResultFragment);

        }

        catch(e)

        {

            alert("error:003");

        }    

    }

    else if(typeof window.ActiveXObject != 'undefined')

    {        

        //var xmlDoc=Server.CreateObject("Msxml2.DOMDocument.4.0");        

        // 支持IE浏览器

        xmlDoc = new ActiveXObject('Microsoft.XMLDOM');

        xslDoc = new ActiveXObject('Microsoft.XMLDOM'); 

        xmlDoc.async = false;

        xslDoc.async = false;     

        xmlDoc.load("guestbook/guestbook.xml");

          xslDoc.load("guestbook/guestbook.xsl");

        guestbookPanel.innerHTML = xmlDoc.documentElement.transformNode(xslDoc);    

    }

    else

    {

        alert("Browser unknown!");

    }

}

javascript dom 处理XSL显示数据的第二种方式。

主要代码如下:

var xmlDoc;

 var xslDoc;

 // 判断浏览器的类型

 if(document.implementation && document.implementation.createDocument)

 {  

  // 支持Mozilla浏览器

  try

  {

   xmlDoc = document.implementation.createDocument("", "", null); 

   xmlDoc.async = false;

   xmlDoc.load("guestbook/guestbook.xml");

   xslDoc = document.implementation.createDocument("", "", null);

   xslDoc.async = false;  

     xslDoc.load("guestbook/guestbook.xsl");     

     // 定义XSLTProcessor对象 

   var xsltProcessor = new XSLTProcessor();

   xsltProcessor.importStylesheet(xslDoc);

    // transformToDocument方式

    var result = xsltProcessor.transformToDocument(xmlDoc);

    var xmls = new XMLSerializer();

    document.getElementById("guestbookPanel").innerHTML = xmls.serializeToString(result);

  }

  catch(e)

  {

   alert("Unable to do xml/xsl processing");

  } 

 }

 else if(typeof window.ActiveXObject != 'undefined')

 {

  try

  {

   // 支持IE浏览器

   xmlDoc = new ActiveXObject('Msxml2.DOMDocument');

   xslDoc = new ActiveXObject('Msxml2.DOMDocument'); 

   xmlDoc.async = false;

   xslDoc.async = false;  

   xmlDoc.load("guestbook/guestbook.xml");

     xslDoc.load("guestbook/guestbook.xsl");

   guestbookPanel.innerHTML = xmlDoc.documentElement.transformNode(xslDoc);

  }

  catch(e)

  {

   alert("Unable to do xml/xsl processing");

  }

 }

 else

 {

  alert("Browser unknown!");

 }
Javascript 相关文章推荐
kmock javascript 单元测试代码
Feb 06 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
JQuery教学之性能优化
May 14 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
js返回顶部实例分享
Dec 21 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
vue+高德地图写地图选址组件的方法
May 18 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
JavaScript的console命令使用实例
Dec 03 Javascript
使用jquery+CSS实现控制打印样式
Dec 31 #Javascript
浅谈javascript中字符串String与数组Array
Dec 31 #Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 #Javascript
JavaScript中的Primitive对象封装介绍
Dec 31 #Javascript
JavaScript中的值类型转换介绍
Dec 31 #Javascript
javascript实现滑动解锁功能
Dec 31 #Javascript
JavaScript中number转换成string介绍
Dec 31 #Javascript
You might like
PHP下对数组进行排序的函数
2010/08/08 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
js的逻辑运算符 ||
2010/05/31 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
Node.js简单入门前传
2017/08/21 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
对Python中内置异常层次结构详解
2018/10/18 Python
python and or用法详解
2019/06/26 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
法国在线药房:DoctiPharma
2020/10/21 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
《长城》教学反思
2014/02/14 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
python 制作一个gui界面的翻译工具
2021/05/14 Python
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
MySQL中一条update语句是如何执行的
2022/03/16 MySQL
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android