ajax を使用して Web アプリを作成していますが、最後にアクセスした URL を取得する際に問題に直面しているため、誰かがブラウザーの戻るボタンを押したときにコンテンツをリロードできます。
http://example.comにいて、 http://example.com/#hello-worldに移動し、http://example.com/#using-custom-functionに移動したとします。
先に進むときはうまく機能しますが、ユーザーがブラウザーの戻るボタンをクリックすると、ページはコンテンツをロードせず、URL が変更されます。
ハッシュの変更を試みましたが、前方および後方要求のためにページをリロードするため、それも役に立ちません。
これに対する解決策があるかどうか疑問に思っています。
これが私のajax関数です。
function get_gallery_artworks(arguments,data,media,type,page,callback_function, gal_ids){
/*Masking*/
//Get the screen height and width
var maskHeight = jQuery('window').height();
var maskWidth = jQuery('window').width();
var loaderWidth = maskWidth/2;
var overlay_id = 'overlay-div';
//Set heigth and width to mask to fill up the whole screen
jQuery('.loader-image').css({
'left':loaderWidth,
'top':maskHeight
});
jQuery('.overlay').css({
'opacity':0,
'height':jQuery(document).height(),
'width':jQuery(window).width()
});
//transition effect
jQuery('.overlay').fadeIn(1000);
jQuery('.overlay').fadeTo("slow",0.8);
var loader_height = ((jQuery(document).height())/4);
var loader_width = ((jQuery(window).width())/2);
jQuery('#'+overlay_id).css('left', loader_width);
jQuery('#'+overlay_id).css('top', loader_height);
jQuery('#'+overlay_id).css('display', 'block');//alert('#'+id);
jQuery('#'+overlay_id).css('padding', '0px 0px 15px 15px');
//transition effect
jQuery(overlay_id).fadeIn(2000);
var data_str = arguments;
window.location.hash = 'gallery='+data_str;
var data_arr = data_str.split("_");
collection_id = data_arr['0'];
artist_id = data_arr['1'];
artwork_id = data_arr['2'];
jQuery.ajax({
type : 'POST',
url : ajax_url,
data : {
collection_id:collection_id,
artwork_id:artwork_id,
artist_id:artist_id,
media:media,
type:type,
callback:callback_function,
navigation:jQuery('.gs-top-navigation').html(),
gspage:page,
data : '',//data_obj
gal_ids : gal_ids
},
success: function(result) {
jQuery('.overlay').hide();
jQuery('.window').hide();
jQuery('.gs-content').html(result);
window.document.body.scrollTop = 0;
window.document.documentElement.scrollTop = 0;
},
error: function(jqXHR, textStatus, errorThrown)
{
alert(textStatus);
alert(errorThrown);
jQuery('.overlay').hide();
jQuery('.window').hide();
}
});
}