用瀏覽器返回按鈕逆向AJAX調用

我目前正在構建一個新的投資組合網站。目前，我正在使用Isotope爲我的投資組合項目進行佈局，同時使用AJAX加載詳細信息。我正在利用CCS3轉換爲「細節」內容添加一些不錯的效果/轉換。點擊一個投資組合項目會淡出主要投資組合網格，然後將其替換爲工作詳細信息頁面。繼我在網上找到的一些東西，這是我迄今爲止正在工作的東西。用瀏覽器返回按鈕逆向AJAX調用

$(document).ready(function() { 

var hash = window.location.hash.substr(1); 
var href = $('.item-wrapper a').each(function(){ 
    var href = $(this).attr('href'); 
    if(hash==href.substr(0,href.length-5)){ 
     var toLoad = hash+'.html .work-detail'; 
     $('.site-container').load(toLoad) 
    }           
}); 

$('.item-wrapper a').click(function(){ 

    var toLoad = $(this).attr('href')+' .work-detail'; 
    $('.home').addClass('homeFade'); 
    setTimeout(loadContent, 900); 
    $('#load').remove(); 
    $('.site-container').append('<span id="load">LOADING...</span>'); 
    $('#load').fadeIn('fast'); 
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5); 
    function loadContent() { 
     $('.site-container').load(toLoad,'',showNewContent()) 
    } 
    function showNewContent() { 
     $('.work-detail').fadeIn('normal',hideLoader()); 
    } 
    function hideLoader() { 
     $('#load').fadeOut('fast'); 


    } 
    setTimeout(workFadeUp, 1300); 
    function workFadeUp() { 
     $('.work-detail').addClass('work-detail-show'); 


    } 
    return false; 

});

我本來有一些問題，如$('.work-detail').addClass('work-detail-show');我試圖將其添加爲一個回調函數來showNewContent()但它似乎充當如果.work-detail是尚未公佈，所以大量的試驗/錯誤之後現在我遲遲沒有結束了。

基本上它的表現方式我很喜歡，但現在來說，這一點已經超出了我的頭。我該如何去編程這個用戶按下瀏覽器後退按鈕，這個AJAX調用是以某種方式顛倒過來的......在更新地址欄的同時淡化工作細節並將投資組合網格淡出......

我查看了History.js，但在閱讀README文件時，我在頭燈上有點像鹿。

我絕對不是一個jQuery/AJAX大師，但我願意挖掘...只是覺得我碰到了一塊石頭。

這裏就是我開發網站的鏈接http://bit.ly/U38SFB

此外，考慮去非AJAX路線，如AJAX並沒有真正提高可用性/功能，只是提供了「酷裝」的因素我確實創造了一個假的AJAX版本運行相同的CSS轉換並實際鏈接到頁面。

$(window) 
.load(function() { 

$('.work-detail') 
    .addClass('work-detail-show'); 
}); 

$("a.fakeajax") 
.click(function() { 
$('.home') 
    .addClass('homeFade'); 
var href = $(this) 
    .attr('href'); 
// Delay setting the location for one second 
setTimeout(function() { 
    window.location = href 
}, 700); 

return false; 
});

但仍然有同樣的問題，當按下瀏覽器後退按鈕，添加的類淡出組合網格仍然存在。

來源

2013-01-31 awvickers

所有你能做的是一樣的東西：

window.onbeforeunload = function() { 
    return "You are leaving the page" 
}

你可以把一些其他的代碼，讓我們說，將請求發送給服務器，以節省一些數據......可是，到了最後，所有的這確實是通過確認彈出窗口來惹惱客戶端。

您無法控制瀏覽器按鈕。他們會拋出已存網址的歷史並加載它們。此外，您不允許修改window.history entrys。

來源

2013-01-31 18:36:48 Damium

用瀏覽器返回按鈕逆向AJAX調用

回答

相關問題