Javascript – history.js – the correct implementation


i load my content on my site in a div called #container with JQuery/Ajax. I have to different types of of links:

  1. normal anchor-links
  2. JQuery-Triggers which fire an event when clicked on a specific div.

Now i want to add functionality to support back and forward browser-buttons and bookmark functionality. I came across history.js, but i have a few problems with it and can't find a really easy tutorial how to use it properly.

My links:

<a href='#imprint' class='link_imprint'>Imprint</a>

I read that it is better for SEO to use <a href="imprint/" … but that URL would not be found on my server. So my first question is, how i can ensure that is working and does not result in a 404-page?

Coming to history.js… At the moment i included the following code in my index.php right behind the <body>



            // Prepare
            var History = window.History; // Note: We are using a capital H instead of a lower h
            if ( !History.enabled ) {
                 // History.js is disabled for this browser.
                 // This is because we can optionally choose to support HTML4 browsers or not.
            return false;

            // Bind to StateChange Event
            History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
                var State = History.getState(); // Note: We are using History.getState() instead of event.state         




            var currentState = History.getState();
            var currentUrl = currentState.url;
            var urlParts = currentUrl.split('#');

            $('#container').load('templates/'+ urlParts[1] +'.php');

            $('#footer.credits').on('click','.link_imprint',function() {

                var currentUrl = $(this).attr('href');
                var urlParts = currentUrl.split('#');   


                $('#container').load('templates/'+ urlParts[1] +'.php');

With this code, after clicking the link the URL changes to: myurl/#imprint and imprint.php is loaded in the container.php. But when i now click the back-button the URL changes, but the content is still the one from the imprint. How can i ensure that the container refreshes with the old content? I think i forgot something, but i don't know what i should do. I tried it with statechange/anchorstate but none of both events will be fired when i click the back-button.

Thanks for helping me out.

P.S: I added an alert to the state change-event, but it will never be fired. That can't be correct, right? I can see the anchorchange-event fires, when i click on the link and the url changes to…

Best Solution

For older browsers, you can use this library: it completely emulates the history in older browsers.

$( document ).ready(function() {

    function loadContent( href ) {
        alert( "loading content... from url: " + href );

        // load dynamic content here

    $( window ).bind( 'popstate', function( e ) {

        // the library returns the normal URL from the event object
        var cLocation = history.location || document.location;

        alert( [ cLocation.href, history.state ] );

        loadContent( cLocation.pathname + + cLocation.hash );

    $('#footer.credits').on('click','.link_imprint',function() {

        var currentUrl = $( this ).attr( 'href' );

        loadContent( currentUrl );

        history.pushState( null, null, currentUrl );