Javascript 在 IE 中模拟/polyfill history.pushstate()
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6622449/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Emulate/polyfill history.pushstate() in IE
提问by
history.pushstate()is not supported in IE. Is there another way to achieve this in IE?
history.pushstate()IE 不支持。有没有另一种方法可以在 IE 中实现这一点？
回答by cyberx86
Consider using or adapting History.jsfrom GitHub. As per the description:
考虑使用或改编来自 GitHub 的History.js。根据描述：
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.
History.js 优雅地支持所有浏览器中的 HTML5 历史/状态 API（pushState、replaceState、onPopState）。包括对数据、标题、replaceState 的持续支持。支持 jQuery、MooTools 和 Prototype。对于 HTML5 浏览器，这意味着您可以直接修改 URL，而不再需要使用哈希。对于 HTML4 浏览器，它将恢复使用旧的 onhashchange 功能。
IE (upto and including 9), does not support pushstate(). IE 10 supports it.
IE（最多包括 9 个），不支持 pushstate()。IE 10 支持它。
回答by devote
Consider using history API for unsupported browsers or see library on https://github.com/devote/HTML5-History-API
考虑对不受支持的浏览器使用历史 API 或在https://github.com/devote/HTML5-History-API上查看库
This Javascript library provides an emulation of HTML5 History API for older browsers.
这个 Javascript 库为旧浏览器提供了 HTML5 History API 的模拟。
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.htmlor in the History API Specification http://www.w3.org/TR/html5/history.html#the-history-interface.
该库根据 W3C 规范运行，不添加新的或不兼容的方法。该库可以完全按照描述使用，例如，在 Dive Into HTML5 书籍http://diveintohtml5.info/history.html或历史 API 规范http://www.w3.org/TR/html5/history 中。 html#the-history-interface。
Example of using the library in the pure JS context:
在纯 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>
Example of using the library along with JQuery:
将库与 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>
