单击链接时如何在同一页面上显示另一个 HTML 文件的内容？

Question

当我的页面左侧有几个链接时，如何在单击链接时在同一页面上显示另一个 HTML 文件的内容？

Answer 1

简单的解决方案：iframes，更好但稍难的解决方案：AJAX。

• iFrame
  要创建 iframe，请将其放入源代码中：<iframe src="the/URL/of/a/page.html"></iframe>。这将在 iframe 中的the/URL/of/a/page.html 处显示文件。 iframe 可以使用 CSS 设置样式（仅供参考）。然后给你所有的<a>s 一个类，我用link 作为我的示例 JavaScript，iframe 一个 ID（我用了iframe）。 （没有 JS AFAIK 就无法做到这一点，否则您将不得不使用已弃用的 <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 上看到了一些解决方法/hacks）。例子：

  $(".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'
  });
  

注意：我没有测试任何这些。