HTML5历史记录pushState链接返回

Question

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

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

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

Answer 1

我今天刚遇到这个问题，并在我的博客上写了一个有关此问题的条目：当使用HTML5 pushstate时，如果用户复制或添加了深链接并再次访问它，则将直接命中404。

即使是js pushstate库也无法在这里为您提供帮助，因为这是在页面和所有JS加载之前就请求的直接服务器调用。

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

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; 

当然，您仍然可以添加一些JS逻辑来显示正确的内容。 就我而言，我正在使用容易处理的骨干网路由。

Answer 2

我知道这很旧，但是您完全滥用了pushstate。 假设您有一个页面可以看到艺术家，可以将其命名为artist.php。 如果他们单击一个，就可以看到艺术家的简历。 因此，您有了“另一个”页面，artist.php？artist = journey

现在，假设您决定要在模式窗口中异步加载生物，因此您添加了一个ajax触发器来禁用布局并仅获取内容（artists.php？artist = journey＆ajax = true）。 您可以“将” artist.php？artist = journey“推送”到历史记录，并进行设置，以使如果该页面被加载，它会在模式窗口中加载您的艺术家页面，并预载旅程。

这样，您就可以使用它来为页面的不同状态添加书签-不仅仅是单击它们的URL精美。

Answer 3

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