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

Question

我正在创建的一个小网站(更像是摆弄)使用AJAX加载每个页面.以前我正在更改网址的哈希,这很好但很难看,用户可以刷新页面,它会保留在同一页面上.

现在我已经切换到在JS History API中使用pushState,它看起来好多了,后面和前面的工作,但刷新没有.例如:

转到:http://example.com/page2转到404,因为没有真正的页面称为第2页.但是,如果我单击使用pushState方法更改URL的按钮,它将按预期工作.

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

(以及搜索引擎如何对待这一点,因为谷歌不得不创建一种索引哈希网址的方法,通过让开发人员切换到#!,有可能他们将来会为历史api做类似的事情吗？)

Answer 1

您根本不应该使用pushState推送无效的网址.这意味着在网站使用和不使用AJAX的情况下使用 - 也就是说,在使用AJAX创建此输出时,您推送的URL将导致相同的输出而不使用AJAX.

如果您只想要虚拟URL(例如在pre-pushState时代),请继续使用哈希标记.

Answer 2

这是一个有点老问题,但它是google的最佳结果之一.为了有所帮助,这是我的解决方案.

您可以使用Apache的Mod_Rewrite将URL重写到中心位置.例如:example.com/p2从example.com/index.php?page=p2获取其页面内容您可以保留历史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
  }
?>

这个页面是使用mod_rewrite重定向整个网站的一个很好的入门读物.(评论11和13也有有用的补充)