动态加载网站的一部分 - 更改网址

Question

我的问题是关于这个网站 - http://www.bits-apogee.org/2011/

每当您点击侧面导航栏中的链接时，网站的中间部分都会动态加载。此外，网址也会发生变化，其他一切都保持不变。这是怎么做到的？

这是一些查询插件吗？

Answer 1

网站在网址中使用哈希（＃）来表示正在加载的新内容。

这对于动态加载内容的书签（通常哈希加载到页面上的特定区域，命名锚点或新浏览器的ID）非常有用，因为它们不会触发页面刷新...

http://www.highrankings.com/urls-with-hashtags-307对此存在缺陷（SEO）问题......但是你会注意到越来越多的网站在做这件事，所以我认为SEO机器人会变得更好。

Answer 2

我完全同意@JMCCreative。它看起来像是一个真正的刷新。您应该查看StackOverflow上的以下帖子。

Modify the URL without reloading the page

Answer 3

有两种可能性：

• 您可以使用HTML5功能更改网址（历史记录pushState），但此功能尚未在所有浏览器中提供。有关详细信息，请查看此SO帖子：Is there a way to change the browser's address bar without refreshing the page?。
• 对于没有上述功能的浏览器，您可以使用＃标签部分作为后退。

如果您使用jQuery，则可以使用方便的插件jQuery Address。这将照顾上述两种情况。

Answer 4

他们没有使用插件。他们正在对这样的URL做一个ajax请求： http://www.bits-apogee.org/2011/getcontent/?even=Rachel+Armstrong 并将概述转储到容器中。

---

这种过程的循环通常是这样的：

1. 收听链接点击次数
点击
2. ，防止事件违约。
3. 用户window.history.pushState更新网址
4. 其他一些代码 - 听到新的历史
5. 生成一个网址以获取内容。
6. ajax加载网址
7. 将数据转储到容器中

---

我使用过的2个库都比上面容易，因为它们依赖于通过AJAX加载常规html页面而不是你指向的示例站点，它使用JSON格式来获取数据。

• Pjax - 通过从其他网址提取HTML节点来更新页面的peices。
• Ajaxify - 最简单的解决方案，您可以在10分钟内在HTML网站上实现这一效果。