pushstate改变浏览器URL后刷新页面;它告诉我页面不存在

Question

我已经阅读了关于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>  

Answer 1

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

使用pushstate时，您正在更改浏览器的URL，但浏览器无法验证此URL是否确实存在。那是你的工作。不要将网址推送到实际上不存在的浏览器，也不会单独工作。

关于htaccess“不适合你” - 你需要向我们提供更多相关信息。您可能没有正确设置它。

Answer 2

您遇到的行为是一个很好的演示，即pushState正在运行。当您尝试刷新页面时，您发现服务器上甚至不存在URL - 浏览器正在伪造它。

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

http://html5doctor.com/demos/history/ - ＆gt; /path/to/demo/index.html

http://html5doctor.com/demos/history/fluffy - ＆gt; /路径/到/演示/蓬松

http://html5doctor.com/demos/history/socks - ＆gt; /路径/到/演示/袜子

http://html5doctor.com/demos/history/whiskers - ＆gt; /路径/到/演示/晶须

http://html5doctor.com/demos/history/bob - ＆gt; /路径/到/演示/鲍勃

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

顺便说一句，该教程只是pushState（）的一个介绍，而不是一个可以遵循的例子。正如作者所说

  

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

您可能已经看过的稍微好一点的教程是潜入HTML5 History intro。

但是，你可能会使用js lib为你处理pushState，所以你也可以从它们开始。我最熟悉的两个是：

• pjax
• HTMLDecor

HTMLDecor是我的项目，并不是pushState（）的真正解决方案。当你遵循创建网站的指导原则时，pushState（）支持是免费的（真的）。