Question

我正在尝试学习如何读取XML文件中的网页数据。这是一个静态HTML页面。我不想要一个Web服务器，我不能使用Ajax。 XML文件是本地的（与HTML文件位于同一目录中）。我希望这可以在Chrome浏览器中使用。

我需要做的是：

阅读onLoad事件页面上的XML文件。
使用innerHTML将XML数据插入div。

我的问题在于阅读XML文件。我认为我发现的所有示例只有在运行Web服务器时才有效，我必须避免这种情况。

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

原始答案：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.open中忽略该方法（1st arg），默认情况下async（3rd arg）为true，因此您只需要指向您的文件然后解析结果！ =）

祝你好运！

Answer 5

你可以这样做：

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

Answer 6

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;

Answer 7

适用于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;

使用本地文件夹中的Javascript读取XML文件

7 个答案: