JavaScript包含另一個文件

Question

我有這段代碼：

var curState = 'Agenda';

function switchState(newState) {
  curState = newState;
}

function Inbox() {
  switchState('Inbox');
  document.getElementById("u-content").innerHTML = "Currently, you're viewing the Inbox.";
}

function Friends() {
  switchState('Friends');
  document.getElementById("u-content").innerHTML = "Currently, you're viewing the Friends.";
}

function Agenda() {
  switchState('Agenda');
  document.getElementById("u-content").innerHTML = "Currently, you're viewing the Agenda.";
}

function List() {
  switchState('List');
  document.getElementById("u-content").innerHTML = "Currently, you're viewing the Book List.";
}

function News() {
  switchState('News');
  document.getElementById("u-content").innerHTML = "Currently, you're viewing the News.";
}

function Notes() {
  switchState('Notes');
  document.getElementById("u-content").innerHTML = "Currently, you're viewing the Notes.";
}

當然，顯示的文字是測試，我將對其進行更改。 關鍵是，我必須在菜單的這些“狀態”中放入很多文本，並在此處簡單地鍵入不是很方便，特別是如果以后需要進行更改時。 因此，我想知道如何在JavaScript中添加不同形式的文件，或者讓它們使用JavaScript顯示，例如* .php文件。

是否有人知道該怎么做？ 我已經在互聯網上進行了大量搜索，但是找不到對我有用的東西，除了document.getElementById().innerHTML = "";

Answer 1

有三種簡單的方法可以做到這一點：

變體A：通過AJAX調用從服務器獲取您的innerHTML-類似

function News() {
  switchState('News');
  document.getElementById("u-content").innerHTML = "Please wait for News to load.";
  //start AJAX call here
}

function AJAXcallOnSuccess() {
  document.getElementById("u-content").innerHTML = //Result text from AJAX call;
}

變體B：在原始頁面中傳遞了您的文本，但未顯示。 就像是

<blah>
... 
<div style="display: none;" id="newsPlaceHolder">
This is the text for the news item
</div>
...
</blah>

function News() {
  switchState('News');
  document.getElementById("u-content").innerHTML = document.getElementById("newsPlaceHolder").innerHTML
}

變體B導致最簡單的變體C：在頁面中准備好所有DIV，但一次只顯示一個。

var activeDiv = null;

function News() {
  switchState('News');
  if (activeDiv) activeDiv.style.display='none';
  activeDiv=document.getElementById("u-content-news");
  activeDiv.style.display='block';
}