Tôi đang cố gắng để làm cho ajax làm việc với nút quay lại và thiếu một cái gì đó trung tâm. Trạng thái trang trước đó được lưu trữ ở đâu?Ajax và nút quay lại. Thay đổi băm, nhưng trạng thái trang trước đó được lưu trữ ở đâu?
TRƯỜNG HỢP 1:
Bấm "làm cho tôi đỏ". sự kiện ajax xảy ra và trang chuyển sang màu đỏ. Hash = #red
Nhấp "làm cho tôi màu vàng". sự kiện ajax xảy ra và trang chuyển sang màu vàng. Hash = #yellow
Nhấp vào nút quay lại. Hash bây giờ trở lại #red. Nhưng tôi cũng muốn trang màu đỏ. Nó vẫn còn màu vàng.
TRƯỜNG HỢP 2:
Bấm "làm cho tôi đỏ". sự kiện ajax xảy ra và trang chuyển sang màu đỏ. Hash = #red
Nhấp "Chuyển đến trang web khác". Nó đi vào Google.
Nhấp vào nút quay lại. Chúng tôi quay trở lại trang web, hash = #red, nhưng tôi cũng muốn trang có màu đỏ!
<!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>
Bạn nên xem https://github.com/browserstate/history.js/ – gmaliar
Tôi không thấy bất kỳ yêu cầu 'ajax' nào và bạn cũng quên rất nhiều" dấu chấm phẩy " –
Nó hoạt động nên dấu chấm phẩy bị thiếu phải là được. Tôi nắm lấy hầu hết mã từ nơi khác. Tôi không thực hiện yêu cầu ajax thực sự vì tôi muốn điều này làm việc cho mọi người ở đây chính xác như vậy. Nhưng tôi thay đổi dom, đó là những gì yêu cầu ajax sẽ làm. Bạn có nghĩ rằng một yêu cầu ajax thực sự là những gì kỳ diệu sẽ làm cho nó hoạt động? – user984003