处理单页网站并使用 URL 哈希和 jQuery 维护状态答案

【问题标题】：Working with single page websites and maintaining state using a URL hash and jQuery处理单页网站并使用 URL 哈希和 jQuery 维护状态
【发布时间】：2011-05-06 00:45:33
【问题描述】：

我正在研究我的作品集，使其完全基于 jQuery。所以我的问题是当你转到一个页面时，然后刷新它会再次带你到主页。所以实际上我有两个问题。

您如何（通过 jQuery/Javascript）从 url 获取“哈希码”？
1. 例如我想要这个粗体部分：http://portfolio.theadamgaskins.com/Portfolio/#graphicsDesign
当您导航到新页面以包含该页面的哈希码时，如何更改地址栏中的 url？
1. 例如当你进入 graphicsDesign 页面时，地址栏中的链接变为http://portfolio.theadamgaskins.com/Portfolio/#graphicsDesign

【问题讨论】：

另外请注意，如果您希望 Google 为您的网页编制索引，您最终可能只有一页可供 Google 编制索引。因此，出于 SEO 的目的，这可能是一场噩梦。
解决方案：asual.com/jquery/address/docs
回应 Nathan.. 我同意。这将创建重复的内容，因为您页面上的所有日期对于搜索引擎来说都是相同的。视图的变化仅在前端，但谷歌索引所有！

标签： jquery url hash

【解决方案1】：

您将锚点指向内部链接，如下所示：

<a href="#graphicsDesign">Graphics</a>

然后简单的让jQuery响应点击事件，让浏览器自然地跟随内部链接。浏览器现在应该在其地址栏中具有内部链接。您可以使用以下 JavaScript 解析 the URL，然后加载 HTML 文档的正确部分。您需要编写代码，以便根据浏览器的内部地址加载正确的内容。

if(window.location.hash === "graphicsDesign" ||
window.location.hash === "somethingElse") {
    loadContent(window.location.hash);
}

【讨论】：

所有页面都包含在一个html文档中，并且jQuery在页面加载时隐藏除一个之外的所有页面。所以我需要在 javascript 中获取哈希码，这样我才能告诉 jQuery 显示哪个页面。
从隐藏所有的div开始，让
~hash === "graphicsDesign" 前面应该有一个哈希，就像~hash === "#graphicsDesign" @Sam152

【解决方案2】：

jQuery BBQ（“后退按钮和查询”）插件也很不错。 http://benalman.com/projects/jquery-bbq-plugin/

【讨论】：

【解决方案3】：

使用众多可用的历史插件之一，例如这里：http://plugins.jquery.com/project/jquery-history-web-2-0-hashchange-history-remote

【讨论】：

这更多地用于链接其他人并加载正确的内容，而不是您可以来回导航。
它还会使后退和前进按钮按预期工作，并允许页面在刷新后以正确的状态重新加载

【解决方案4】：

这不是网站通常的构建方式，因此从某种意义上说，您是在逆流而上。当您开始时，这似乎是一条较短的道路，但您可能会发现，由于您最初的决定，您必须做更多的工作。

也就是说，请务必从隐藏所有 div 开始，然后显示选定的。

我还推荐 Cowboy 的 BBQ 插件，它可以帮助您处理返回按钮以及重新加载：http://benalman.com/projects/jquery-bbq-plugin/

【讨论】：