Ext JS wrapper for history.js which provides a cross browser implementation of the HTML5 History API.
JavaScript
Latest commit 8a11a39 Apr 5, 2013 Jack Slocum Doc updates
Permalink
Failed to load latest commit information.
History-min.js
History.js
README.md
license.txt

README.md

extjs-history

An Ext JS wrapper for history.js which provides a cross browser implementation of the HTML5 History API.

Exposed API

Functions

init()

Initialize the History class. Must be called before use. Can be called more than once.
Example:
xui.History.init();
var state = xui.History.getState();

pushState(data, title, url)

Adds a new History entry

  • data (Object) The data associated with this entry. Accessible as event.data on statechange event object.
  • title (String) The title for this entry
  • url (String) REQUIRED for IE8 to work - The History class will attempt to fix the URL to be compatible with the document URL. For IE8 and HTML5 browsers to play well together, this format works well: '?report=/shipping/overview'

Example:
xui.History.pushState({name: 'Jack', ninja: true}, 'Jack Slocum', '?user=1234');

replaceState(data, title, url)

Replace the current history state

  • data (Object) The data associated with this entry. Accessible as event.data on statechange event object.
  • title (String) The title for this entry
  • url (String) REQUIRED for IE8 to work - The History class will attempt to fix the URL to be compatible with the document URL. For IE8 and HTML5 browsers to play well together, this format works well: '?report=/shipping/overview'

getState()

Return the current History state as an object with the following properties:

  • data (Object) The data associated with this entry.
  • title (String) The title for this entry
  • url (String)

back()

Go back one entry in the History (same as hitting the browser's back button)

forward()

Go forward one entry in the History (same as hitting the browser's forward button)

go(x)

Moves x entries in the History. Use a negative number to move backwards.

  • x (Number) The number of entries to move

Events

statechange

Fired when the state of the page changes. The event object contains the following properties:

  • data (Object) The data associated with this entry.
  • title (String) The title for this entry
  • url (String)

Example: xui.History.on('statechange', function(e){ console.log(e.data); });

Browsers: Tested and Working In

HTML5 Browsers

  • Firefox 4+
  • Chrome 8+
  • Opera 11.5
  • Safari 5.0+
  • Safari iOS 4.3+

HTML4 Browsers

  • IE 6, 7, 8, 9
  • Firefox 3
  • Opera 10, 11.0
  • Safari 4
  • Safari iOS 4.2, 4.1, 4.0, 3.2