我正在尝试学习如何读入 XML 文件中的网页数据。这是一个静态 HTML 页面。我不想要 Web 服务器，也不能使用 Ajax。 XML 文件是本地的（与 HTML 文件位于同一目录中）。我希望它可以在 Chrome 浏览器中使用。
我需要做的是：
我的问题在于读取 XML 文件。我发现的所有示例我认为只有在运行 Web 服务器时才有效，我必须避免这种情况。
【问题讨论】：
标签： javascript xml
如果您正在读取另一个文件，那么使用前端 JS 执行此操作的唯一方法是另一个请求 (ajax)。如果这是 node.js 会有所不同，因为 node 可以访问文件系统。或者，如果您将 xml 转换为同一页面上的 javascript 字符串，则可以对其进行操作。有很多不错的库（jquery 的 parseXML）。
【讨论】：
由于您只针对 Chrome，您可以查看File API。您必须提示用户选择文件或将其放入页面的特定区域，这可能是您宁愿避免的事情，也可能不这样做。以下HTML5 Rocks article 应该会有所帮助。
【讨论】：
假设 HTML、XML 和浏览器都在同一台机器上，您可以尝试在 HTML 中使用 iframe，该 iframe 使用诸如 file:\ 之类的 URL 引用 XML。
【讨论】：
这里的原始答案：https://stackoverflow.com/a/48633464/8612509
所以，我可能会迟到一点，但这是为了帮助其他一直在寻找解决方案的人。
首先，如果您不是在服务器之外运行 HTML 文件，则需要在浏览器中允许 CORS。其次，我发现大多数人在这类线程中引用的代码 sn-ps 不适用于加载本地 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.open 中将忽略方法（第一个参数），并且默认情况下 async（第三个参数）为 true，因此您实际上只需要指向您的文件，然后解析结果！ =)
祝你好运！
【讨论】：
你可以这样做：
<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;
【讨论】：