我正在考虑使用 HTML5 History API 来解决 AJAX 加载内容的深层链接问题，但我正在努力起步。有谁知道有什么好的资源吗？
我想使用它，因为它似乎是一种很好的方式，可以让那些被发送链接的人可能没有打开 JS。当有 JS 的人向没有 JS 的人发送链接时，许多解决方案都会失败。
我最初的研究似乎指向 JS 中的 History API 和 pushState 方法。
使用 HTML5 History API 的好教程（Pushstate？）
IT技术
javascript
html
pushstate
html5-history
2021-02-06 04:41:29
6个回答
有关此功能的 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
我从“深入 HTML 5”中受益匪浅。解释和演示更简单明了。历史章节 - http://diveintohtml5.info/history.html 和历史演示 - http://diveintohtml5.info/examples/history/fer.html
请记住，在使用 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;
在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)(back 1 page) 和history.go(1)(forward 1 page) 执行调度popstate事件。
您可以像这样使用历史 API 来推送新状态并分派 popstate 事件。
history.pushState({message:'New State!'}, 'New Title', '/link');
window.dispatchEvent(new PopStateEvent('popstate', {
bubbles: false,
cancelable: false,
state: history.state
}));
然后popstate用路由器监听事件。
您可以尝试Davis.js，它在可用时使用 pushState 为您提供 JavaScript 中的路由，如果没有 JavaScript，它允许您的服务器端代码处理请求。