动态加载网站的一部分 - 更改 url答案

【问题标题】：dynamically load part of a website - change url动态加载网站的一部分 - 更改 url
【发布时间】：2012-05-17 08:45:50
【问题描述】：

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

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

这是一些查询插件吗？

【问题讨论】：

【解决方案1】：

我完全同意@JMCCreative。看起来这是一次真正的刷新。你应该看看 StackOverflow 上的以下帖子。

【讨论】：

查看子页面的 URI http://www.bits-apogee.org/2011/#Automation/Circuit_Design_Challenge/ 哈希转换为变量后的所有内容，然后通过 XHR 加载该相对路径

【解决方案2】：

站点在 URL 中使用哈希 (#) 来表示正在加载的新内容。

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

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

【讨论】：

对于 Google，添加 !在您的井号标签后签名；）。另请参阅：developers.google.com/webmasters/ajax-crawling/docs/…。

【解决方案3】：

有两种可能：

您可以使用 HTML5 功能来更改 url（历史 pushState），但是该功能尚未在所有浏览器中都可用。有关更多信息，请查看此 SO 帖子：Is there a way to change the browser's address bar without refreshing the page?。
对于尚无上述功能的浏览器，您可以使用井号 (#) 部分作为备用。

如果你使用 jQuery，你可以使用方便的插件jQuery Address。这将处理上述两种情况。

【讨论】：

【解决方案4】：

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

这类流程的圈子通常是这样的：

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

【讨论】：