网页设计模式/解决方案

Question

我希望有人可以帮助/指出我在这里正确的方向。

选项1

我创建了一个具有导航菜单的基本网站，我可以在导航中创建一个链接列表，每个链接将具有相同的页眉，导航，页脚和不同的主要内容。因此，当点击链接时，整个页面然后再次加载，除了主要内容不同之外，看起来仍然相同。

选项2

我创建了一个包含导航菜单，页眉，页脚和主div的网站。有一个jquery函数，当点击导航中的li时。只显示所需内容的相应页面将加载到主div中并显示其内容。有了这个只加载主div，页面的其余部分（导航，页眉，页脚，你根本不刷新）。 风格布局保持不变只有主要内容不同。

所以现在。使用选项1

• 整个页面刷新，
• 我可以链接到包含内容的特定页面（即http://domain.com/page2.html），整个页面加载导航，页眉，页脚等。
• 如果我获得了针对page3.html内容的google点击并点击它，http://domain.com/page3.html将加载导航，页眉，页脚等。

使用选项2。

• 只有主要div刷新（导航，页眉，页脚保持静止）。
• 当我在导航项目之间进行更改时，页面地址将保持http://domain.com/index.html，并且不会更改为http://domain.com/page3.html或http://domain.com/page4.html以向用户提供该链接。
• 如果我在第3页上获得了针对内容的google点击并点击了该内容，则用户只会获得没有导航，页眉，页脚的page3.html内容

---

所以

• 有没有办法创建一个类似第二个选项的页面，只有主要的div刷新时，相应页面中的内容在单击导航项时没有导航，页眉，页脚？
• 但是对于每个具有不同主要内容且保持相同导航，页脚，标题的页面，它仍然会有一个unigue网址。
• 然后，如果用户通过搜索引擎，他们将获得包含该页面内容的完整页面布局（导航，页脚，标题），而不仅仅是内容。

我希望我已经清楚地了解了我想要实现的目标

基本上我想创建Nav，Header，Footer保持静态的页面，并且只有当点击每个li项目时才重新加载主div。但是我需要每个页面都有一个唯一的URL，并且可以为搜索引擎用户加载包含所需内容的整个页面。

Answer 1

听起来你正在寻找PJAX - 或者用AJAX寻找pushState。基本上，所有请求都是通过ajax进行的，但是您使用pushState更新地址栏（这不会导致刷新）。

存在一个轻量级框架（由Youtube开发并由github等网站使用），名为spfjs，有助于处理此问题（以及处理后备......）

https://github.com/youtube/spfjs

如果您对一个简单的pjax解决方案感兴趣，可以在这里找到一个jQuery插件：

https://github.com/defunkt/jquery-pjax