HTML5历史pushState链接返回

Question

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

我的问题是： 假设您有一位用户来到一个页面，单击其中一个使用 History API 编写新 URL 的链接。然后用户将该页面添加为书签。现在我假设它现在将为重写的 URL 添加书签。那么，当用户几天后回来并尝试转到添加书签的页面时，它不会返回 404 吗？那么如何才能找到一种方法来解决这个问题呢？

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

Answer 1

我知道这已经很旧了，但你完全滥用了 Pushstate。假设您有一个查看艺术家的页面，我们将其命名为 arts.php。如果他们点击其中一个，他们就可以看到艺术家的简介。所以你有“另一个”页面，artists.php?artist=journey

现在，假设你决定在模式窗口中异步加载生物，所以你添加一个 ajax 触发器来禁用布局并只获取内容 (artists.php ？艺术家=旅程&ajax=true）。您可以“推送”artist.php?artist=journey 到历史记录，并使其在加载该页面时加载您的艺术家页面，并在模态窗口中预加载旅程。

这样您就可以使用它为页面的不同状态添加书签 - 不仅仅是在单击某个位置时拥有漂亮的 URL。

Answer 2

我今天刚刚遇到这个问题，并在我的 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

最后重写 ^(.+)$ /index.html;

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

Answer 3

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