Menu
In an HTML document, the history. pushState() method adds an entry to the browser's session history stack.
But this function is not intended to reload the browser. All the function does, is to add (push) a new "state" onto the browser history, so that in future, the user will be able to return to this state that the web-page is now in.
The big difference is, that while pushState will create a new entry in the browser's history, replaceState will only replace the current state. As a side effect of this, using the replaceState method will change the URL in the address bar, without creating a new history entry.
Consider using or adapting History.js from GitHub. As per the 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.
IE (upto and including 9), does not support pushstate(). IE 10 supports it.
http://caniuse.com/#search=pushstate
Consider using history API for unsupported browsers or see library on https://github.com/devote/HTML5-History-API
This Javascript library provides an emulation of HTML5 History API for older browsers.
The library operates according to W3C specification, adding no new or incompatible methods. The library can be used exactly as described, for example, in Dive Into HTML5 book http://diveintohtml5.info/history.html or in the History API Specification http://www.w3.org/TR/html5/history.html#the-history-interface.
Example of using the library in the pure JS context:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="history-2.0.4.js"></script>
<script type="text/javascript">
window.onload = function() {
// function for the reference is processed
// when you click on the link
function handlerAnchors() {
// keep the link in the browser history
history.pushState( null, null, this.href );
// here can cause data loading, etc.
// do not give a default action
return false;
}
// looking for all the links
var anchors = document.getElementsByTagName( 'a' );
// hang on the event, all references in this document
for( var i = 0; i < anchors.length; i++ ) {
anchors[ i ].onclick = handlerAnchors;
}
// hang on popstate event triggered
// by pressing back/forward in browser
window.onpopstate = function( e ) {
// we get a normal Location object
/*
* Note, this is the only difference when using this library,
* because the object document.location cannot be overriden, so
* library the returns generated "location" object within an
* object window.history, so get it out of "history.location".
* For browsers supporting "history.pushState" get generated
* object "location" with the usual "document.location".
*/
var returnLocation = history.location || document.location;
// here can cause data loading, etc.
// just post
alert( "We returned to the page with a link: " +
returnLocation.href );
}
}
</script>
</head>
<body>
<a href="/mylink.html">My Link</a>
<a href="/otherlink.html">Other Link</a>
</body>
</html>
Example of using the library along with JQuery:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="history-2.0.4.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
// looking for all the links and hang on the event,
// all references in this document
$("a").click(function() {
// keep the link in the browser history
history.pushState( null, null, this.href );
// here can cause data loading, etc.
// do not give a default action
return false;
});
// hang on popstate event triggered
// by pressing back/forward in browser
$( window ).bind( "popstate", function( e ) {
// we get a normal Location object
/*
* Note, this is the only difference when using this library,
* because the object document.location cannot be overriden, so
* library the returns generated "location" object within an
* object window.history, so get it out of "history.location".
* For browsers supporting "history.pushState" get generated
* object "location" with the usual "document.location".
*/
var returnLocation = history.location || document.location;
// here can cause data loading, etc.
// just post
alert( "We returned to the page with a link: " +
returnLocation.href );
});
});
</script>
</head>
<body>
<a href="/mylink.html">My Link</a>
<a href="/otherlink.html">Other Link</a>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With