使用HTML5 History API的好教程(Pushstate？)

Question

我正在研究使用HTML5 History API解决与AJAX加载内容的深层链接问题,但我正在努力开始.有没有人知道有什么好的资源？

我想使用它,因为它似乎是一种很好的方式,允许发送链接的可能性可能没有JS打开.当有人向JS发送链接给某人时,很多解决方案都会失败.

我最初的研究似乎指向JS中的History API和pushState方法.

http://html5demos.com/history

Answer 1

有关此功能的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

Answer 2

我从'潜入HTML 5'中受益匪浅.解释和演示更容易,更重要.历史章节 - http://diveintohtml5.info/history.html 和历史演示 - http://diveintohtml5.info/examples/history/fer.html

Answer 3

在使用HTML5 pushstate时请记住,如果用户复制或书签深层链接并再次访问它,那么这将是404直接服务器命中,因此您需要为此做好准备,甚至pushstate js库也无济于事您.最简单的解决方案是向您的Nginx或Apache服务器添加重写规则,如下所示:

Apache(如果你使用的话,在你的vhost中):

<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;

Answer 4

在HTML5规范的历史是古怪。

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使用路由器监听事件。