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实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
深入解析ES6中的promise
Nov 08 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 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中的常用魔术方法总结
2013/08/02 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
浅谈php中curl、fsockopen的应用
2016/12/10 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
AngularJS中scope的绑定策略实例分析
2017/10/30 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python的另外几种语言实现
2015/01/29 Python
python清理子进程机制剖析
2017/11/23 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
详解Python IO口多路复用
2020/06/17 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
给女儿的表扬信
2014/01/18 职场文书
政府门卫岗位职责
2014/04/29 职场文书
2014年宣传工作总结
2014/11/18 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python