7

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

我需要做的是：

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

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

4

7 回答 7

2

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

于 2012-12-31T22:30:42.343 回答
1

由于您只针对 Chrome，您可以查看File API。您必须提示用户选择文件或将其放入页面的特定区域，这可能是您宁愿避免的事情，也可能不这样做。下面的HTML5 Rocks 文章应该会有所帮助。

于 2012-12-31T22:36:54.197 回答
1

假设 HTML、XML 和浏览器都在同一台机器上，您可以尝试在 HTML 中使用 iframe，该 iframe 使用诸如 file:\ 之类的 URL 引用 XML。

于 2012-12-31T22:39:45.673 回答
1

原始答案在这里：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 中的方法（第 1 个参数）将被忽略，并且默认情况下 async（第 3 个参数）为 true，因此您实际上只需要指向您的文件然后解析结果！=)

祝你好运！

于 2018-02-06T00:05:35.247 回答
0

你可以这样做：

<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>
于 2012-12-31T22:53:28.733 回答
0 
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;
于 2014-05-22T08:14:24.713 回答
0

适用于 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;
于 2016-04-22T12:46:33.367 回答