如何使用 JS History API pushState 处理刷新页面答案

【问题标题】：How to cope with refreshing page with JS History API pushState如何使用 JS History API pushState 处理刷新页面
【发布时间】：2011-08-21 23:46:33
【问题描述】：

我正在创建的一个小网站（更像是摆弄）使用 AJAX 加载每个页面。以前我在更改 url 的哈希值，效果很好但很丑陋，用户可以刷新页面，它会保持在同一页面上。

现在我已经切换到在 JS History API 中使用 pushState，它看起来好多了，并且后退和前进工作，但刷新没有。例如：

转到：http://example.com/page2 转到 404，因为没有真正的页面称为第 2 页。但是如果我单击使用 pushState 方法更改 url 的按钮，它会正常工作。

如何使用新的 History API 允许刷新和永久链接？

（以及搜索引擎如何处理这个问题，鉴于谷歌必须创建一种索引哈希 url 的方式，通过让开发人员切换到 #!，他们是否有可能在未来为历史 API 做类似的事情?)

【问题讨论】：

标签： javascript html history pushstate

【解决方案1】：

这是一个有点老的问题，但它是谷歌搜索结果中的佼佼者之一。为了寻求帮助，这是我的解决方案。

您可以使用 Apache 的 Mod_Rewrite 将 url 重写到一个中心位置。例如： example.com/p2 从 example.com/index.php?page=p2 获取其页面内容您可以保留当前的 History API 和 AJAX 实现以获取内容并将以下内容包含在您的 .htaccess 中

<ifModule mod_rewrite.c>
  RewriteEngine On
  RewriteRule ^([^/\.]+)/?$ index.php?page=$1&full=1 [L]
</ifModule>

在你的 index.php 中：

<?php
  if(isset($_GET['full']) {
    //Generate the full page here
  }else{
    //Generate just the content for AJAX
  }
?>

This Page 是使用 mod_rewrite 重定向整个网站的一个很好的入门。（评论 11 和 13 也有有用的补充）

【讨论】：

【解决方案2】：

您根本不应该使用pushState 推送无效的 URL。它适用于网站在使用和不使用 AJAX 的情况下使用 - 即，在使用 AJAX 创建此输出时，您推送的 URL 会在没有 AJAX 的情况下产生相同的输出。

如果您只想要虚拟 URL（例如在 pushState 之前的时代），请继续使用井号标签。

【讨论】：

【解决方案3】：

我必须将 404 错误重定向到站点主页（加载 AJAX 请求的那个），然后获取 URL 的最后一个组件，并运行使用 AJAX 请求加载页面的 javascript 函数。不是一个很好的解决方案，但它似乎运作良好。

【讨论】：