从本地文件夹使用Javascript读取XML文件

问题描述:

我正试图学习如何读取XML文件中的网页数据。这是一个静态的HTML页面。我不想要Web服务器,也不能使用Ajax。 XML文件是本地的(与HTML文件位于同一目录中)。我希望这可以在Chrome浏览器中工作。从本地文件夹使用Javascript读取XML文件

我需要做的是:

  1. 阅读页面onLoad事件的XML文件。
  2. 使用innerHTML将XML数据插入到div中。

我的问题是在阅读XML文件。我发现的所有例子,我认为只有在运行Web服务器的情况下才会有效,我必须避免这种情况。

+1

不能没有AJAX – PitaJ

+1

可能重复的[可以JavaScript访问文件系统?](http://*.com/questions/1087246/can-javascript-access-a-filesystem) – Barmar

+0

XML在哪里?服务器端还是浏览器? –

如果您正在阅读另一个文件,那么使用前端JS执行此操作的唯一方法是另一个请求(ajax)。如果这是node.js,它会不同,因为节点可以访问文件系统。或者,如果您在同一页面上将xml转换为JavaScript字符串,则可以对其进行操作。有许多优秀的库(jquery的parseXML)。

+1

我认为HTML和XML与浏览器都在同一个系统上。 –

+0

是的,他们是,但你不能同时拥有。如果你用一个脚本运行一个html文件,那么这个文件也不能是一个xml文件。不过,您可以在JavaScript变量中添加一些xml。我所做的一点是,你不能加载另一个文件W/O Ajax –

由于您只定位到Chrome,因此您可以查看File API。您必须提示用户选择文件或将其放入页面的特定区域,这可能是您宁愿避免的,也可能不是。以下HTML5 Rocks article应该有所帮助。

假设HTML,XML和浏览器都在同一台机器上,您可以尝试在HTML中使用Iframe,使用类似文件:\的URL来引用XML。

你可以做这样的事情:用IE11

<html> 
<head> 
<script type="text/javascript"> 
//If using jQuery, select the tag using something like this to manipulate 
//the look of the xml tags and stuff. 
$('#xframe').attr('style', 'thisxmltag.....'); 
</script> 
</head> 
<body> 
... 
<frame id="xframe" src="the_xml_doc"></src> 
</body> 
</html> 

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp = new XMLHttpRequest(); 
} 
else {// code for IE6, IE5 
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
xmlhttp.open("GET", file_Location, false); 
xmlhttp.send(); 
xmlDoc = xmlhttp.responseXML; 
document.getElementById(your_div_id).value =   
xmlDoc.getElementsByTagName(The_tag_in_xml_you_want_to_display) 
[0].childNodes[0].nodeValue; 

作品

<head> 
    // To be hidden with a better method than using width and height 
    <OBJECT id="data1" data="data.xml" width="1px" height="1px"></OBJECT> 

    // to work offline 
    <script src="lib/jquery-2.2.3.min.js"></script> 
</head> 

<body> 
    <script> 
    var TheDocument = document.getElementById("data1").contentDocument; 
    var Customers = TheDocument.getElementsByTagName("myListofCustomers"); 
    var val1 = Customers[0].getElementsByTagName("Name")[0].childNodes[0].nodeValue; 

原来的答复这里:https://*.com/a/48633464/8612509

所以,我可能有点晚了派对,但是这是为了帮助其他任何正在寻找解决方案的人解决问题这个。

首先,如果您没有将HTML文件从服务器上运行,则需要在浏览器中允许CORS。其次,我发现大多数人在这类线程中引用的代码片段不适用于加载本地XML文件。试试这个(从官方文档所采取的示例):

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'file.xml', true); 

xhr.timeout = 2000; // time in milliseconds 

xhr.onload = function() { 
    // Request finished. Do processing here. 
    var xmlDoc = this.responseXML; // <- Here's your XML file 
}; 

xhr.ontimeout = function (e) { 
    // XMLHttpRequest timed out. Do something here. 
}; 

xhr.send(null); 

的方法(1 ARG)在xhr.open如果你指的是本地文件将被忽略,和异步(第三个参数)为真默认,所以你真的只需要指向你的文件,然后解析结果! =)

祝你好运!