History.pushState和页面刷新

Question

我开始关注HTML5新历史API

但是，我有一个问题。 如何处理页面刷新？

例如，用户单击由js函数处理的链接，该链接由js函数处理

异步加载页面内容

使用history.pushState（）更改URL

用户刷新页面，但服务器上不存在URL

你怎么处理这样的情况？ 使用哈希解决方案那里没有问题

谢谢

Answer 1

这确实需要服务器端支持。 .pushState的理想用途是允许服务器智能地处理来自JavaScript应用程序的URL。

这可以通过重新提供相同的JavaScript应用程序，让它检查window.location ，或者像在普通Web应用程序中那样在服务器上呈现该URL的内容。 细节显然取决于你正在做什么。

Answer 2

您需要执行服务器端重定向以复制和粘贴虚假URL这取决于您正在使用的服务器端技术。 没有JavaScript方法，但在404页面中编写一个疯狂的函数，根据传入的URL重定向用户，这不是一个好的解决方案。

Answer 3

用户刷新页面，但服务器上不存在URL

你这是什么意思？ 我有一种感觉，你的假设是错误的。 实际上是的，重点是开发人员应该提供（服务器端或客户端）url到页面状态通信的实现。

如果再一次，我的问题是正确的。

Answer 4

如果您在服务器上使用ASP.NET MVC，则可以将以下内容添加到RegisterRoutes函数中：

       routes.MapRoute(
            name: "Default",
            url: "{*url}",
            defaults: new { controller = "Home", action = "Index" }
       );

这会将所有请求发送到HomeController的Index操作，您的UI将处理实际路由。

Answer 5

对于寻找仅限JS解决方案的人，请在window使用popstate事件。 请参阅MDN - popstate以获取完整的详细信息，但实质上此事件将传递给pushState或replaceState的状态对象。 您可以像event.state一样访问此对象并使用它的数据来确定要执行的操作，即显示页面的AJAX部分。

我不确定这是否在2011年不可用，但现在所有现代浏览器（IE10 +）都可以使用。