js操作XML文件的实现方法兼容IE与FireFox


Posted in Javascript onJune 25, 2016

最近项目中用到了xml,需求是用户安装产品时先把一系列的数据保存到xml文件中,当执行到最后一步时才写入数据库,这样最大限度的减少了数据库的访问,于是不得不纠结在各浏览器的兼容性的问题(悲哀啊....)

进入正文 下面是一个xml文件 (createInstal.xml)

<?xml version="1.0" encoding="utf-8"?>
<info>
<Item>
<id descrption="级别" name="1" f_chines="编号" t_chines="??" english="id" value="1">编号</id>
<levelname descrption="级别" name="" f_chines="级别名称" t_chines="??e名?" english="Level-Name" value="级别一">级别名称</levelname>
<decrption descrption="级别" name="" f_chines="级别描述" t_chines="??e描述" english="Level-Description" value="级别描述一">描述</decrption>
<Tchines descrption="级别" name="" f_chines="繁体中文" t_chines="繁?中文" english="T-Chinese" value="??e一">繁体中文</Tchines>
<english descrption="级别" name="" f_chines="英文名称" t_chines="英文名?" english="English" value="LevelOne">英文名称</english>
<奖项六 descrption="奖项" name="106" f_chines="奖项六" t_chines="??六" english="Worda-of-t" value="a"/>
<奖项十一 descrption="奖项" name="111" f_chines="奖项十一" t_chines="??十一" english="11" value="0.05"/>
<奖项十二 descrption="奖项" name="112" f_chines="奖项十二" t_chines="??十二" english="2222" value="0.04"/>
<奖项十三 descrption="奖项" name="113" f_chines="奖项十三" t_chines="??十三" english="3333" value="0.85"/>
<奖项一 descrption="奖项" name="101" f_chines="奖项一" t_chines="??一" english="Aword-of-a" value="0.90"/>
</Item> 
</info>

为了能兼容IE与FF,写如下几个函数(loadxml.js):

var is_Ie =false; //是否为IE浏览器
if (window.ActiveXObject) {
is_Ie =true;
}
//加载多浏览器兼容的xml文档
function loadXml(xmlUrl) {
var xmldoc =null;
try {
xmldoc =new ActiveXObject("Microsoft.XMLDOM");
}
catch (e) {
try {
xmldoc = document.implementation.createDocument("", "", null);
} catch (e) {
alert(e.message);
}
}
try {
//关闭异步加载
xmldoc.async =false;
xmldoc.load(xmlUrl);
return xmldoc;
}
catch (e) {
alert(e.message);
}
returnnull;
}
//将一个xml文档格式的字符串换成xml文档
function createXml(xmlText) {
if (!xmlText) {
returnnull;
try {
var xmldocm =new ActiveXObject("Microsoft.XMLDOM");
xmldocm.loadXML(xmlText);
return xmldocm;
}
catch (e) {
try {
returnnew DOMParse().parseFromString(xmlText, "text/xml");
}
catch (e) {
returnnull;
}
}
}
}
//获取节点及其子节点的文本
function getXmlText(oNode) {
if (oNode.text) {//IE
return oNode.tex;
}
var sText ="";
for (var i =0; i < oNode.childNodes.length; i++) { //遍历子节点
if (oNode.childNodes[i].hasChildNodes()) { //是否有子节点
sText += getXmlText(oNode.childNodes[i]);
} else {
sText += oNode[i].childNodes.nodeValue;
}
}
return sText;
}

//获取节点及其子节点的字符串标识
function getXml(oNode) {
if (oNode.xml) {//IE
return oNode.xml;
}
var serializer =new XMLSerializer();
return serializer.serializeToString(oNode);

}
//获取指定节点的文本(注意:也可以用oNode.childNodes[0].nodeValue来获取节点的文本信息,这样就不用考虑浏览器的问题了oNodeoNode)
function getxmlnodeText(oNode) {
if (is_Ie) {
return oNode.text;
} else {
if (oNode.nodeType ==1)
return oNode.textContent;
}
}
//获取指定节点的属性值
function getxmlnodeattribute(oNode, attrName) {
if (is_Ie) {
return oNode.getAttribute(attrName);
} else {
if (oNode.nodeType ==1|| oNode.nodeType =="1")return oNode.attributes[attrName].value;return"undefined";}}

ok  IE与FF 不再是问题,具体的操作方法如下:

var docum = loadxml("createInstal.xml");//加载一个xml文件

var root = docum.documentElement;//根节点

var nodelist = root.getElementsByTagName("Items");

for(var i=0;i<nodelist[0].childNodes.length;i++)

{

var attr = getxmlnodeattribute(nodeList[0].childNodes[i], "descrption");//获取这个节点的descrption属性


if(attr != "undefined")//目的是兼容FF浏览器


{



alert(attr);


}

}

这样就能保证IE与FF的兼容,(目前谷歌浏览器没有办法用这种方法兼容,还待修改)

另外说下FireFox获取xml的两种方法:

firefox中JS读取XML文件

在网上搜“firefox中JS读取XML文件”的方法,找了半天,好 多都是问了没人答的。看到一堆程序员在抱怨firefox:“除了累死程序员没什么好处。”,言归正传。firefox不支持ie中的 ActiveXObject对象,要得到一个XML DOM有以下2种方法:

1、document.implementation.createDocument("", "", null);
2、window.XMLHttpRequest

示例:1、var dom=document.implementation.createDocument("", "", null);

dom.async=false;
dom.load("test.xml");//dom就是xml对象了。

2、var oXmlHttp = new XMLHttpRequest() ;
oXmlHttp.open( "GET", "test.xml", false ) ;
oXmlHttp.send(null) ;
//oXmlHttp.responseXML就是xml对象了。

注意:

1、火狐解析xml文档 

2、火狐浏览器和ie解析xml不一样节点的值用textContent。 

3、并且他会在有的层次child节点(即使用childNodes时)前后都加上"\n"换行符。(这个搞不清楚为什么,用firebug调试的时候就是这个样子,所以写过的代码最好测试一下,换个环境就不对了) ,也就是说第1个节点是"\n",第2个节点才是真正的

第一个节点。  第3个节点是"\n",第4个节点才是真正的第二个节点。

根据上述的火狐的情况,我这里有个例子避免了使用childNodes,而达到兼容性:点击进入

以上就是小编为大家带来的js操作XML文件的实现方法兼容IE与FireFox全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
js中匿名函数的N种写法
Sep 08 Javascript
jQuery.ajax 用户登录验证代码
Oct 29 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
javascript如何创建对象
Aug 29 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 #Javascript
jQuery图片渐变特效的简单实现
Jun 25 #Javascript
js删除局部变量的实现方法
Jun 25 #Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 #Javascript
javascript 广告移动特效的实现代码
Jun 25 #Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 #Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 #Javascript
You might like
基于mysql的论坛(3)
2006/10/09 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
jquery ui resizable bug解决方法
2010/10/26 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
Django Rest framework权限的详细用法
2019/07/25 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
留学自荐信写作方法
2014/01/27 职场文书
老人祝寿主持词
2014/03/28 职场文书
交通安全寄语大全
2014/04/08 职场文书
继承权公证书范本
2015/01/23 职场文书
2015入党自传书范文
2015/06/26 职场文书
聘任书范文大全
2015/09/21 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
Python使用永中文档转换服务
2022/05/06 Python