最近在工作之余, 想用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才被加入，并且默认是开启的。不过你也可以将这个关掉，去掉后, 就可以加载本地的文件了.
