使用HTML5历史API的好教程（Pushstate？）
我正在研究如何使用HTML5 History API来解决AJAX加载内容的深层链接问题，但是我正在努力实现。 有没有人知道有什么好的资源？
我想用这个，因为它似乎是一个很好的方式来允许那些被发送的链接可能没有JS打开的可能性。 当有人用JS发送一个链接给某人时，许多解决scheme失败。
我最初的研究似乎指向JS中的History API和pushState方法。
http://html5demos.com/history
有关这个function的Mozilla开发者networking页面，您将需要一个很好的教程： https ： //developer.mozilla.org/en/DOM/Manipulating_the_browser_history
不幸的是，在所有的HTML5浏览器中，HTML5 History API的实现方式是不一样的（这使得HTML5的历史API变得不一致和错误），并且没有HTML4浏览器的后备function。 幸运的是， History.js为HTML5浏览器提供了交叉兼容性（确保所有的HTML5浏览器按预期工作），并可select为HTML4浏览器提供散列回退（包括对数据，标题，pushState和replaceStatefunction的维护支持）。
你可以在这里阅读关于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
我从“潜入HTML 5”中受益匪浅。 解释和演示更容易，重点。 历史章节 – http://diveintohtml5.info/history.html和历史演示; – http://diveintohtml5.info/examples/history/fer.html
请记住，如果用户复制或书签深层链接并再次访问它，使用HTML5 pushstate，那将是一个直接的服务器命中，这将是404，所以你需要为它做好准备，甚至一个pushstate的js库不会帮助您。 最简单的解决scheme是将重写规则添加到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;
你可以试试Davis.js ，它可以让你在使用pushState的时候使用pushState进行路由，如果没有使用JavaScript，它可以让你的服务器端代码处理请求。
这里是railscasts的Ryan Bates关于这个主题的一个很好的屏幕。 最后，如果history.pushState方法不可用，他只需禁用ajaxfunction：
HTML5的历史规范是古怪的。
history.pushState()不会派发popstate事件或自行加载新页面。 这只是为了推动国家进入历史。 这是单页应用程序的“撤销”function。 您必须手动分派一个popstate事件或使用history.go()导航到新的状态。 这个想法是，路由器可以听popstate事件，并为您做导航。
有些事情要注意：
-
history.pushState()和history.replaceState()不分派popstate事件。 -
history.back()，history.forward()和浏览器的后退和前进button可以分派popstate事件。 -
history.go()和history.go(0)做一个完整的页面重新加载，不要发送popstate事件。 -
history.go(-1)（后1页）和history.go(1)（前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事件。
你可能想看看这个jQuery插件。 他们的网站上有很多例子。 http://www.asual.com/jquery/address/
我在History.js之上写了一个非常简单的路由器抽象，名为StateRouter.js 。 它处于开发的非常早期阶段，但是我正在使用它作为我正在编写的单页应用程序中的路由解决scheme。 和你一样，我发现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();
这里有一个小提琴，我已经炮制，以演示它的用法。
如果jQuery可用，你可以使用jQuery的烧烤
