|
пре 4 година | |
---|---|---|
.. | ||
demo | пре 4 година | |
scripts | пре 4 година | |
tests | пре 4 година | |
tests.src | пре 4 година | |
vendor | пре 4 година | |
.gitignore | пре 4 година | |
History.md | пре 4 година | |
README.md | пре 4 година | |
buildr.coffee | пре 4 година | |
license.txt | пре 4 година | |
package.json | пре 4 година |
This project is the successor of jQuery History, it aims to:
data
, title
, pushState
and replaceState
) with the option to remove HTML4 support if it is not right for your application(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
var State = History.getState(); // Note: We are using History.getState() instead of event.state
History.log(State.data, State.title, State.url);
});
// 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"
})(window);
To ajaxify your entire website with the HTML5 History API, History.js and jQuery this snippet of code is all you need. It's that easy.
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
replaceState
to 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 jQuery v1.3+
<script src="http://www.yourwebsite.com/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>
<script src="http://www.yourwebsite.com/history.js/scripts/bundled/html4+html5/mootools.history.js"></script>
For Right.js v2.2+
<script src="http://www.yourwebsite.com/history.js/scripts/bundled/html4+html5/right.history.js"></script>
<script src="http://www.yourwebsite.com/history.js/scripts/bundled/html4+html5/zepto.history.js"></script>
For everything else
<script 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/
. 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. Then 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 url
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 === true
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
eventurlencoded
document.title
History.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-2012 Benjamin Arthur Lupton