HTML5 History API Demo

Question

I\'ve been reading about the HTML5 history API and so far, I haven\'t found a simple working demo that shows the mechanics with code.

Here is a working jsfid

Answer 1

Ok, I made this example for you. Start with HTML code (index.html):

    
        
        
    
    
        

            
home
            
about
            
blog
            
photos
        
        Back
        Forward
        

            Action: 

            Url: 

            Description: 
        
    

And then the javascript file (sof.js):

var menu, url, description, action, data, historyState, act;

function $ (id) {return document.getElementById (id);}

// Updates infos
function update (state) {
    action.innerHTML = act;
    url.innerHTML = state.url;
    description.innerHTML = state.description;
}

// Goes back
function back () {
    act = 'Back';
    history.back ();
}

// Goes forward
function ff () {
    act = 'Forward';
    history.forward ();
}

function load () {
    menu = $ ('menu');
    url = $ ('url');
    description = $ ('description');
    action = $ ('action');

    // State to save
    historyState = {
        home: {
            description: 'Homepage'
        } ,
        about: {
            description: 'Infos about this website'
        } ,
        blog: {
            description: 'My personal blog'
        } ,
        photos: {
            description: 'View my photos'
        }
    };

    // This is fired when history.back or history.forward is called
    window.addEventListener ('popstate', function (event) {
        var hs = history.state;

        if ((hs === null) || (hs === undefined)) hs = event.state;
        if ((hs === null) || (hs === undefined)) hs = window.event.state;

        if (hs !== null) update (hs);
    });

    menu.addEventListener ('click', function (event) {
        var el = event.target;
        // Prevents url reload
        event.preventDefault ();

        // Handles anchors only
        if (el.nodeName === 'A') {
            // Gets url of the page
            historyState[el.innerHTML].url = el.getAttribute ('href');
            // Creates a new history instance and it saves state on it
            history.pushState (historyState[el.innerHTML], null, el.href);
            act = 'Normal navigation';
            update (historyState[el.innerHTML]);
        }
    });

    // Handles first visit navigation
    var index = location.pathname.split ('/');
    index = index[index.length-1];
    if (index !== '') {
        historyState[index].url = location.pathname;
        history.pushState (historyState[index], null, location.pathname);
        act = 'First visit';
        update (historyState[index]);
    }
}

And a .htaccess for direct request:

RewriteEngine On

RewriteRule ^home$ ./index.html
RewriteRule ^about$ ./index.html
RewriteRule ^blog$ ./index.html
RewriteRule ^photos$ ./index.htm

Each time that an anchor is clicked, a new history instance is pushed onto history stack and an object (called state) is saved with it: the local url is changed but the loading is stopped by 'event.preventDefault()' method. Further more, some information (as URL, Description and Action) are updated.

Then, with 'back' and 'forward' buttons, you can travel through the history and use 'history.state' (or event.state or window.event.state, it depends on browsers) to retrieve the current state.

And, in the end, if you type the entire url directly into the address bar, it works as the same with the above .htaccess ;)

I hope this example helps you ;)

Ciao

Wilk

PS: For further details:

1. Manipulating the browser history
2. History object
3. History howto