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