History.pushState API in HTML5

In this blog you will learn about History.pushState API in HTML5.

History.pushState API in HTML5 

 

HTML5 includes 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. Add this URL as a history entry.

 

We will use jQuery to implement this.

$(document).ready(function()
{
  $("a").on('click',function(evt)
    {
    history.pushState({}, '', $(this).attr("href"));
    evt.preventDefault();
    return false;
    });
});

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 a new content.

function loadPage(url)
{
   $("#divMain").load(href); //divMain is the div containing changeable information.
   document.title = html.match(/
<title>(.*?)<\/title>/)[1].trim(); //Set title from html
}

Now, we need to listen for the back button being clicked.

$(window).on("popstate", function() {
   loadPage(location.href);
});

Final code is as follows:

$(document).ready(function() {
    $("a").on('click', function(evt) {
        var href = $(this).attr("href");
        history.pushState({}, '', href);
        evt.preventDefault();
        loadPage(href);
        return false;
    });
    $(window).on("popstate", function() {
        loadPage(location.href);
    });
});

Source: Infonexus.in.