让Backbutton在单页网站中工作并实现"说话"URL

Question

我有一个单页网站,想要实现以下目标:

1. 后退按钮就好像是一个普通的网站

2. 而不是说,

www.mysite.com/index.php?p=#this-is-a-great-product

我想要这个网址

www.mysite.com/this-is-a-great-product

同时仍然有后退按钮正常工作.

关于1.)我使用下面的代码我发现它很有效:

<!-- Getting BackButton to  work properly -->
<script type="text/javascript">
var times = 0;
function doclick() {
    times++;
}
function doclick() {
    times++;
    location.hash = times;
}
window.onhashchange = function() {     
    if (location.hash.length > 0) {        
        times = parseInt(location.hash.replace('#',''),10);     
    } else {
        times = 0;
    }
}
</script>

...但当然它只是将任何锚点更改为/#1,然后/#2等等,以使后退按钮工作.但由于我不是程序员,我不知道如何改变它...... :(

关于2.)我可以添加htaccess这个:

>RewriteEngine On
>RewriteRule ^([^/.]+)/?$ /index.php?page=$1

这会将/index.php?p=products更改为/ products.

那么我如何更改上面的代码(在1.下),所以它不会改变#1,#2等所有锚点,而是引用/使用我在2下实现的url,如

www.mysite.com/this-is-a-great-product

而且(可能是一个非常愚蠢的问题,但是非常重要的问题) -我只使用我网站上的新网址链接 - 是否存在任何可能导致重复内容的危险？

关于这一点,我应该(因为这个原因或任何其他)sefreferential我的单页index.php自己使用rel canonical link = index.php？

非常感谢提前!

Answer 1

HTML5 提供了支持浏览器历史记录的 api，您可以在不重新加载的情况下管理 url。

检查此链接

http://diveintohtml5.info/history.html

演示是

http://html5demos.com/history

Answer 2

如前所述，您将需要使用 HTML5 History API。请注意，此 API 相对较新，因此浏览器支持是一个问题。截至撰写本文时，全球大约 71% 的互联网用户都支持它（有关浏览器支持信息，请参阅http://caniuse.com/#feat=history）。因此，您需要确保有一个后备解决方案。您可能想使用旧的 #! 在采用 HTML 5 History API 之前很流行的解决方案。

例如，如果您使用历史 API 来替换example.com/#!settingsexample.com/settings 和用户书签，那么当他们访问它时，他们的浏览器将向服务器发出请求/settings（这实际上并不存在于 Web 服务器的上下文中）。因此，您需要确保您的 Web 服务器具有一些重定向规则（即 RewriteEngine），以便它可以获取漂亮的 URL 并将它们重定向到 #! 版本（然后如果用户的浏览器支持历史API，它可以用漂亮的URL 替换它）。

如果您不太擅长自己编程，我建议您使用 JavaScript 库来为您完成大量工作。我做了一些快速搜索并发现了以下内容，尽管可能有更好的： https: //github.com/browserstate/history.js