让后退按钮在单页网站中工作并实现“说话"网址 [英] Getting Backbutton to work in single page website and implementing "speaking" URLs

问题描述

我有一个单页网站，希望实现以下目标:

1. 后退按钮就像普通网站一样工作

2. 而不是说

<块引用>

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

我想要这个网址

<块引用>

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

后退按钮仍然正常工作.

关于 1.) 我使用了以下我发现效果很好的代码:

<script type="text/javascript">无功时间 = 0;函数 doclick() {次++；}函数 doclick() {次++；location.hash = 次；}window.onhashchange = function() {如果 (location.hash.length > 0) {times = parseInt(location.hash.replace('#',''),10);} 别的 {次数 = 0;}}

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

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

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

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

那么如何更改上面的代码(在 1 下)，以便它不会将所有锚点更改为 #1、#2 等，而是引用/使用我在 2 下实现的网址，例如

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

而且(可能是一个非常愚蠢的问题，但一个非常重要的问题)-鉴于我只使用我网站上的新网址链接-这是否有任何危险仍然可能以任何方式导致重复的内容?

关于这一点，我应该(出于那个原因或任何其他原因)使用 rel canonical link=index.php 将我的单页 index.php 给自身引用吗?

非常感谢！

解决方案

HTML5 提供了支持浏览器历史记录的 api，无需重新加载即可管理 url.

检查此链接

http://diveintohtml5.info/history.html

演示是

http://html5demos.com/history

I have a single page website and would like to achieve the following:

1. back button working as if it was a normal website

2. and instead of say,

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

I'd like to have this url

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

while still having back button working properly.

Regarding 1.) I use the following code ive found which works great:

<!-- 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>

…but of course it just changes any anchors to /#1, then /#2 and so forth ro get the backbutton to work. But as I'm not a programmer I don't know how to change it… :(

Regarding 2.) i can add in htaccess this:

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

and this changes /index.php?p=products to /products.

So how do I change the above code (under 1.) so it doesn't change all anchors to #1, #2, etc. but instead references / uses the urls I achieved under 2, like

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

And (probably a very dumb question, but a very important one) -given I use only the new url links on my site- is there any danger that this still might result in duplicate content in any way?

Regarding this, should I (for that reason or any other) sefreferential my single page index.php to itself using rel canonical link=index.php?

Thanks so much in advance!

解决方案

HTML5 provides a api that support browser history and you can manage the url without reloading.

check this link

http://diveintohtml5.info/history.html

Demo is

http://html5demos.com/history

这篇关于让后退按钮在单页网站中工作并实现“说话"网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！