Unfortunately, the HTML5 History API is implemented differently in all the HTML5 browsers (making it inconsistent and buggy) and has no fallback for HTML4 browsers. Fortunately, History.js provides cross-compatibility for the HTML5 browsers (ensuring all the HTML5 browsers work as expected) and optionally provides a hash-fallback for HTML4 browsers (including maintained support for data, titles, pushState and replaceState functionality).
Keep in mind while using HTML5 pushstate if a user copies or bookmarks a deep link and visits it again, then that will be a direct server hit which will 404 so you need to be ready for it and even a pushstate js library won't help you. The easiest solution is to add a rewrite rule to your Nginx or Apache server like so:
history.pushState() doesn't dispatch a popstate event or load a new page by itself. It was only meant to push state into history. This is an "undo" feature for single page applications. You have to manually dispatch a popstate event or use history.go() to navigate to the new state. The idea is that a router can listen to popstate events and do the navigation for you.
Some things to note:
history.pushState() and history.replaceState() don't dispatch popstate events.
history.back(), history.forward(), and the browser's back and forward buttons do dispatch popstate events.
history.go() and history.go(0) do a full page reload and don't dispatch popstate events.
history.go(-1) (back 1 page) and history.go(1) (forward 1 page) do dispatch popstate events.
You can use the history API like this to push a new state AND dispatch a popstate event.
You could try Davis.js, it gives you routing in your JavaScript using pushState when available and without JavaScript it allows your server side code to handle the requests.
Here is a great screen-cast on the topic by Ryan Bates of railscasts. At the end he simply disables the ajax functionality if the history.pushState method is not available:
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();
I've written a very simple router abstraction on top of History.js, called StateRouter.js. It's in very early stages of development, but I am using it as the routing solution in a single-page application I'm writing. Like you, I found History.js very hard to grasp, especially as I'm quite new to JavaScript, until I understood that you really need (or should have) a routing abstraction on top of it, as it solves a low-level problem.
This simple example code should demonstrate how it's used:
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();
Here's a little fiddle I've concocted in order to demonstrate its usage.
发布评论
评论（9）
有关此功能的精彩教程，您只需要 Mozilla 开发者网络页面即可：https:// developer.mozilla.org/en/DOM/Manipulated_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 哈希值 VS 的文章HTML5历史记录API，请参见此处：
https://github.com/browserstate/history.js/wiki/Intelligent -状态处理
For a great tutorial the Mozilla Developer Network page on this functionality is all you'll need: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
Unfortunately, the HTML5 History API is implemented differently in all the HTML5 browsers (making it inconsistent and buggy) and has no fallback for HTML4 browsers. Fortunately, History.js provides cross-compatibility for the HTML5 browsers (ensuring all the HTML5 browsers work as expected) and optionally provides a hash-fallback for HTML4 browsers (including maintained support for data, titles, pushState and replaceState functionality).
You can read more about History.js here:
https://github.com/browserstate/history.js
For an article about Hashbangs VS Hashes VS HTML5 History API, see here:
https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling
我从“深入研究 HTML 5”中受益匪浅。解释和演示更加简单、切题。
历史章节 - http://diveintohtml5.info/history.html
和历史演示 - http://diveintohtml5.info/examples/history/fer.html
I benefited a lot from 'Dive into HTML 5'. The explanation and demo are easier and to the point.
History chapter - http://diveintohtml5.info/history.html
and history demo - http://diveintohtml5.info/examples/history/fer.html
请记住，在使用 HTML5 PushState 时，如果用户复制深层链接或为其添加书签并再次访问它，那么这将是直接服务器命中，将出现 404，因此您需要为此做好准备，甚至 PushState js 库也无济于事你。最简单的解决方案是向您的 Nginx 或 Apache 服务器添加重写规则，如下所示：
Apache（如果您使用的是虚拟主机，则在您的虚拟主机中）：
Nginx
Keep in mind while using HTML5 pushstate if a user copies or bookmarks a deep link and visits it again, then that will be a direct server hit which will 404 so you need to be ready for it and even a pushstate js library won't help you. The easiest solution is to add a rewrite rule to your Nginx or Apache server like so:
Apache (in your vhost if you're using one):
Nginx
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)（后 1 页）和history.go(1)（前 1 页）会调度popstate事件。您可以使用这样的历史 API 来推送新状态并调度 popstate 事件。
<代码>
History.pushState({message:'新状态！'}, '新标题', '/link');
window.dispatchEvent(new PopStateEvent('popstate', {
气泡：假，
可取消：假，
状态：历史.状态
}));
然后使用路由器监听
popstate事件。The HTML5 history spec is quirky.
history.pushState()doesn't dispatch apopstateevent or load a new page by itself. It was only meant to push state into history. This is an "undo" feature for single page applications. You have to manually dispatch apopstateevent or usehistory.go()to navigate to the new state. The idea is that a router can listen topopstateevents and do the navigation for you.Some things to note:
history.pushState()andhistory.replaceState()don't dispatchpopstateevents.history.back(),history.forward(), and the browser's back and forward buttons do dispatchpopstateevents.history.go()andhistory.go(0)do a full page reload and don't dispatchpopstateevents.history.go(-1)(back 1 page) andhistory.go(1)(forward 1 page) do dispatchpopstateevents.You can use the history API like this to push a new state AND dispatch a popstate event.
history.pushState({message:'New State!'}, 'New Title', '/link');
window.dispatchEvent(new PopStateEvent('popstate', {
bubbles: false,
cancelable: false,
state: history.state
}));
Then listen for
popstateevents with a router.你可以尝试Davis.js，它可以让你在JavaScript中使用pushState进行路由（如果可用）并且无需JavaScript它允许您的服务器端代码处理请求。
You could try Davis.js, it gives you routing in your JavaScript using pushState when available and without JavaScript it allows your server side code to handle the requests.
这是由 Railscasts 的 Ryan Bates 制作的有关该主题的精彩截屏视频。最后，如果history.pushState方法不可用，他只是禁用ajax功能：
http: //railscasts.com/episodes/246-ajax-history-state
Here is a great screen-cast on the topic by Ryan Bates of railscasts. At the end he simply disables the ajax functionality if the history.pushState method is not available:
http://railscasts.com/episodes/246-ajax-history-state
我在 History.js 之上编写了一个非常简单的路由器抽象，名为 StateRouter.js。它处于开发的早期阶段，但我将其用作我正在编写的单页应用程序中的路由解决方案。和你一样，我发现 History.js 很难掌握，特别是当我对 JavaScript 很陌生时，直到我明白你确实需要（或应该）在它之上有一个路由抽象，因为它解决了一个低级的问题问题。
这个简单的示例代码应该演示如何使用它：
这是我为了演示而编写的一些 fiddle它的用法。
I've written a very simple router abstraction on top of History.js, called StateRouter.js. It's in very early stages of development, but I am using it as the routing solution in a single-page application I'm writing. Like you, I found History.js very hard to grasp, especially as I'm quite new to JavaScript, until I understood that you really need (or should have) a routing abstraction on top of it, as it solves a low-level problem.
This simple example code should demonstrate how it's used:
Here's a little fiddle I've concocted in order to demonstrate its usage.
您可能想看看这个 jQuery 插件。他们的网站上有很多示例。 http://www.asual.com/jquery/address/
You may want to take a look at this jQuery plugin. They have lots of examples on their site. http://www.asual.com/jquery/address/
如果 jQuery 可用，您可以使用 jQuery BBQ
if jQuery is available, you could use jQuery BBQ