pushstate 改变浏览器 url 后刷新页面；它告诉我页面不存在答案

【问题标题】：refreshing a page after pushstate alters the browser url; it tells me page doesn't existpushstate 改变浏览器 url 后刷新页面；它告诉我页面不存在
【发布时间】：2012-03-30 04:48:49
【问题描述】：

我已经阅读了大量关于 popstate 和 pushstate 的教程和示例，并密切关注http://html5doctor.com/demos/history/ 上的 HTML5 医生示例。该教程效果很好，当我自己尝试时，一切对我来说都很好。但是，比如说，在您单击几个链接并决定刷新页面后，我收到未找到页面。本教程是否还有更多内容，例如其他文件夹中存在更多文件的其他文件夹？基本上我所做的就是从上面的教程链接中复制确切的源代码，然后放到我的本地服务器上。就像我说的，在浏览器的后退和前进按钮以及 pop 和 pushstate 来回遍历时一切正常，但是刷新页面会尝试加载不存在的页面。如果页面不存在，我在某处阅读了有关更改 htaccess 文件以重定向到索引的内容，但它对我不起作用。我还需要更多的东西才能自己工作吗？我使用的所有代码都与教程完全相同，因此所有内容都可以在源代码中找到

http://html5doctor.com/demos/history/

htaccess 如下所示

Options +FollowSymLinks  
<ifModule mod_rewrite.c>  
RewriteEngine On  
RewriteCond %{REQUEST_FILENAME} !-f  
RewriteCond %{REQUEST_FILENAME} !-d  
RewriteCond %{REQUEST_URI} !index  
RewriteRule (.*) index.html [L]  
</ifModule>

【问题讨论】：

标签： javascript apache html

【解决方案1】：

答案很简单。使页面存在，或使用 .htaccess 通过加载不同的 URI 来“假装”它存在。

当使用 pushstate 时，您正在更改浏览器的 url，但浏览器并没有做任何事情来验证这个 url 是否确实存在。那是你的工作。不要将 url 推送到实际不存在的浏览器，或者不会自行工作。

关于 htaccess “不适合您” - 您需要为此提供更多信息。很可能你没有正确设置。

【讨论】：

感谢您的回复。这是我在这里为 htaccess Options +FollowSymLinks # html5 pushstate (history) support: RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_URI} ！ index RewriteRule (.*) index.html [L]
您正在刷新的响应页面不存在的 URL 是什么？
按照我的方式编写 htaccess，单击链接后刷新页面会将您带回 index.html。我理解它是如何工作的，但我希望它只是刷新并保留来自链接点击的当前信息。我只是希望它像教程一样。在教程下的帖子中，作者谈到了一个适用于 index.php 的重写规则。
将重写规则从：RewriteRule (.*) index.html [L] 更改为：RewriteRule (.*) index.html?path=$1 [L] 然后你需要在路径中读取URL 参数并根据该值触发您的 ajax 操作。

【解决方案2】：

您所经历的行为很好地证明了 pushState 正在工作。当您尝试刷新页面时，您会发现服务器上甚至不存在该 URL - 浏览器在伪造它。

如果您确实希望在刷新页面时演示在您的服务器上运行，请删除 .htaccess 文件并将这些文件复制到您的服务器：

http://html5doctor.com/demos/history/ -> /path/to/demo/index.html

http://html5doctor.com/demos/history/fluffy -> /path/to/demo/fluffy

http://html5doctor.com/demos/history/socks -> /path/to/demo/socks

http://html5doctor.com/demos/history/whiskers -> /path/to/demo/whiskers

http://html5doctor.com/demos/history/bob -> /path/to/demo/bob

现在，当您浏览到http://your.server/path/to/demo/ 时，您应该会看到它工作正常，即使您导航到说“蓬松”然后刷新页面。（无论如何，它对我有用）。

顺便说一下，该教程只是对 pushState() 的介绍，而不是要遵循的示例。正如作者所说

代码包含一些简单的样式，并在您单击链接时动态更改内容。实际上，这可以通过 XMLHttpRequest 从您的服务器加载，但为了演示的目的，我将它捆绑到一个独立的文件中。重要的是我们有一个快速而肮脏的动态页面可供使用，所以让乐趣开始吧！

您可能已经看过的更好的教程是 Diving into HTML5 History intro。

但是，您可能会使用一个 js 库来为您处理 pushState，因此您不妨从它们开始。我最熟悉的两个是：

HTMLDecor 是我的项目，并不是 pushState() 的真正解决方案。只是当您遵循其创建站点的指南时，pushState() 支持是免费的（真的）。

【讨论】：