使用JavaScript将HTML内容替换为来自外部XML文件的内容？

Question

我正在尝试将API生成的XML文件与（当前）静态网页连接，该网页可以在oliverpwilson.github.io/tubular中找到。 我有一个大致像这样的HTML文件：

<div>
    <span id="content">No Content Yet</span>
</div>

和<header>中的一些Javascript来确定<span> ：

<script>
      function myFunction() {
      document.getElementById("content").innerHTML = "Some Content Now!";
</script>

和<body onload="myFunction">以便在加载时触发。

所有这一切。

我想做的是使用由API（准确地说是伦敦运输API）生成的外部XML文件，该文件托管在URI http://cloud.tfl.gov.uk/TrackerNet/LineStatus ，以对其进行解析信息，并使用该信息来更新我的

document.getElementById("content").innerHTML = "Some Content Now!";

显示在引号内，即替换“立即添加某些内容！”。 以及存在于某个标记内的XML文件生成的任何内容，例如<Status Description="Good Service"> ，其中“立即提供某些内容！” 将被“良好的服务”代替。

我希望这大致上有意义。 我不知道该如何处理，因此我们将不胜感激。

Answer 1

我已经查看了您的网站上发布的内容。 在其中，您具有这样的元素，这些元素具有以下结构：

div xxx-line
 |--- div details
       |--- div status
       |--- div details

有了这些，您可以选择直接在javascript中找到所需的内容。 您可以通过“状态”或“详细信息”中的ID来调用它，也可以随意浏览“ div xxx-line”类。

您可以使用以下代码读取xml：

if (window.DOMParser)
{
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(txt,"text/xml");
}
else // Internet Explorer
{
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async=false;
  xmlDoc.loadXML(txt);
}

这样，您就可以从节点获取信息：

//Get status
var status = xmlDoc.getElementsByTagName("status")[0].childNodes[0].nodeValue;

//Get details
var details = xmlDoc.getElementsByTagName("status")[0].childNodes[0].nodeValue;

使用变量状态或详细信息，您可以替换div的内容

使用JavaScript将HTML内容替换为来自外部XML文件的内容？

问题描述

1 个解决方案

解决方案1
1 2014-11-23 17:42:57

使用JavaScript将HTML内容替换为来自外部XML文件的内容？

问题描述

1 个解决方案

解决方案1 1 2014-11-23 17:42:57

解决方案1
1 2014-11-23 17:42:57