javascript - replacestate - Emular/polyfill history.pushstate() en IE
window history replacestate({} (2)
history.pushstate() no es compatible con IE. ¿Hay alguna otra forma de lograr esto en IE?
Considere usar la API de historial para navegadores no compatibles o vea la biblioteca en https://github.com/devote/HTML5-History-API
Esta biblioteca de Javascript proporciona una emulación de la API de historial de HTML5 para navegadores antiguos.
La biblioteca funciona de acuerdo con la especificación W3C, y no agrega métodos nuevos o incompatibles. La biblioteca se puede usar exactamente como se describe, por ejemplo, en el libro de inmersión en HTML5 http://diveintohtml5.info/history.html o en la especificación de API de historial http://www.w3.org/TR/html5/history.html#the-history-interface .
Ejemplo de uso de la biblioteca en el contexto JS puro:
<!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>
Ejemplo de uso de la biblioteca junto con 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>
Considere usar o adaptar History.js desde GitHub. Según la descripción:
History.js es compatible con las API de Historia / Estado HTML5 (pushState, replaceState, onPopState) en todos los navegadores. Incluyendo soporte continuo para datos, títulos, replaceState. Admite jQuery, MooTools y Prototype. Para navegadores HTML5, esto significa que puede modificar la URL directamente, sin la necesidad de usar hashes más. Para los navegadores HTML4, volverá a utilizar la antigua funcionalidad onhashchange.
IE (hasta e incluyendo 9), no es compatible con pushstate (). IE 10 lo admite.