我正在研究使用 HTML5 History API 来解决 AJAX 加载内容的深度链接问题，但我正在努力起步。有人知道什么好的资源吗？
我想使用它，因为它似乎是一种很好的方法，可以让那些被发送链接的人可能没有打开 JS。当有 JS 的人向没有 JS 的人发送链接时，许多解决方案都会失败。
我最初的研究似乎指向 JS 中的 History API 和 pushState 方法。
【问题讨论】：
标签： javascript html pushstate html5-history
您可能想看看这个 jQuery 插件。他们的网站上有很多例子。 http://www.asual.com/jquery/address/
【讨论】：
如果 jQuery 可用，您可以使用 jQuery BBQ
【讨论】：
要想获得精彩的教程，您只需要有关此功能的 Mozilla 开发者网络页面：https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
不幸的是，HTML5 History API 在所有 HTML5 浏览器中的实现方式都不同（导致不一致和错误），并且没有针对 HTML4 浏览器的回退。幸运的是，History.js 为 HTML5 浏览器提供了交叉兼容性（确保所有 HTML5 浏览器按预期工作），并可选择为 HTML4 浏览器提供哈希回退（包括对数据、标题、pushState 和 replaceState 功能的维护支持）。
您可以在此处阅读有关 History.js 的更多信息： https://github.com/browserstate/history.js
有关 Hashbangs VS Hashes VS HTML5 History API 的文章，请参见此处： https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling
【讨论】：
您可以尝试Davis.js，它在可用时使用 pushState 在您的 JavaScript 中为您提供路由，而在没有 JavaScript 的情况下，它允许您的服务器端代码处理请求。
【讨论】：
我从“潜入 HTML 5”中受益匪浅。解释和演示更容易和重点。 历史篇-http://diveintohtml5.info/history.html 和历史演示 - http://diveintohtml5.info/examples/history/fer.html
【讨论】：
这里是 railscasts 的 Ryan Bates 关于该主题的精彩截屏视频。最后，如果 history.pushState 方法不可用，他会简单地禁用 ajax 功能：
【讨论】：
请记住，在使用 HTML5 pushstate 时，如果用户复制或收藏了一个深层链接并再次访问它，那么这将是一个直接的服务器命中，这将是 404，所以你需要为此做好准备，甚至是 pushstate js 库帮不了你。最简单的解决方案是向您的 Nginx 或 Apache 服务器添加重写规则，如下所示：
Apache（如果您使用的是虚拟主机，则在您的虚拟主机中）：
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Nginx
rewrite ^(.+)$ /index.html last;
【讨论】：
我在 History.js 之上编写了一个非常简单的路由器抽象，称为 StateRouter.js。它处于开发的早期阶段，但我将它用作我正在编写的单页应用程序中的路由解决方案。和你一样，我发现 History.js 很难掌握，特别是因为我对 JavaScript 还很陌生，直到我明白你真的需要（或应该有）在它之上的路由抽象，因为它解决了低级问题。
这个简单的示例代码应该演示它是如何使用的：
var router = new staterouter.Router();
// Configure routes
router
.route('/', getHome)
.route('/persons', getPersons)
.route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();
这是我编造的一个小fiddle，以展示它的用法。
【讨论】：
HTML5 history spec 很古怪。
history.pushState() 不会调度popstate 事件或自行加载新页面。它只是为了将国家推向历史。这是单页应用程序的“撤消”功能。您必须手动调度 popstate 事件或使用 history.go() 导航到新状态。这个想法是路由器可以监听popstate 事件并为您进行导航。
注意事项：
history.pushState() 和 history.replaceState() 不要调度 popstate 事件。history.back()、history.forward() 和浏览器的后退和前进按钮会调度 popstate 事件。history.go() 和 history.go(0) 会重新加载整个页面，并且不会调度 popstate 事件。history.go(-1)（后一页）和history.go(1)（前一页）调度popstate事件。您可以使用这样的历史 API 来推送新状态并调度 popstate 事件。
history.pushState({message:'New State!'}, 'New Title', '/link');
window.dispatchEvent(new PopStateEvent('popstate', {
bubbles: false,
cancelable: false,
state: history.state
}));
然后用路由器监听popstate 事件。
【讨论】：
new PopStateEvent(...)似乎在IE11中不起作用？有没有人知道的解决方法？
var pop_state_event = document.createEvent('Event'); pop_state_event.initEvent('popstate', true, true); window.dispatchEvent(pop_state_event);