0

我正在制作一个包含多个页面的网站。所有页面都有完全相同的顶部、导航栏和页脚。导航到不同页面时唯一改变的是正文。我想知道的是如何在导航到不同的页面时只加载页面的正文，但保持顶部、导航栏和页脚显示，这样你得到的效果就是除了正文没有任何变化。

4

3 回答 3

3

你有两个选择：

  • iframes - 页面主体是一个iframe元素，您更改 iframesrc以加载新页面
  • AJAX - JavaScript 使用 XMLHttpRequest 获取新页面的 HTML 并将其动态加载到正文中而无需重新加载页面
于 2013-05-29T01:27:50.153 回答
1

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

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

我建议不做这些。更好的是在所有页面中都包含页眉和页脚内容。有几种方法可以做到这一点，而无需在一堆地方重复 HTML 代码：如果您正在动态生成页面，请查看layouts，它允许您为所有页面指定可重用的模板。确切的方法取决于您使用的框架，但作为示例，以下是您在 Rails 中的操作方式. 如果您的页面是静态的（即您上传到服务器的一些 HTML 文件），您会想要做类似的事情，但不是动态生成页面，而是使用静态 HTML 生成器并编译您的页面. 这允许您在一个地方指定页眉和页脚，然后在单独的文件中指定内容。编辑它们后，您运行一个命令，它会创建输出文件，其中每个文件都有页眉和页脚的副本。然后你上传它们。例如，参见Jekyll。

于 2013-05-29T01:39:15.140 回答
0

由于另一个原因，我自己也在考虑这个，但我在想的是，您可以将一个 javascript 事件处理程序附加到所有具有“href”属性的锚标记。在触发这些事件时，它会向目标调用 XHR(pure js) 或 $.get(jquery)，转储包含动态主体的 div 的内容并换入新内容。

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

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

于 2013-05-29T01:30:57.413 回答