42 javascript internet-explorer
history.pushstate()在IE中不受支持.在IE中有没有其他方法可以实现这一目标？
小智 28
考虑使用或改编GitHub中的History.js.根据描述:
History.js在所有浏览器中优雅地支持HTML5历史/状态API(pushState,replaceState,onPopState).包括对数据,标题,replaceState的持续支持.支持jQuery,MooTools和Prototype.对于HTML5浏览器,这意味着您可以直接修改URL,而无需再使用哈希.对于HTML4浏览器,它将恢复使用旧的onhashchange功能.
IE(upto包括9),不支持pushstate().IE 10支持它.
http://caniuse.com/#search=pushstate
小智 17
考虑对不受支持的浏览器使用历史记录API或在https://github.com/devote/HTML5-History-API上查看库
此Javascript库为旧版浏览器提供HTML5 History API仿真.
该库根据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>
| 归档时间： |
|
| 查看次数： |
41269 次 |
| 最近记录： |