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

Question

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

Answer 1

简单的解决方案：iframes，更好但稍微难一点的解决方案：AJAX.

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

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