Question

今天早些时候在HTML5历史记录API上看到另一篇文章并在Mozilla阅读教程后，我已经能够实现一个基本的工作演示，使用此API来允许URL“重写”而无需重新加载页面并且不使用哈希。

我的问题是：假设您有一个用户访问某个页面，点击其中一个使用History API编写新URL的链接。然后，用户为该页面添加书签。现在我假设它现在将重写的URL加入书签。因此，当用户在几天内回来并尝试转到书签页面时，它不会返回404吗？那么你怎么能以某种方式实现它的解决方法呢？

这假设我重写的URL指向一个不存在的位置。

Answer 1

我今天刚刚遇到这个问题，并在我的blog上写了一个关于它的条目：当用户复制或书签深层链接并再次访问时使用HTML5 pushstate，那将是一个直接的服务器命中将404.

即使是js pushstate库也无法帮助您，因为这是在页面之前请求的直接服务器调用，任何JS甚至加载。

最简单的解决方案是向您的Nginx或Apache服务器添加重写规则，以在内部重写对同一index.html页面的所有调用。浏览器认为当它实际上是同一页面时，它将被提供一个唯一的页面：

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;

当然，您仍然会添加一些JS逻辑来显示正确的内容。就我而言，我正在使用Backbone路由来轻松处理这个问题。

Answer 2

我知道这已经过时但是你完全滥用了pushstate。假设您有一个页面可以看到艺术家，我们称之为artists.php。如果他们点击一个，他们就可以看到艺术家的生物。所以你有“另一个”页面，artists.php？artist = journey

现在，假设你决定在模态窗口中异步加载bio，所以你添加一个ajax触发器来禁用布局并获取内容（artists.php？artist = journey＆amp; ajax = true）。您可以“推”artist.php？artist =历史之旅，并使其成为如果加载该页面，它会加载您的艺术家页面，并在模态窗口中预加载旅程。

通过这种方式，您可以使用它来为页面的不同状态添加书签 - 当他们点击某个地方时，不仅可以使用漂亮的URL。

Answer 3

这应该由服务器端脚本完成。服务器应该解析URL并创建页面。

HTML5历史记录pushState链接返回

3 个答案: