问题描述
我试图与后退按钮AJAX的工作，我失去了一些东西的中心。哪里有previous页面状态保存在哪里？
案例1：
点击让我红。 AJAX事件发生和页面会变成红色。哈希= #red
点击让我黄。 AJAX事件发生和页面变成黄色。哈希= #yellow
点击后退按钮。哈希返现#red。但我也希望页面是红色的。它仍然是黄色的。
案例2：
点击让我红。 AJAX事件发生和页面会变成红色。哈希= #red
点击转到其他网站。它道出了谷歌。
点击后退按钮。我们又回到了现场，哈希= #red，但我也希望页面是红色的！
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML＆GT;
＆LT;风格＆GT;
.red {背景：红}
.yellow {背景：黄}
＆LT; /风格＆GT;
＆LT; HEAD＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =// ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
＆LT;脚本类型=文/ JavaScript的＆GT;
$（函数（）{
$（'。ajax_thing）。点击（函数（）{
的location.hash = $（本）.attr（'action_type'）;
返回false
}）
VAR originalTitle = document.title时
功能hashChange（）{
变种页= location.hash.slice（1）
如果（页！=）{
$（'＃内容）。负载（页面+HTML＃子内容）
document.title时= originalTitle +' - '+页
}
}
如果（在窗口onhashchange）{//酷的浏览器
$（窗口）。在（'hashchange'，hashChange）.trigger（'hashchange）
}其他{//跛脚的浏览器
VAR lastHash =''
的setInterval（函数（）{
如果（lastHash！=的location.hash）
hashChange（）
lastHash =的location.hash
}，100）
}
}）
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;菜单＆gt;
＆LT;李＆GT;＆LT;一类=ajax_thingID =red_actionaction_type =红色＆GT;让我红＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT;一类=ajax_thingID =yellow_actionaction_type =黄色＆GT;让我的黄色和LT; / A＆GT;＆LT; /李＆GT;
＆LT; /菜单＆gt;
＆LT;李＆GT;＆LT; A HREF =http://www.google.com＆GT;转到其他网站＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
＆LT;脚本＆GT;
$（＃red_action）。点击（函数（五）{
//此处阿贾克斯。成功：
$（机构）removeClass移除（黄）。
$（机构）addClass（红）。
}）
$（＃yellow_action）。点击（函数（五）{
//此处阿贾克斯。成功：
$（机构）removeClass移除（红）。
$（机构）addClass（黄）。
}）
＆LT; / SCRIPT＆GT;
在使用AJAX它来更新手动使用history.pushState史上的重要
然后创建一个功能测试的onpopstate事件，并根据需要更新内容。
的
I am trying to make ajax work with the back button and am missing something central. Where are the previous page states stored?
CASE 1:
Click "make me red". ajax event occurs and page turns red. Hash = #red
Click "make me yellow". ajax event occurs and page turns yellow. Hash = #yellow
Click back button. Hash is now back to #red. But I also want the page to be red. It's still yellow.
CASE 2:
Click "make me red". ajax event occurs and page turns red. Hash = #red
Click "Go to other site". It goes to Google.
Click back button. We're back to site, hash = #red, but I also want the page to be 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>
When using AJAX it's important to update the history manually using history.pushState
Then create a function testing for an onpopstate event and updating the content as required.
https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Manipulating_the_browser_history
这篇关于Ajax和后退按钮。哈希的变化，但在这里是previous页面的状态存储在哪里？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！