Question

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

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

问题1

当一个人访问带有哈希的网址时（如果没有点击网站上的链接），如何根据哈希加载正确的内容？因为服务器无法理解代码是什么而且我不知道我想通过检查哈希是否存在然后通过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使用源代码中的代码段获取要在contact.php内容中加载的内容但不起作用...？但是根据这里的文章：https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling#wiki-why-the-hashbang-is-unnecessary这个代码应该是AJAX加载正确的内容，如果它有一个哈希。有什么想法吗？

问题2

如何在根上强制/#/并在所有网址前加上“＃/”

目前，如果您尝试通过HTML4浏览器中的链接访问某个网页，最终会出现奇怪的网址：

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调用内容来使请求加倍。

您唯一的选择是重定向（通过JavaScript设置location）到您在历史记录API可用时使用的网址。

如何在root上强制/＃/？

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

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

Answer 2

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

History.options.html4Mode = true

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

同样在$ .address方法中，如果用户第一次访问网站，您还可以根据初始URL确定用户的重定向位置：比如说，让用户访问带有说明的URL http://www.site.com/#/about.php

然后，您可以拥有一个功能，该功能可根据URL更改收听对任何更改的任何更改

$.address.change(fn)

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

<强>更新

我发现可能适用的一件事是，如果你有一个单击事件处理程序，它通过推送一个新状态来表现，即使你当前在同一个页面上，历史记录js会将相同的url追加到最后具有哈希

的现有URL

e.g。如果在关于页面（并且您的州是“约”）并且您单击关于链接 - 您的网址将更改为 http://www.site.com/about
到
http://www.site.com/about#/about

为了省去麻烦，请在该按钮上设置if语句，检查您的历史状态是否为“about”，如果没有，则推送状态为“关于”

e.g。

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

使用HTML5 History API处理哈希

问题1

问题2

2 个答案: