`
ch_kexin
  • 浏览: 898879 次
  • 性别: Icon_minigender_2
  • 来自: 青岛
社区版块
存档分类
最新评论

JS- IE/FireFox/Opera/Chrome读取本地XML分析

 
阅读更多

最近在工作之余, 想用Js+css+html写一个客户端小工具, 用XML作配置文件和数据库. 当用Jquery $.ajax{}读本地XML文件时, 除了FireFox可以读出来外, IE/Opera/Chrome皆不能读取. 依照网上资料, 我也试着用setResponseHeader("Content-Type","text/xml"), IE的responseXML依然是空的, 只有responseText有字符串传回来, 其他浏览器也取不出数据. 一急之下, 我决定自己用JS写一个各种浏览器都兼容, 读取本地XML的程序.
经过查看相关文档, 各浏览器有以下几种情况:

1. Chrome: 由于其安全机制限制, 不能读取本地文件.

2. Opera似乎也有同样的问题, 我不能确定, 只是查看了一个网页, 有这个说法.

3. 对于不能直接读取XML的浏览器, 网上提供一种思路, 就是建立一个隐藏的<iframe>, 通过它读取, 我试了一下, 但是无法解决这个问题,我也把代码帖出, 一起供大家研究..

4. 代码很啰嗦, 完全出于研究考虚, 用的时候, 可以不写这么多.

5. 下面这段代码, 只能在IE与FF下有效, 如果能解决iframe的问题, 那么各种浏览器都会有效
6. 详看代码与注释.

function getXml(xmlFile,id) {
var xmlDoc = null;
try {
//IE and FF are OK.
xmlDoc = getXMLDocument();
xmlDoc.async = false;
xmlDoc.load(xmlFile);

/////////////////////////////////////////////////////////////////////////////
HACK
//1.Refer to http://code.google.com/p/chromium/issues/detail?id=988#c21
// We can know that Chrome can't support "load" method, and some NB people create a User Script to support it.
// We can get the js code from
// http://code.google.com/p/chromium/issues/attachmentText?id=988&aid=8882496236429348707&name=doc_load.user.js&token=d9c2fbe14597961fcfb6d95214ac07af
// See the code, it uses XmlHttp object to read XML, so, we can create the object by ourself
//2.Chrome browser don't allow to load the local machine file, and Opera may have the same issue
// http://my.opera.com/community/forums/topic.dml?id=150223
// Some NB men think we can load the xml using <iframe></iframe>, but I don't think it can fix the issue.
// So, only IE and FF can support load the local XML document now, can anyone help me?

/////////////////////////////////////////////////////////////////////////////

catch (e) {
try {
var xmlHttp = null;
xmlHttp = getXmlHttp();
xmlHttp.open("POST", xmlFile, false);
xmlHttp.send(null);
if (xmlHttp.responseXML.xml && xmlHttp.responseXML.xml != "") {
xmlDoc = xmlHttp.responseXML;
}
else {
xmlDoc = loadIframe(xmlFile,id );
}
}
catch (e) {
xmlDoc = loadIframe(xmlFile, id);
}
}
return xmlDoc;
}
function getXMLDocument() {
if (window.ActiveXObject) {
var xmlDomName = "Msxml2.DOMDocument.";
//get the latest version.
//the latest version is 6.0
for (var i = 10; i > 2; i--) {
try {
xmlDom = new ActiveXObject(xmlDomName + i + ".0");
break;
}
catch (e) {
//
if (i < 3) {
try {
xmlDom = new ActiveXObject("Microsoft.XMLDOM");
}
catch (e2) {
alert("The IE browser can't support Xml Dom!");
}
}
}
}
}

//FireFox, Opera, chrome, etc.
else if (document.implementation && document.implementation.createDocument) {
xmlDom = document.implementation.createDocument("", "", null);
}
else {
alert("The browser can't support Xml Dom!");
}

return xmlDom;
}

//get the XMLHttpRequest object
function getXmlHttp() {
var xmlHttp = null;
//IE
if (window.ActiveXObject) {
var xmlHttpName = "MSXML2.XMLHttp.";
//get the latest version
//the latest version is 6.0
for (var i = 10; i >= 3; i--) {
try {
xmlHttp = new ActiveXObject(xmlHttpName + i + ".0");
break;
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
}
catch (e2) {
alert("The IE browser can't support XmlHttp!");
}
}
}
}
//FireFox, Opera, Chrome, etc.
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
else {
alert("The browser can't support XmlHttp!");
}
return xmlHttp;
}

function loadIframe(xmlFile,id) {
var xmlDom = null;
//create a new iframe for the xml file
var iframeID = id + "frame";
var Iframe = '<iframe src="' + xmlFile + '" id="' + iframeID + '" style="display:none;"></iframe>';
$("body").after(Iframe);

var frameHtml = null;
if ($("#" + iframeID).attr("id")) {
frameHtml = $("#" + iframeID).html();
}
if (frameHtml) {
try {
//IE
if (window.ActiveXObject) {
xmlDom = getXMLDocument();
xmlDom.loadXML(frameHtml);
}
//Firefox, Chrome,Opera, etc.
else if (document.implementation && document.implementation.createDocument) {
xmlDom = (new DOMParser()).parseFromString(frameHtml, "text/xml");
}
else {
alert("The browser can't support XML!");
}
}
catch (e) {
alert("The browser can't support XML!");
}
}
return xmlDom;
}

小注:

在firebug查看了一些错误情况,报错居然是“Access to restricted URI denied”。这个明显是跨 域访问的错误,但是本地文件怎么报这样的错呢?在Firefox的about:config搜索了一下policy,居然找到了原因所在,原来 Firefox对于本地文件也进行了同源访问的安全设置,配置参数是:security.fileuri.strict_origin_policy。这 个新的设置只是在firefox 3才被加入,并且默认是开启的。不过你也可以将这个关掉,去掉后, 就可以加载本地的文件了.   

 

分享到:
评论

相关推荐

    JS读取本地XML(支持IE和火狐和Google和Opea)

    对于Firefox、Chrome和Opera这些现代浏览器,它们遵循W3C标准,可以使用`FileReader` API或`fetch` API来读取本地XML文件。需要注意的是,这些浏览器通常不允许直接读取本地文件,除非文件是通过拖放、文件输入控件...

    js读取xml文件并获取文件内容

    // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } ``` 2. **打开连接**: - 使用...

    js操作XML文件(兼容FF,IE)

    在处理XML(可扩展标记语言)文件时,JavaScript提供了多种方法来读取、解析和修改XML数据,尽管不同浏览器(如Firefox和Internet Explorer)的实现可能存在差异。本文将详细探讨如何在JavaScript中操作XML文件,并...

    前端面试宝典

    - **Gecko**:Firefox浏览器的核心。 - **Blink**:基于WebKit,由Google和Opera联合开发,用于Chrome和新版Opera。 - **WebKit**:Safari浏览器的基础。 - **Presto**:早期Opera浏览器的内核。 **兼容性与...

    使用JS读取XML文件的方法

    JS(JavaScript)提供了多种方式来读取XML文件,从而实现数据的解析和使用。本文将详细介绍不同主流浏览器环境下使用JS读取XML文件的方法。 首先,我们必须了解浏览器之间在XML解析方面存在差异。根据目前主流...

    JS通过ajax动态读取xml文件内容的方法

    本文实例讲述了JS通过ajax动态读取xml文件内容的方法。分享给大家供大家参考。具体分析如下: ... {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for

    浏览器中操作XML文档[归纳].pdf

    大多数现代浏览器如IE、Firefox、Chrome、Safari和Opera都内置了XML解析器,通常是通过插件或本地实现的方式。这些解析器遵循DOM(Document Object Model)标准,将XML文档转换为一个树形结构,允许开发者通过...

    Firefox附加组件开发者指南

    开发Firefox扩展涉及到的主要技术包括XML、CSS、JavaScript和DOM。 - **XML**:用于定义扩展的配置和结构。 - **CSS**:用于定制扩展的外观。 - **JavaScript**:用于编写扩展的核心逻辑。 - **DOM**:用于操作HTML...

    javascript结合ajax读取txt文件内容.docx

    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari var oAjax = new XMLHttpRequest(); } else { // code for IE6, IE5 var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); }...

    JAVA_jsp任意浏览器的图片上传预览

    不同的浏览器,如Internet Explorer(IE)、Firefox、Safari、Opera和Chrome,由于其渲染引擎和API支持的差异,对本地文件操作的支持各不相同。例如,IE6、IE7、IE8、IE9以及Firefox的不同版本之间就存在显著的区别...

    Ajax程序设计入门

    // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } ``` **3. 使用XMLHttpRequest**...

    sarissa-full-0.9.9.4

    由于JavaScript和XML处理在不同浏览器中的实现可能存在差异,Sarissa库致力于提供一种统一的接口,兼容包括Internet Explorer、Firefox、Chrome、Safari和Opera在内的多种主流浏览器。这意味着开发者可以使用Sarissa...

    12JavaScript异步Ajax与json总结.docx

    在所有现代浏览器中,如IE7+、Firefox、Chrome、Safari和Opera,都内置了`XMLHttpRequest`对象。在老版本的IE(IE5和IE6)中,需要使用`ActiveXObject`来创建XMLHttpRequest。以下是一段兼容性检查的代码: ```...

    WEB开发 之 AJAX - 创建 XMLHttpRequest 对象.docx

    所有现代浏览器,包括IE7及更高版本、Firefox、Chrome、Safari和Opera,都内置了XMLHttpRequest对象。 #### 创建XMLHttpRequest对象 在JavaScript中创建XMLHttpRequest对象非常简单,一般有两种方式: 1. 对于...

    javascript ajax

    1. **创建XMLHttpRequest对象**:所有现代浏览器(IE7+、Firefox、Chrome、Safari、Opera等)都内置了XMLHttpRequest对象,它是AJAX的核心。首先,我们需要创建一个XMLHttpRequest实例。 ```javascript var xhr = ...

    ajax的好好东西

    if (window.XMLHttpRequest) { // for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } ``` 这段...

    paramquery-7.1.0.zip

    ParamQuery Grid Pro是ParamQuery Grid的商业级版本,并且已成为台式机,移动设备和触摸设备的专业企业应用程序的首选工具。...所有主要浏览器IE(9 +),Firefox,Chrome,Opera等的外观和功能都一致

Global site tag (gtag.js) - Google Analytics