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

Read XML File using Javascript from a Local Folder

本文关键字：读取 XML 文件 文件夹 Javascript 使用      更新时间：2023-09-26

我正在学习如何在XML文件中读取网页数据。这是一个静态HTML页面。我不想要一个web服务器，我不能使用Ajax。XML文件是本地的(在与HTML文件相同的目录中)。我希望这工作在Chrome浏览器

我需要做的是:

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

我的问题是在读取XML文件。所有的例子，我发现我认为只会工作，如果有一个web服务器运行，我必须避免。

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

原始答案:https://stackoverflow.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);

方法(第一个参数)在xhr中被忽略。打开，如果你引用一个本地文件，async(第3个参数)默认为true，所以你只需要指向你的文件，然后解析结果!=)

祝你好运!

既然你只针对Chrome，你可以看看文件API。但是，您必须提示用户选择文件或将其拖放到页面的特定区域，这可能是您希望避免的，或者不希望发生的事情。下面的HTML5 Rocks文章应该会有所帮助。

假设HTML、XML和浏览器都在同一台机器上，您可以尝试在HTML中使用Iframe，该Iframe使用类似file:'.

这样的URL引用XML。

你可以这样做:

<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;

适用于IE11

<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;
相关文章：