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:

normal anchor-links
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 myurl.com/imprint 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>

<script>
        $(document).ready(function(){

        (function(window,undefined){

            // 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
                alert("state");
                var State = History.getState(); // Note: We are using History.getState() instead of event.state         

            });

            History.Adapter.bind(window,'anchorchange',function(){

            });

            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('#');   

                History.pushState(null,null,currentUrl);

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

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 myurl.com/#imprint...

devote

For older browsers, you can use this library: https://github.com/devote/HTML5-History-API 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.search + cLocation.hash );
    });

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

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

        loadContent( currentUrl );

        history.pushState( null, null, currentUrl );
    });
});

来源：https://stackoverflow.com/questions/9645920/history-js-the-correct-implementation

标签

javascript

jquery

history.js