Name: history.js
Owner: Kickstarter
Description: History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. For HTML5 browsers this means that you can modify the URL directly, without needing to use hashes anymore. For HTML4 browsers it will revert back to using the old onhashchange functionality.
Created: 2015-06-11 21:15:35.0
Updated: 2015-06-11 21:15:36.0
Pushed: 2015-06-12 14:09:19.0
Homepage: http://balupton.github.com/history.js/demo/
Size: 3543
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
See the History.md file for a detailed list of features, changes, solved issues and bugs
Please create an issue if something doesn't work or if there is a browser specific bug. I'll try to fix it as soon as possible. Please send me your Pull requests if you have a nice solution! I'm also going to review old issues in balupton's repository and try to solve them too.
data, title, pushState and replaceState) with the option to remove HTML4 support if it is not right for your applicationTo ajaxify your entire website with the HTML5 History API, History.js and jQuery the Ajaxify script is all you need. It's that easy.
If you don't have access to your server, or just want to try out the Ajaxify script first, you can install the History.js It! Google Chrome Extension to try out History.js via Ajaxify on select websites without actually installing History.js/Ajaxify on your server.
If you are using Rails, then the easiest way for you to try History.js would be to use Wiselinks gem. Wiselinks integrates into Rails application and allows you to start using History.js with three lines of code.
ction(window,undefined){
// 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
});
// Change our States
History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3"
History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4"
History.back(); // logs {state:3}, "State 3", "?state=3"
History.back(); // logs {state:1}, "State 1", "?state=1"
History.back(); // logs {}, "Home Page", "?"
History.go(2); // logs {state:3}, "State 3", "?state=3"
indow);
Note: These urls also work in HTML4 browsers and Search Engines. So no need for the hashbang (
#!) fragment-identifier that google “recommends”.
Note 1: These urls also work in HTML5 browsers - we use
replaceStateto transform these HTML4 states into their HTML5 equivalents so the user won't even notice :-)Note 2: These urls will be automatically url-encoded in IE6 to prevent certain browser-specific bugs.
Note 3: Support for HTML4 browsers (this hash fallback) is optional - why supporting HTML4 browsers could be either good or bad based on my app's use cases
title and/or data in our state. Adding a SUID allows us to associate particular states with data and titles while keeping the urls as simple as possible (don't worry it's all tested, working and a lot smarter than I'm making it out to be).title or data then we don't even include a SUID (as there is no need for it) - as seen by State 4 above :-)http://www.mysite.com/#http://www.mysite.com/projects/History.js to become http://www.mysite.com/#/projects/History.js automatically. (again tested, working, and smarter).Download History.js and upload it to your webserver. Download links: tar.gz or zip
Include History.js
For Dojo v1.8+
ipt src="http://www.yourwebsite.com/history.js/scripts/bundled/html4+html5/dojo.history.js"></script>
For ExtJs v1.8+
ipt src="http://www.yourwebsite.com/history.js/scripts/bundled/html4+html5/extjs.history.js"></script>
For jQuery v1.3+
ipt src="http://www.yourwebsite.com/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>
For Mootools v1.3+
ipt src="http://www.yourwebsite.com/history.js/scripts/bundled/html4+html5/mootools.history.js"></script>
For Right.js v2.2+
ipt src="http://www.yourwebsite.com/history.js/scripts/bundled/html4+html5/right.history.js"></script>
For Zepto v0.5+
ipt src="http://www.yourwebsite.com/history.js/scripts/bundled/html4+html5/zepto.history.js"></script>
For everything else
ipt src="http://www.yourwebsite.com/history.js/scripts/bundled/html4+html5/native.history.js"></script>
Note: If you want to only support HTML5 Browsers and not HTML4 Browsers (so no hash fallback support) then just change the
/html4+html5/part in the urls to just/html5/. See Why supporting HTML4 browsers could be either good or bad based on my app's use cases
History.js is maintained by people like you. If you find a bug, report it to the GitHub Issue Tracker. If you've fixed a bug submit a Pull Request and add your fork to the Network Wiki Page.
If you would like paid support and trainings, or have job offers, then refer to the Network Wiki Page. If you are qualified with History.js, then be sure to add your details to that page too.
If your company uses History.js on your projects, and would like to see it grow and prosper (better documentation, bugfixes, upgrades, maintenance, etc.) and would love to become a corporate sponsor then do email sponsor@bevry.me
If you would like free support for History.js, then post your question on Stackoverflow and be sure to use the history.js tag when asking your question.
If you've created a website that uses History.js, or know of one, be sure to add it to the Showcase Wiki Page.
If you'd love to +1 or like this project, then be sure to tweet about it and click the “watch” button up the top of its Project Page.
For anything else, refer to the History.js GitHub Wiki Site.
Thanks! every bit of help really does make a difference!
History.pushState(data,title,url) data can be null or an object, title can be null or a string, url must be a stringHistory.replaceState(data,title,url) data can be null or an object, title can be null or a string, url must be a stringHistory.getState() data, title and urlHistory.getStateByIndex History.getCurrentIndex History.getHash() History.Adapter.bind(element,event,callback) History.Adapter.trigger(element,event) History.Adapter.onDomLoad(callback) History.back() History.forward() History.go(X) History.log(...) History.debug(...) History.log but only runs if History.debug.enable === trueHistory.options.hashChangeInterval History.options.safariPollInterval History.options.doubleCheckInterval History.options.disableSuid History.options.storeInterval History.options.busyDelay History.options.debug History.options.initialTitle History.options.html4Mode History.options.delayInit window.onstatechange window.onanchorchange onhashchange event when the page is loaded with a hashonpopstate event when the hash has changed unlike the other browsersreplaceState call / bug reportonpopstate once the page has loaded / change recommendationtitle argument to the pushState and replaceState callsonhashchange eventurlencodeddocument.titleHistory.back() / History.forward() call?key=a%20b%252c will become ?key=a b c. This is to ensure consistency between browser url encodings.onpopstate to fire (this is expected/standard functionality). To ensure correct compatibility between HTML5 and HTML4 browsers the following events have been created:window.onstatechange: this is the same as the onpopstate event except it does not fire for traditional anchorswindow.onanchorchange: this is the same as the onhashchange event except it does not fire for statesYou can discover the history inside the History.md file
Licensed under the New BSD License
Copyright © 2011+ Benjamin Arthur Lupton b@lupton.cc