Getting Backbutton to work on a single website and implement “talking” URLs

Question

I have a one page website and would like to receive the following:

• back button works as if it were a regular website

• and instead of saying

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 working correctly.

As for 1.), I use the following ive code, which works fine:

<!-- 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 bindings to / # 1, then / # 2, etc. ro makes the dashboard work. But since I am not a programmer, I do not know how to change it ... :(

As for 2.), I can add the following to htaccess:

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

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

So, how can I change the above code (below 1.) so that it does not change all the bindings to # 1, # 2, etc., but instead links / uses URLs that I reached under 2, for example

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

And (maybe a very stupid question, but very important) - I use only new links on my site - is there a danger that this can lead to duplication of content anyway?

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

Thank you very much in advance!

Answer 1

HTML5 provides an api that supports browser history, and you can manage the URL without rebooting.

check this link

http://diveintohtml5.info/history.html

Demo

http://html5demos.com/history

Answer 2

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

If you use the history API to replace, for example, example.com/#!settings with example.com/settings, and the bookmark user who contains a more convenient URL, then when they go to visit him, their browser will request server for /settings (which does not actually exist in the context of the web server). So you need to make sure your web server has some redirect rules (like RewriteEngine) so that it can accept pretty URLs and redirect them to #! (and then, if the user's browser supports the history API, he can replace it with a good URL).

If you are not comfortable programming yourself, I would recommend using the JavaScript library, which does most of the work for you. I did a quick search and found the following, although there might be better ones: https://github.com/browserstate/history.js

Answer 3

Basically, I created a small prototype on jsfiddle that tracks all the URLs available through ajax calls.

Also contains navigation for accessing links back and forth.

How it works:

• I created a global array called history that keeps track of all the URLs available through ajax in the sequence.
• there is also a global index , defined to track the URL that is accessed by navigating links in the history array.
• At the bottom of the jsfiddle is the History section , which shows the sequence in which the links are available by grabbing the link names and placing them in the order in which they were available.

JS Code:

 $(function () { var history = []; var index = 0; $('.links').on('click', function () { $('#history').append($(this).text()); var address = $(this).attr('data-ref'); index += 1; history[index] = address; $('.links').attr('disabled', 'disabled'); loadExternalPage(address); console.log('list:' + history); }); $('#back').on('click', function () { console.log(index); index -= 1; console.log(index); console.log(history[index]); loadExternalPage(history[index]); }); $('#forward').on('click', function () { console.log(index); index += 1; console.log(index); console.log(history[index]); loadExternalPage(history[index]); }); var loadExternalPage = function (address) { console.log(history[index]); $('#result-section').load(address, function () { console.log('data-loaded'); $('.links').removeAttr('disabled'); }); }; }); 

Live Demo @JSFiddle: http://fiddle.jshell.net/dreamweiver/dpwmcu0b/8/

Note. This is just a prototype, so this solution should not be considered as a final solution, but it can be used as a basis for creating an actual solution.