获取后退按钮以单页的网站工作，并实现与QUOT;讲＆QUOT;网址 [英] 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

ID喜欢这个网址

  

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

同时还具有后退按钮正常工作。

关于1）我用下面的code香港专业教育学院发现它的伟大工程：

 ＆LT;！ - 获取后退按钮正常工作 - ＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
变种倍= 0;
功能doclick（）{
    次++;
}
功能doclick（）{
    次++;
    的location.hash =倍;
}
window.onhashchange =功能（）{
    如果（location.hash.length大于0）{
        次= parseInt函数（location.hash.replace（'＃'，''），10）;
    } 其他 {
        次= 0;
    }
}
＆LT; / SCRIPT＆GT;
 

...但当然只是改变任何锚/＃1，然后/ 2等等RO让后退按钮的工作。但由于我不是一个程序员，我不知道怎么改...：（

对于2）我可以添加在htaccess的内容：

 ＆GT; RewriteEngine叙述上
＆GT;重写规则^（[^ /] +）/ $ /index.php?page=$1
 

和这个改变/index.php?p=products到/产品。

让我怎么更改上面的code（下1），所以它并没有改变一切锚＃1，＃2等，但不是引用/使用我下2中的网址，如

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

和（可能是一个非常愚蠢的问题，而是一个非常重要的一种） -given我使用的只有的我的位点的新URL链接是否有任何危险，这仍可能导致以任何方式重复的内容？

对此，我应该（因为这个原因或其他）采用相对规范链接=的index.php sefreferential我的单页的index.php到自身？

在此先感谢这么多！

解决方案

如前所述，你将要使用HTML5历史API。请注意，这个API是相对较新，因此浏览器的支持，值得关注。在写这篇文章的时候，全球互联网用户大约为71％，有它（支持见 http://caniuse.com /＃壮举=记录浏览器支持信息）。因此，你要确保你有这样的回退解决方案。你可能会希望使用旧版本的＃！解决方案是流行的HTML 5历史API通过前。

如果你使用历史API来代替，例如， example.com /＃！设置与example.com/settings和用户的书签是更好的URL，然后当他们去参观，他们的浏览器将请求到服务器 /设置（这实际上并不存在于Web服务器的情况下）。因此，你需要确保你的服务器有一定的重定向规则（即RewriteEngine叙述），使得它可以把pretty的网址，并将其重定向到＃！版本（然后，如果用户的浏览器支持的历史的API它可以替换与漂亮的URL）。

下面的wiki页面提供了围绕在单页（Ajax化）的应用程序的URL问题的一个很好的讨论。 http://ajaxpatterns.org/Unique_URLs

如果你不是很喜欢的编程自己，我会建议使用做了很多为你工作的JavaScript库。我做了一些快速的搜索和发现下，虽然有可能会更好的在那里：的https：// github上。 COM / browserstate / history.js

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

id 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 im not a programmer i dont 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 doesnt 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!

解决方案

As mentioned, you will want to use the HTML5 History API. Please note, this API is relatively new and therefore browser support is a concern. At the time of writing, approximately 71% of global Internet users have support for it (see http://caniuse.com/#feat=history for browser support information). Therefore, you will want to ensure you have a fall-back solution for this. You will likely want to use the older #! solution that was popular before the HTML 5 History API was adopted.

If you use the history API to replace, for example, example.com/#!settings with example.com/settings and a user bookmarks that nicer URL, then when they go to visit it, their browser will make a request to the server for /settings (which doesn't actually exist in the web server's context). Therefore, you will need to make sure your web server has some redirection rules (i.e. RewriteEngine) such that it can take the pretty URLs and redirect them to the #! version (and then if the user's browser supports the history API it can replace that with the nice URL).

The following wiki page provides a nice discussion of issues surrounding URLs in single-page ('ajaxified') apps. http://ajaxpatterns.org/Unique_URLs

If you aren't very comfortable programming yourself, I'd recommend using a JavaScript library that does a lot of the work for you. I did some quick searching and discovered the following, though there might be better ones out there: https://github.com/browserstate/history.js

这篇关于获取后退按钮以单页的网站工作，并实现与QUOT;讲＆QUOT;网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！