兼容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 相关文章推荐
用JavaScript显示随机图像或引用
Apr 21 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 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
DC动漫人物排行
2020/03/03 欧美动漫
php下获取客户端ip地址的函数
2010/03/15 PHP
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
浅谈laravel-admin的sortable和orderby使用问题
2019/10/03 PHP
htm调用JS代码
2007/03/15 Javascript
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
js闭包的用途详解
2014/11/09 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
js简单实现调整网页字体大小的方法
2016/07/23 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
python配置grpc环境
2019/01/01 Python
Python 使用Numpy对矩阵进行转置的方法
2019/01/28 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
什么是python类属性
2020/06/10 Python
美国艺术和工艺品商店:Hobby Lobby
2020/12/09 全球购物
实用求职信范文分享
2013/12/25 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
幼儿园课题方案
2014/06/09 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
2014年财政工作总结
2014/12/10 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
Python作用域和名称空间的详细介绍
2022/04/13 Python