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 相关文章推荐
JavaScript中的对象化编程
Jan 16 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
JS实现文字掉落效果的方法
May 06 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
11行JS代码制作二维码生成功能
Mar 09 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
vue.js 实现a标签href里添加参数
Nov 12 Javascript
vue 导出文件,携带请求头token操作
Sep 10 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
第七节 类的静态成员 [7]
2006/10/09 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
PHP引用返回用法示例
2016/05/28 PHP
JS实现可改变列宽的table实例
2013/07/02 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
python实现目录树生成示例
2014/03/28 Python
Python生成随机验证码的两种方法
2015/12/22 Python
python多进程实现进程间通信实例
2017/11/24 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
Python 处理图片像素点的实例
2019/01/08 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
上级检查欢迎词
2014/01/18 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
教师党员个人整改措施
2014/10/27 职场文书
工商局个人工作总结
2015/03/03 职场文书