兼容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 相关文章推荐
Code:findPosX 和 findPosY
Dec 20 Javascript
Javascript Tab 导航插件 (23个)
Jun 11 Javascript
js 字符串操作函数
Jul 25 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
JavaScript页面加载事件实例讲解
Sep 01 Javascript
react实现同页面三级跳转路由布局
Sep 26 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计算上一个月的今天
2013/05/23 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
AngularJs表单校验功能实例代码
2017/02/09 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
简单的三步vuex入门
2018/05/20 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
python中黄金分割法实现方法
2015/05/06 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
python生成lmdb格式的文件实例
2018/11/08 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
Python如何读取文件中图片格式
2020/01/13 Python
python爬虫如何解决图片验证码
2021/02/14 Python
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
什么是跨站脚本攻击
2014/12/11 面试题
学生党支部先进事迹
2014/02/04 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
分析设计模式之模板方法Java实现
2021/06/23 Java/Android