如何在單擊鏈接時在同一頁上顯示另一個HTML文件的內容？

Question

當我的頁面左側有幾個鏈接時，如何在單擊鏈接時在同一頁面上顯示另一個HTML文件的內容？

Answer 1

簡單的解決方案：iframe s，更好但更難解決方案：AJAX。

• 的iFrame
  要創建一個iframe把這個在你的源代碼：<iframe src="the/URL/of/a/page.html"></iframe>。這將在iframe中顯示文件the/URL/of/a/page.html。一個iframe可以用CSS來設計（僅供參考）。然後給你所有的<a>上課，我把link作爲我的示例JavaScript，並將iframe作爲ID（我帶了iframe）。 （有沒有辦法做到這一點沒有JS據我所知，或者你將不得不使用一個<frameset>，它被廢棄了。）這個例子JS：

  var links = document.getElementsByClassName("link"); // Get all the elements with the class link 
  
  for (var i; i < links.length; i++) { // Loop over all the links 
      links[i].onclick = function(e) { // Tell them what to do when they're clicked 
       e.preventDefault(); // Prevent the browser from navigating to the address of the links href 
       document.getElementById("iframe").src = links[i].href; // Set the iframe's src to the href of the a. 
      } 
  } 
  

• AJAX
  這是一個有點困難，並使用庫如jQuery極大地簡化了這項任務。在我的例子中，我使用jQuery，否則它會佔用更多的代碼行。
  你需要一個div來顯示加載的頁面，把一個放在你的頁面上並給它一個ID（在我的例子中我使用了resultbox）。請注意，AJAX通常只適用於來自同一個域的文件，這與iframe解決方案相反（儘管我相信我在SO上看到了一些解決方法/黑客攻擊）。這個例子：

  $(".link").click(function(e) { // If an element with the class 'link' get's clicked... 
      e.preventDefault(); 
      $("#resultbox").load("the/URL/of/a/page.html"); // ... load the contents of the file at the/URL/of/a/page.html into the element with the ID 'resultbox' 
  }); 
  

注：我沒有測試任何這一點。