我试图让 ajax 与后退按钮一起工作，但缺少一些核心内容。之前的页面状态存储在哪里？
CASE 1:
点击“让我变红”。 ajax事件发生并且页面变成红色。哈希=#red
点击“让我变黄”。 ajax事件发生并且页面变成黄色。哈希=#yellow
单击后退按钮。哈希现在回到#red。但我也希望页面是红色的。它仍然是黄色的。
CASE 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>
与其使用 JavaScript 来驱动 URL，不如让 URL 驱动 JavaScript。让window.onhashchange事件处理程序完成所有工作。其他一切都应该只改变哈希值。
您甚至不需要链接的点击处理程序，只需将 url 设置为正确的哈希即可：
<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事件只会让事情变得简单。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
