javascript - 让后退按钮在单页网站中工作并实现 "speaking"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>

…但是当然它只是将任何 anchor 更改为/#1，然后是/#2 等等，以使后退按钮起作用。但由于我不是程序员，我不知道如何更改它……:(

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

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

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

那么我该如何更改上面的代码(在 1 下)，这样它就不会将所有 anchor 更改为 #1、#2 等，而是引用/使用我在 2 下实现的 url，例如

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

和(可能是一个非常愚蠢的问题，但却是一个非常重要的问题) - 考虑到我只 在我的网站上使用新的 url 链接 - 这是否有任何危险仍然可能以任何方式导致重复内容？

关于这个，我是否应该(出于这个原因或任何其他原因)使用 rel canonical link=index.php 将我的单页 index.php 引用到自身？

提前致谢!

Answer 1

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

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

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