在pushstate改变浏览器url之后刷新页面;它告诉我页面没有;不存在

refreshing a page after pushstate alters the browser url; it tells me page doesn't exist

本文关键字：告诉我 不存在 pushstate 改变 url 之后 刷新 浏览器      更新时间：2023-09-26

我阅读了许多关于popstate和pushstate的教程和示例，并在http://html5doctor.com/demos/history/。教程效果很好，当我自己尝试时，一切都很好。但是，比如说，在你点击了几个链接并决定刷新页面后，我收到了找不到的页面。教程中是否有更多内容，就像其他地方存在的其他文件夹中有更多文件一样？基本上，我所做的是从上面的教程链接中复制确切的源代码，并将其放在我的本地服务器上。正如我所说，使用浏览器的前后按钮以及弹出和推送状态来回遍历一切都很好，但刷新页面会尝试加载一个不存在的页面。我在某个地方读到过关于如果页面不存在，则更改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>

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

当使用pushstate时，您正在更改浏览器的url，但浏览器没有做任何事情来验证这个url是否真的存在。这是你的工作。不要向浏览器推送一个实际上不存在或无法单独工作的url。

关于htaccess"不为你工作"-你需要向我们提供更多信息。很可能你没有正确设置它。

您所经历的行为很好地证明了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/须状

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

现在，当您浏览到http://your.server/path/to/demo/你应该看到它在工作，即使你导航到说"蓬松"，然后刷新页面。（不管怎样，它对我有效）。

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

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

你可能已经看过的一个稍微好一点的教程是深入HTML5历史介绍。

然而，您可能会使用js-lib来处理pushState，所以您不妨从它们开始。我最熟悉的两个是：

  • pjax
  • HTML装饰

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

相关文章：