Как управлять историей браузеров для динамически загруженного приложения JavaScript ⇐ Jquery

[Anonymous]

Я создал веб -сайт, на котором есть две боковой панели (левша и правая).
Обе боковые панели загружают содержимое через ajax .load () function (leftside.html и правая сторона.html).
Левая боковая плата содержит меню. Я хочу, чтобы, когда кто -то нажимает на ссылку меню, она открывается в «#mainside» div, не обновляя страницу с помощью хэш -функции и сохранить историю, чтобы кнопка Browser's Back и 'history.back' будет работать идеально. здесь мой фактический код.

Код: Выделить всё

[list]
[*][url=#a.html]AAA[/url]
[*]BBB[/list]
[list]
[*][url=#c.html]CCC[/url][/list]


< /code>
### Mainside: (где 'a.html' или 'b.html' должен загрузить их данные) < /p>

< /code>
В настоящее время я использую этот код JavaScript для загрузки содержания и размещения хэша в полосу URL (но не может сохранить историю): < /p>
### javascript: < /p>
var Anand = {
Config:{
animSpeed: 300,
screenDuration: 2500,
},
sideInit: function() {
$("body").on("click","#ls li >a", function(e){
e.preventDefault();
$("body").scrollTop(0);
var me = this;
Aanad.Util.showLoading(function() {
$.ajax({
url: $(me).attr("href").replace("#", ""),
success: function(r) {
$("#mainside").html(r);
setTimeout(function() {
Anand.Util.doneLoading();
}, 600);
}
});
});
});
$("body").on("click","#ls .submenu li >a", function(e){
e.preventDefault();
$("body").scrollTop(0);
var me = this;
Anand.Util.showLoading(function() {
$.ajax({
url: $(me).attr("href").replace("#", ""),
success: function(r) {
r = r + "

";
$("#mainside").html(r);
Anand.Util.doneLoading();
}
});
});
});
$(window).bind("hashchange", Anand.processHash);
},
processHash: function() {
hash = window.location.hash;
if (hash)
$(hash).click();
if (hash == "#home")
$("#home-button").click();
},
windowLoaded: function() {
if (window.location.hash && $(window.location.hash).length) {
Anand.processHash();
setTimeout(function() {
$("#preloader").fadeOut()
}, Anand.Config.screenDuration);
} else {
$(".sidebars li >a:first").click();
setTimeout(function() {
$("#preloader").fadeOut()
}, Anand.Config.screenDuration);
window.location.hash = "home";
}
},
Util: {
showLoading: function(callback) {
$(".loading-progress").hide();
$("#mainside *").unbind("click");
$("#mainside").fadeOut(Anand.Config.animSpeed);
setTimeout(function() {
callback();
}, 501);
},
doneLoading: function(callback) {
$(".loading-progress").hide();
$("#mainside").fadeIn(Anand.Config.animSpeed, function() {
$(this).scrollTop(0);
callback();
});
},
activateMenu: function(el) {
$(document).ready(function() {
$(".sidebars li >a").removeClass("active");
$(el).addClass("active");
$("#ls-" + $(el).attr("id")).addClass("active");
Anand.Util.silentHashChange($(el).attr("id") != undefined ? $(el).attr("id") : "")
$("body, html").scrollTop(0);
});
},
silentHashChange: function(hash) {
$(window).unbind("hashchange");
window.location.hash = hash;
setTimeout(function() {
$(window).bind("hashchange", Anand.processHash);
}, 100);
}
}
};
$(document).ready(Anand.sideInit);

С помощью этого кода ссылки могут загружать цели в '#mainside' , а функция хэш также работает нормально. Но когда я использую кнопку «Назад», она просто меняет текущий хэш на предыдущий, не изменяя содержание страницы на предыдущее.>

Подробнее здесь: https://stackoverflow.com/questions/177 ... pplication