在浏览网站时，网站的某个部分如何保持显示（有点像只加载一次）？

Question

我正在创建一个包含多个页面的网站。所有页面都具有相同的顶部，导航栏和页脚。导航到不同页面时唯一改变的是身体。我想知道的是如何在导航到不同的页面时仅加载页面的主体，但保持顶部，导航栏和页脚显示，这样你得到的效果是除了正文之外没有任何变化。

Answer 1

您有两种选择：

• iframes - 页面正文为iframe元素且您更改iframe src以加载新页面
• AJAX - JavaScript使用XMLHttpRequest获取新页面的HTML并将其动态加载到正文中，而无需重新加载页面

Answer 2

老派对此的回答是使用frames。框架完全符合您的要求;您有一个页面，其中您为站点的顶部，底部和主窗格指定单独的HTML文件。导航只是将不同的页面加载到“主”框架中。然而，由于各种原因，这种情况不再真正完成：它看起来很笨拙，具有奇怪的滚动行为，并且在链接到其他站点时很烦人。

更好的方法是通过AJAX加载主要内容。您将显示仅包含页眉和页脚的页面，然后使用Javascript动态地从服务器中拉出正确的页面并将其内容插入页面中的占位符div。导航到其他页面涉及运行JS代码以加载链接内容并替换占位符中的所有内容。这也有缺点：您需要为历史记录添加特殊处理（即使后退按钮按预期工作）和深层链接（例如，使书签加载正确的内容）。

我建议不要这样做。更好的是在所有页面中都有页眉和页脚内容。有几种方法可以在不重复HTML代码的情况下执行此操作：如果您动态生成页面，请查看布局，这样您就可以为所有选项指定可重用的模板页面。确切的方法取决于您使用的框架，但作为示例，这里是how you do it in Rails。如果您的页面是静态的（即您上传到服务器的某些HTML文件），您将需要执行类似的操作，但不是动态生成页面，而是使用静态HTML生成器并编译页面。这允许您在一个位置指定页眉和页脚，然后在单独的文件中指定您的内容。编辑它们之后，运行一个命令，它会创建输出文件，每个文件的页眉和页脚都有一个副本。然后你上传它们。例如，请参阅Jekyll。

Answer 3

我正在考虑另一个原因，但我想的是你可以使用'href'属性将javascript事件处理程序附加到所有锚标签。在触发这些事件时，它会向目标调用XHR（纯js）或$ .get（jquery），转储包含动态主体的div的内容并交换新内容。

你必须考虑到你需要将表单提交移动到XHR方法。

已经使用的一个例子是www.facebook.com。当您点击页面时，正常刷新。当你打开聊天并开始讲话时，页面开始通过某种Ajax方法重新加载。