使用 Javascript 从本地文件夹读取 XML 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14106501/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Read XML File using Javascript from a Local Folder
提问by MES5464
I am trying to learn how to read into a web page data in an XML file. This is a static HTML page. I do not want a web server and I cannot use Ajax. The XML file is local (in the same directory as the HTML file). I want this to work in a Chrome browser.
我正在尝试学习如何读入 XML 文件中的网页数据。这是一个静态 HTML 页面。我不想要一个网络服务器，我不能使用 Ajax。XML 文件是本地的（与 HTML 文件在同一目录中）。我希望它在 Chrome 浏览器中工作。
What I need to do is:
我需要做的是：
- Read the XML file on the page onLoad event.
- Use innerHTML to insert the XML data into a div.
- 读取页面上的 XML 文件 onLoad 事件。
- 使用innerHTML 将XML 数据插入到div 中。
My problem is in reading the XML file. All of the examples I have found I think will only work if there is a web server running, which I have to avoid.
我的问题在于读取 XML 文件。我发现的所有示例我认为只有在有网络服务器运行时才有效，我必须避免这种情况。
采纳答案by Zeke Alexandre Nierenberg
If you're reading another file the only way to do that with front end JS is another request (ajax). If this were node.js it would be different because node can access the filesystem. Alternatively if you get the xml into a javascript string on the same page, you can manipulate it. There are a number of good libraries (jquery's parseXML).
如果您正在阅读另一个文件，那么使用前端 JS 执行此操作的唯一方法是另一个请求（ajax）。如果这是 node.js 它会有所不同，因为 node 可以访问文件系统。或者，如果您将 xml 转换为同一页面上的 javascript 字符串，则可以对其进行操作。有许多不错的库（jquery 的 parseXML）。
回答by rmobis
Since you're only targeting Chrome, you could take a look at the File API. You'd have to prompt the user to select the file or drop it into a specific area of the page though, which might be something you'd rather avoid, or not. The following HTML5 Rocks articleshould help.
由于您仅针对 Chrome，您可以查看File API。不过，您必须提示用户选择文件或将其放入页面的特定区域，这可能是您宁愿避免或不希望的事情。以下HTML5 Rocks 文章应该会有所帮助。
回答by Jonathan M
Assuming the HTML, XML and browser are all on the same machine, you might try using an Iframe in the HTML that references the XML using a URL like file:\.
假设 HTML、XML 和浏览器都在同一台机器上，您可以尝试在 HTML 中使用 Iframe，它使用类似 file:\ 的 URL 引用 XML。
回答by adamxtokyo
Original answer here: https://stackoverflow.com/a/48633464/8612509
原答案在这里：https: //stackoverflow.com/a/48633464/8612509
So, I might be a little late to the party, but this is to help anybody else who's been ripping his/her hair out looking for a solution to this.
所以，我参加聚会可能有点晚了，但这是为了帮助那些一直在寻找解决方案的人。
First of all, CORS needs to be allowed in the browser if you're not running your HTML file off a server. Second, I found that the code snippets most people refer to in these kind of threads don't work for loading local XML-files. Try this (example taken from the official docs):
首先，如果您不是在服务器上运行 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);
The method (1st arg) is ignored in xhr.open if you're referring to a local file, and async (3rd arg) is true by default, so you really just need to point to your file and then parse the result! =)
如果您指的是本地文件，则 xhr.open 中的方法（第一个参数）将被忽略，并且默认情况下 async（第三个参数）为 true，因此您实际上只需要指向您的文件然后解析结果！=)
Good luck!
祝你好运！
回答by chriswins2much
You could do something like this:
你可以这样做：
<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>
回答by Moran Menahem
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;
回答by Luc
Works with IE11
适用于 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;
