瀏覽器「返回」按鈕與jQuery-動畫頁面

我有一個具有挑戰性的問題，我一直在奮戰一段時間。瀏覽器「返回」按鈕與jQuery-動畫頁面

問題：當我使用瀏覽器的後退按鈕返回上一頁時，在所有動畫播放完畢後，頁面將以最終狀態顯示。我希望它以初始狀態顯示並重播動畫。

我的網站使用了一些基本的jQuery動畫。每個頁面的初始狀態的主要內容都隱藏在瀏覽器窗口的下邊緣之下，當窗口加載時，主要內容將動畫顯示在瀏覽器中。當訪問者點擊任何菜單鏈接時，主要內容會再次滾動並消失在瀏覽器窗口的上邊緣之上 - 然後加載新頁面。

//Animate the content up from below the browser window 

$('#maincontent').animate({top: "15%"}, 2000);

和

//Animate the content up to hide above the browser window 

$('#menu a').click(function(event) { 
    event.preventDefault(); 
    var href = this.href; 
    $('#maincontent').animate({ 
     top: '-300%' 
    }, 500, 
    function() { 
     window.location = href; 
    }); 
});

的問題：如何使在它的初始狀態頁面顯示的瀏覽器的後退按鈕被點擊時，整個事情與這些代碼兩位實現？

我瀏覽了一段時間的StackOverflow。人們問了很多這個問題，但似乎沒有人到達真正有效的解決方案。建議包括阻止頁面被緩存 - （不起作用，即使它工作，也不會很有成效，因爲有些頁面確實需要緩存） - 重新加載頁面（導致一些特殊的行爲，最終導致無法訪問）或者使用cookie（沒有給出任何具體的代碼示例）或使用php（沒有給出任何具體的代碼示例）。我在本網站上詢問了幾個關於此問題的問題，並收到了一些建議，但其中沒有一個適用於我的情況。所以在經歷了幾個不眠之夜之後，我想問問是否有人能夠真正幫助這個。

如果有人在成功之前處理過這個問題，我將不勝感激，如果您能分享您的專業知識並提出可行的解決方案！

新編輯：我想我可能已經找到了解決方案，，但我希望有人對jQuery/JavaScript語法的幫助。我想嘗試修改代碼以向其添加一個更多操作，但我不確定如何編寫它，以便頁面在位置更改爲新頁面之前重新加載因此，而不是第二個上面顯示的片段，我想寫這樣的事情：

//Animate the content up to hide above the browser window 

$('#menu a').click(function(event) { 
    event.preventDefault(); 
    var href = this.href; 
    $('#maincontent').animate({ 
     top: '-300%' 
    }, 500, 
    function() { 
    // a code that reloads the same page, something like 
    //window.location = window.location; followed by 
     window.location = href; 
    }); 
});

- 但我只是不知道如何正確書寫它。

或者，也許有可能將頁面的css值重置爲來自css文件的默認值，並再次觸發JavaScript？

請問有人能建議正確的代碼嗎？

來源

2011-06-02 Dimitri Vorontzov

怎麼樣的window.onload？ – mihsathe 2011-06-02 14:36:01

是的，它呢？ – 2011-06-02 14:36:20

免責聲明：以下是不完全是一個強大的解決方案，但我發現很有趣，我想我應該分享。

我在過去有類似的要求，奇怪的是，我最終解決的解決方案是降級到jQuery以利用a bug in jQuery 1.3。

我只測試了在Firefox的一個版本，所以因人而異，但請嘗試以下操作：

Using jQuery 1.3 - 此重複播放動畫當你點擊鏈接，然後與後退按鈕
Using jQuery 1.4回來 - 這不是

這是足夠的我的用例，因爲我針對的是有限的受衆，只是最小限度地使用jQuery。也就是說，我正在熱切關注這個主題，希望找到一個更好的解決方案。

更新

繼上述的jQuery錯誤的蹤跡，它看起來像你可以通過禁用bfcache獲得同樣的效果。

最簡單的方法是add an onunload attribute to body。（更多詳情請參閱鏈接）。

<body onunload=''>

下面是一個使用jquery 1.6的示例。再次，沒有經過徹底測試，所以 YMMV。

Using jQuery 1.6, with bfcache disabled

來源

2011-06-02 17:24:18

這很棒，絕對非常有用。事實上，到目前爲止，這是我在StackOverflow上找到的唯一實際工作的解決方案！是的，這是一種膠帶解決方案，但誰在乎？非常感謝你做的這些！當然，我會非常感興趣的是爲任何版本的jQuery尋找解決方案，但我會始終讓你的迴歸。謝謝Shawn！ – 2011-06-02 17:33:41

非常歡迎。 – 2011-06-02 17:36:20

你釘死了！你是天才肖恩！ – 2011-06-02 18:39:36

看看這個thread。他建議如下所示的黑客攻擊（從那裏複製）：

當用戶點擊後退按鈕時應激發onload事件。未通過JavaScript創建的元素將保留其值。我建議保留INPUT TYPE =「hidden」或TEXTAREA中用於動態創建元素的數據的備份，使其顯示：none，然後使用文本框的值onload重新構建動態元素。

如果你不關心重建的頁面，並希望實際加載它，那麼你可以做：代碼：

<input type="hidden" id="refreshed" value="no"> 
<script type="text/javascript"> 
onload=function(){ 
var e=document.getElementById("refreshed"); 
if(e.value=="no")e.value="yes"; 
else{e.value="no";location.reload();} 
} 
</script>

可以使隱藏的價值爲「是」的#menu點擊。

HTH

來源

2011-06-02 16:50:16 Raja

是的，我以前試過，它沒有工作。也許你可以向我解釋如何讓它工作拉賈。這段代碼應該放在頁面上？我認爲它不在標題中，對嗎？我嘗試將它放在body標籤的頂部和底部，並在關閉html標籤之前，它不起作用。是否應該以某種方式糾正？此外，你可以告訴我的代碼，在菜單點擊更改隱藏的值爲「是」？ – 2011-06-02 17:02:07

以上答案觸及問題，但提供哈克的方式來解決這個問題。這似乎是正確的做法。

$(window).bind('pageshow',function(){ 
    alert("This page will run even if the back button was pressed!"); 
});

想了解更多關於pageshow/pagehide事件在這裏看到： http://www.webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/

你可以可以把它一步是這樣的：

$(window).bind('pageshow',function(e){ 
     if (e.persisted) { 
      alert("pageshow event handler called. The page was just restored from the Page Cache."); 
     } else { 
      alert("pageshow event handler called for the initial load. This is the same as the load event."); 
     } 
}

來源

2011-06-15 22:18:49

瀏覽器「返回」按鈕與jQuery-動畫頁面

回答

相關問題