Implementing History.js HTML4 Fallback

Question

The jQuery plugin HISTORY.js (https://github.com/browserstate/History.js/) provides a HTML5 history push implementation feature and in case of an unsupporting browser, should be able to implement a HTML4 hashtag feature. The documentation/README file details the usage as so:

   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;
    }

As you can see, the documentation explains the usage of the HISTORY.js plugin to the point of HTML5 and does not explain the usage of the HTML4 support.

However, under the "Download & Installation" section of the documentation, it reads:

5. Include History.js 
<script src="http://www.yourwebsite.com/history.js/scripts/compressed/history.js">/script>
<script src="http://www.yourwebsite.com/history.js/scripts/compressed/history.html4.js"></script>

The instructions here may convey that the HTML4 hashtag support is automatic but the instructions on the usage page suggest that it must be manually implemented; which I believe is actually the case.

I cannot find any further documentation on implementing the HTML4 hashtag feature. Please help me figure this out.

Answer 1

Ok maybe the problem was that you weren't using History.js in the right way ( that's the problem i was having too ). Basically to use History.js in the correct way you must do something like:

// Register navigation click handlers where you will load Ajax content
$( window ).on( 'click', 'a.ai1ec-load-view', handle_click_on_link_to_load_view );
// Bind to the statechange event
$( window ).bind( 'statechange', handle_state_change );

// When the state changes, load the corresponding view
var handle_state_change = function( e ) {
    var state = History.getState();
    load_view( state.url, 'json' );
};

// When clicking on a link you want to load, trigger statechange by changing state
var handle_click_on_link_to_load_view = function( e ) {
    e.preventDefault();
    History.pushState( { target :this }, null, $( this ).attr( 'href' ) );
};

Before doing this i wasn't listening to statechange and i was simply using pushState() in the link click handler.

If you do it like this there is no need to code a fallback, it will work also in html4 browsers ( and bookmarks from html4 browsers will work as expected )