兼容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 相关文章推荐
jquery中实现标签切换效果的代码
Mar 01 Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
读Javascript高性能编程重点笔记
Dec 21 Javascript
如何提高javascript加载速度
Dec 26 Javascript
vue引入静态js文件的方法
Jun 20 Javascript
如何制作自己的原生JavaScript路由
May 05 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
咖啡的化学
2021/03/03 咖啡文化
php多次include后导致全局变量global失效的解决方法
2015/02/28 PHP
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
2013/05/07 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
jquery中trigger()无法触发hover事件的解决方法
2015/05/07 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
详解Python中for循环的使用方法
2015/05/14 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
Python中bisect的使用方法
2019/12/31 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
大学生职业规划前言模板
2013/12/27 职场文书
小露珠教学反思
2014/04/30 职场文书
党员评议思想汇报
2014/10/08 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
听证会主持词
2015/07/03 职场文书
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers