12
私はバックボタンを使ってajaxを動作させようとしており、何か中心のものが欠けています。前のページの状態はどこに保存されていますか？Ajaxと戻るボタン。ハッシュは変更されますが、以前のページの状態はどこに保存されていますか？
CASE 1：
クリックして "私は赤にします"。 ajaxイベントが発生し、ページが赤色に変わります。ハッシュ= #red
「make me yellow」をクリックします。 ajaxイベントが発生し、ページが黄色に変わります。ハッシュ=＃イエロー
戻るボタンをクリックします。ハッシュは#redに戻っています。しかし、私はまた、ページを赤くしたい。まだ黄色です。
CASE 2：
クリックして "私は赤にします"。 ajaxイベントが発生し、ページが赤色に変わります。ハッシュ= #red
[他のサイトに移動]をクリックします。それはGoogleに行く。
戻るボタンをクリックします。私たちはsite、hash = #redに戻っていますが、ページも赤くしたいと思っています！ AJAXを使用している場合
<!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>
あなたはhttps://github.com/browserstate/history.js/ – gmaliar
を参照してください。私は「ajaxリクエスト」も表示されず、セミコロンもたくさん忘れています –
セミコロンがなくてはならないように機能しますOK。私は他の場所からコードの大部分を手に入れました。実際のAjaxリクエストをしないのは、これをそのままここで皆のために働かせたいからです。しかし、私はdomを変更します、これはajaxリクエストが行うものです。実際のAjaxリクエストは、魔法のように動作させるものだと思いますか？ – user984003