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 相关文章推荐
使用jquery给input和textarea设定ie中的focus
May 29 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
JS运算符简单用法示例
Jan 19 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 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
PHP中for循环语句的几种变型
2006/11/26 PHP
PHP对字符串的递增运算分析
2010/08/08 PHP
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
彻底理解js面向对象之继承
2018/02/04 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
[08:08]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY
2014/06/25 DOTA
Python入门篇之字典
2014/10/17 Python
Python实现的tab文件操作类分享
2014/11/20 Python
Python选课系统开发程序
2016/09/02 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
python散点图实例之随机漫步
2018/08/27 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
python中dict()的高级用法实现
2019/11/13 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
python有几个版本
2020/06/17 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
北京大学自荐信范文
2014/01/28 职场文书
雷锋的故事观后感
2015/06/10 职场文书
繁星春水读书笔记
2015/06/30 职场文书
初中思品教学反思
2016/02/20 职场文书