history.pushstate() не поддерживается в IE. Есть ли другой способ добиться этого в IE?
Эмулировать/polyfill history.pushstate() в IE
Ответ 1
Рассмотрите возможность использования или адаптации History.js от GitHub. Согласно описанию:
History.js изящно поддерживает HTML5 История /State API (pushState, replaceState, onPopState) во всех браузеры. Включая постоянную поддержку для данных, заголовков, replaceState. Поддерживает jQuery, MooTools и Опытный образец. Для браузеров HTML5 это означает, что вы можете изменить URL-адрес напрямую, без использования хешей. Для браузеров HTML4 это вернется к использованию старого onhashchange.
IE (до и включая 9), не поддерживает pushstate(). IE 10 поддерживает его.
Ответ 2
Рассмотрите возможность использования API истории для неподдерживаемых браузеров или обратитесь к библиотеке https://github.com/devote/HTML5-History-API
Эта библиотека Javascript обеспечивает эмуляцию API истории HTML5 для старых браузеров.
Библиотека работает в соответствии со спецификацией W3C, не добавляя новых или несовместимых методов. Библиотека может использоваться точно так же, как описано, например, в книге Dive Into HTML5 http://diveintohtml5.info/history.html или в Спецификации API истории http://www.w3.org/TR/html5/history.html#the-history-interface.
Пример использования библиотеки в чистом контексте JS:
<!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>
Пример использования библиотеки вместе с 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>