动态加载内容而不刷新页面

Question

您是否可以通过单击链接动态加载容器内的内容，以避免在多个页面中为标题编写相同的代码？我正在使用Bootstrap。

Answer 1

您要找的是Single-page Applications。

对于动态生成的页面，解决此问题的最佳方法是扩展包含多个页面共享信息的主文件。通过这样做，您可以克服单页面应用程序实现带来的所有问题。

对于静态页面，有多种方法可以实现单页面应用程序的功能。

AJAX

AJAX是用于此目的的最佳和最常用的技术。使用AJAX，您可以在元素内动态加载外部网页的内容。使用jQuery可以更加轻松：

<button id="link1">Link 1</button>
<div id="target"></div>

<script type="text/javascript">
  jQuery(window).load(function() { // Run my code as soon as the page is ready
    jQuery('#link1').on('click', function() { // Bind closure to #link1's onClick event
      jQuery.get('myUrl', function(data) { // Perform AJAX GET request
        jQuery('#target').html(data); // If the request is successful, load the response inside the #target element
      });
    });
  });
</script>

内部框架

另一种技术使用iframes。用于此技术的代码几乎完全类似于前一个：

<button id="link1" src="link1Url">Link 1</button>
<iframe src="deafultPageUrl" id="target"></iframe>

<script type="text/javascript">
  jQuery(window).load(function() { // Run my code as soon as the page is ready
    jQuery('#link1').on('click', function(e) { // Bind closure to #link1's onClick event
      jQuery('#target').attr('src', jQuery(e.target).attr('src')); // Retrieve the src attribute from event.target, and update the iframe
    });
  });
</script>

显示/隐藏预加载的内容

这项技术不推荐;之前的那些实现更好的结果。 我决定把它留在这里，因为尽管效率低下，它实际上是一种可以用来开发单页应用程序的技术。

它包含预加载在您的单个页面中所有其他页面的内容，并仅显示用户请求的内容。然后，后者将被迫下载他未请求的内容，这些内容可能永远不会被使用。附加内容占较大文件大小，因此加载时间较慢。

Answer 2

我同意Fehniix，SPA可能就是你所追求的。这本书不依赖于框架（只是jQuery）：https://www.amazon.com/Single-Page-Applications-end-end/dp/1617290750

您还可以添加像Require.js这样的模块加载器，因为它们在SPA中使用频繁（可能会很快变得复杂）。