我正在尝试使用后退按钮进行ajax工作,并且缺少一些重要的东西.前一页状态存储在哪里？
情况1:
点击"让我变红".发生ajax事件,页面变为红色.哈希= #red
点击"让我变黄".发生ajax事件,页面变黄.哈希= #yellow
单击后退按钮.哈希现在回到#red.但我也希望页面是红色的.它还是黄色的.
案例2:
点击"让我变红".发生ajax事件,页面变为红色.哈希= #red
点击"转到其他网站".它归谷歌所有.
单击后退按钮.我们回到网站,hash = #red,但我也希望页面是红色的!
<!DOCTYPE html>
<html>
<style>
.red{background:red}
.yellow{background:yellow}
</style>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.ajax_thing').click(function(){
location.hash=$(this).attr('action_type');
return false
})
var originalTitle=document.title
function hashChange(){
var page=location.hash.slice(1)
if (page!=""){
$('#content').load(page+".html #sub-content")
document.title=originalTitle+' – '+page
}
}
if ("onhashchange" in window){ // cool browser
$(window).on('hashchange',hashChange).trigger('hashchange')
}else{ // lame browser
var lastHash=''
setInterval(function(){
if (lastHash!=location.hash)
hashChange()
lastHash=location.hash
},100)
}
})
</script>
</head>
<body>
<menu>
<li><a class="ajax_thing" id = "red_action" action_type="red">Make me red</a></li>
<li><a class="ajax_thing" id = "yellow_action" action_type="yellow">Make me yellow</a></li>
</menu>
<li><a href = "http://www.google.com">Go to other site</a></li>
</body>
</html>
<script>
$("#red_action").click(function(e) {
// ajax here. on success:
$("body").removeClass("yellow");
$("body").addClass("red");
})
$("#yellow_action").click(function(e) {
// ajax here. on success:
$("body").removeClass("red");
$("body").addClass("yellow");
})
</script>
gil*_*ly3 13
不要使用JavaScript来驱动您的网址,而是让您的网址驱动您的JavaScript.让window.onhashchange事件处理程序完成所有工作.其他所有东西都应该改变哈希值.
你甚至不需要链接的点击处理程序,只需将网址设置为正确的哈希:
<a href="#red">Red</a>
然后,你的hashchange处理程序负责其余的事情:
function hashChange() {
var page = location.hash.slice(1);
if (page) {
$('#content').load(page+".html #sub-content");
document.title = originalTitle + ' – ' + page;
switch (page) {
// page specific functionality goes here
case "red":
case "yellow":
$("body").removeClass("red yellow").addClass(page);
break;
}
}
}
完全更改哈希的唯一原因是,如果您希望能够返回到页面并使其根据URL加载相同的状态.那么,你已经要求让URL驱动JavaScript,对吗？另外你为什么要更改哈希？将功能移出点击处理程序,进入hashchange事件只会简化事情.
使用AJAX时,使用history.pushState手动更新历史记录非常重要
然后为onpopstate事件创建函数测试并根据需要更新内容.
https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history
| 归档时间： |
|
| 查看次数： |
28000 次 |
| 最近记录： |