Post
Ask Question

HTML History.pushState

HTML5 includes the history.pushState API, which allows you to add history entries and change the URL currently displayed in the browser.

Syntax:

history.pushState({id: 'idGivenToEntry'}, 'title of page', 'c-sharp-objective?page=2');

Attributes:

1. ID used to identify history entry.

2. Title of page (Still not implemented in any browser).

3. URL of the page to access (It can be relative or absolute) [Note : URL should be internal].

If the current URL in the browser is http://infonexus.in/c-sharp-objective?page=1, the url will become http://infonexus.in/c-sharp-objective?page=2, similar to as if a link had been followed, and add this URL as a history entry.

We will use JQuery to implement this.
  1. $(document).ready(function() {  
  2.     $("a").on('click', function(evt) {  
  3.         history.pushState({}, '', $(this).attr("href"));  
  4.         evt.preventDefault();  
  5.         return false;  
  6.     });  
  7. });  
It uses history.pushState to add a history entry to the browser with the href attribute of the link.

In most sites, there are header and footer areas, which don't change, and a main area, which changes.

Create a function to load new content
  1. function loadPage(url)  
  2. {  
  3.    $("#divMain").load(href); //divMain is the div containing changeable information.  
  4.    document.title = html.match(/<title>(.*?)<\/title>/)[1].trim(); //Set title from html  
  5. }  
Now, we need to listen for the back button being clicked.
  1. $(window).on("popstate", function() {  
  2.    loadPage(location.href);  
  3. });  
Final Code is as follows:
  1. $(document).ready(function() {  
  2.   
  3.     $("a").on('click', function(evt) {  
  4.         var href = $(this).attr("href");  
  5.         history.pushState({}, '', href);  
  6.         evt.preventDefault();  
  7.         loadPage(href);  
  8.         return false;  
  9.     });  
  10.   
  11.     $(window).on("popstate", function() {  
  12.         loadPage(location.href);  
  13.     });  
  14.   
  15. });  
Source : http://infonexus.in/article-historypushstate-api