使用 HTML5 History API 处理哈希

Question

我在这里使用 history.js 插件：https://github.com/browserstate/history.js/ 用于在我的应用程序中处理 HTML5 历史记录。我想处理 both HTML5 和 HTML4 版本（使用哈希回退）。

您可以在此处查看演示：http://dev.driz.co.uk/history45/

---

问题 1

当一个人访问带有哈希值的 url（没有点击网站上的链接）时，我如何根据哈希值加载正确的内容，因为服务器不理解代码是什么，而我不知道不想通过检查哈希是否存在然后通过 AJAX 调用内容来使请求加倍。例如：http://dev.driz.co.uk/history45/#about.php 不会加载 about.php 内容。

更新：

我在这里看到了一些示例：https://gist.github.com/balupton/858093 这似乎涵盖了加载正确的内容（甚至是优化版本）。但我正在努力让它与我的 HTML5 版本结合使用。查看源代码：http://dev.driz.co.uk/history45/ 并且它仅在用户单击链接时运行，而不是在页面加载时运行，这是原始问题。

更新 2：

在这里尝试了一个示例：http://dev.driz.co.uk/history4/#/contact.php 使用源代码中的 sn-p 获取要加载到 contact.php 内容中的内容，但不起作用...？但根据此处的文章：https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling#wiki-why-the-hashbang-is-unnecessary 此代码应该是 AJAX 加载正确的内容，如果它有一个哈希值。任何想法为什么？

---

问题 2

如何在根目录上强制使用/#/ 并在所有网址前加上`#/'

目前，如果您尝试通过 HTML4 浏览器中的链接访问页面，您最终会得到奇怪的 url，例如：

http://dev.driz.co.uk/history45/#contact.php 和 http://dev.driz.co.uk/history45/#./

代替：

http://dev.driz.co.uk/history45/#/contact.php 和 http://dev.driz.co.uk/history45/#/

---

如果我从内页开始：

http://dev.driz.co.uk/history45/contact.php 并选择一个链接，然后我最终得到：http://dev.driz.co.uk/history45/contact.php#about.php，它应该是：http://dev.driz.co.uk/history45/#/about.php

Answer 1

当一个人访问带有哈希值的网址时（未点击网站上的链接），我如何根据哈希值加载正确的内容，因为服务器无法理解代码是什么

服务器不会看到# 或之后的任何内容

我不想通过检查哈希是否存在然后通过 AJAX 调用内容来使请求加倍。

如果历史 API 可用，您唯一的其他选择是重定向（通过使用 JavaScript 设置 location）到您将使用的 URL。

如何在根目录上强制 /#/？

如果历史 API 不受支持，您必须重定向到主页（再次通过设置 location）。

---

我认为，如果他们使用的浏览器不支持历史 API（这可能意味着这些天的 Windows XP 和 IE 8），那么他们可以获得非 Ajax 回退，而我永远不必处理哈希黑客。

Answer 2

如果您只想强制所有浏览器（包括 HTML4/5）使用哈希，您可以在 init 中更改 History.js 选项

History.options.html4Mode = true 

但是，您可能还想考虑使用 jQuery 中的 $.address 功能，它可以在您想要的任何新 URL 中附加一个哈希值。

同样在 $.address 方法中，如果用户第一次访问该站点，您还可以根据用户的初始 URL 确定将用户重定向到哪里： 说，让用户使用 say 访问 URL http://www.site.com/#/about.php

然后你可以有一个函数来监听基于 URL 变化的任何变化

$.address.change(fn)

参考号：http://www.asual.com/jquery/address/docs/

更新

我发现可能适用于此的一件事是，如果您有一个单击事件处理程序，其行为方式是推送一个新状态，即使您当前位于同一页面上，History js 也会将相同的 url 附加到末尾带有哈希的现有 URL

例如 如果在关于页面上（并且您的状态是“关于”）并且您单击关于链接 - 您的网址将从 http://www.site.com/about
致
http://www.site.com/about#/about

为了省去麻烦，请在该按钮上添加一个 if 语句，检查您的历史状态是否为“关于”，如果不是，则 pushState“关于”

例如

$('.about.btn').on('click', function(e){
  if(History.getState().data.State != "About") {
    e.preventDefault();
    History.pushState({"State": "About"}, null, "/about"); 
  }
})