我正在研究使用HTML5历史记录API解决与AJAX加载的内容的深层链接问题，但我正在努力下手。有谁知道任何好的资源吗？
我想使用此方法，因为这似乎是允许发送那些链接可能未打开JS的可能性的好方法。当使用JS的人向不使用JS的人发送链接时，许多解决方案都会失败。
我的初步研究似乎指向JS中的History API和pushState方法。
我正在研究使用HTML5历史记录API解决与AJAX加载的内容的深层链接问题，但我正在努力下手。有谁知道任何好的资源吗？
我想使用此方法，因为这似乎是允许发送那些链接可能未打开JS的可能性的好方法。当使用JS的人向不使用JS的人发送链接时，许多解决方案都会失败。
我的初步研究似乎指向JS中的History API和pushState方法。
Answers:
要获得出色的教程，您仅需要有关此功能的Mozilla开发人员网络页面：https : //developer.mozilla.org/zh/DOM/Manipulating_the_browser_history
不幸的是，HTML5历史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-State-Handling
我从“深入HTML 5”中受益匪浅。讲解和演示更简单明了。历史记录章节-http://diveintohtml5.info/history.html 和历史记录演示-http: //diveintohtml5.info/examples/history/fer.html
使用HTML5 pushstate时请记住，如果用户复制或添加书签并加深访问，然后再次访问它，那将是直接服务器命中，它将显示404，因此您需要为此做好准备，即使pushstate js库也无济于事您。最简单的解决方案是向Nginx或Apache服务器添加重写规则，如下所示：
Apache（如果使用的是vhost，则在您的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;
在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:'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);
这是railscasts的Ryan Bates撰写的有关该主题的精彩屏幕广播。最后，如果history.pushState方法不可用，他仅禁用ajax功能：
您可能想看看这个jQuery插件。他们的网站上有很多示例。http://www.asual.com/jquery/address/
我在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();
为了说明其用法，我精心制作了一些小提琴。
如果有jQuery，则可以使用jQuery BBQ