This website具有奇特效果：點擊導航鏈接時，內容淡出，當新頁面（在不同的URL上）加載時，其內容會消失in。當使用Firefox的「後退」按鈕時，啓動JavaScript代碼不會執行

有趣的是，用戶點擊瀏覽器的「返回」按鈕後，他們會回到前一頁並且內容仍然在中褪色。換句話說，前一頁不會停留在最後看到的淡出狀態。根據this comment，頁面應該停留在最後一次看到的狀態。

我嘗試了很多方法來重現這種效果，但在我的測試中，點擊「返回」按鈕後，上一頁仍然不顯示任何內容（內容保持淡出狀態）。有時它適用於某些瀏覽器，但不適用於其他瀏覽器。有時候它可以工作，但是在重新打開瀏覽器之後就沒有了。

網站如何實現這種效果，甚至可以在用戶使用「返回」按鈕轉到上一頁後生效？

=== EDIT 1 ===

Here are my test pages。

=== EDIT 2 ===

以上測試頁面已經與Firefox在三個不同的電腦進行測試，而Firefox 4版一路20版通過在線跨瀏覽器測試服務。結果是一樣的：不起作用。

來源

2013-04-03 Ian Y.

不確定你的問題，但你可以使用js cookie來跟蹤「狀態」。 – mpm

@mpm，你能簡單說明一下這是怎麼完成的嗎？ –

你需要一個非常簡單的解決方法：勾成window.unload事件和特定條件重新加載內部window.onpageshow頁面！

火狐修復

的jQuery：

$(window).unload(function() { $(window).unbind('unload'); });

的JavaScript：

function UnloadHandler() { window.removeEventListener('unload', UnloadHandler, false); } 
window.addEventListener('unload', UnloadHandler, false);

iOS的Safari瀏覽器修復

jQuery的：

$(window).bind('pageshow', function(event) { 
    if (event.originalEvent.persisted) { 
     window.location.reload() 
    } 
});

的JavaScript：

window.addEventListener('pageshow', function (event) { 
    if (event.persisted) { 
     window.location.reload() 
    } 
}, false);

工作樣本

因爲我沒有獲得更新您的網頁，我已經uploaded one here。

爲什麼Firefox需要window.onunload？MDN window.unload說：

使用在你的頁面此事件處理程序阻止火狐1.5在內存中緩存bfcache頁面。詳細信息請參見Using Firefox 1.5 caching。

有些用戶可能不要禁用Firefox的bfcache [見Page caching despite unload and beforeunload handlers），這也是爲什麼Firefox的修復上面是解除綁定onunload事件內onunload事件的。

爲什麼Safari需要window.onpageshow？顯然有沒有辦法禁用Safari的「bfcache」，我們必須刷新頁面時，它顯示。

PS。 bfcache表示後退/前進緩存。

全HTML/JavaScript的參考：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Page</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
</head> 
<body> 

    <div> 
     <a href="fadingpage.html?p=1">Page 1</a> 
     <a href="fadingpage.html?p=2">Page 2</a> 
    </div> 

    <div id="content"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet imperdiet diam, in sodales velit porta eget. Ut tellus urna, vestibulum vel facilisis eu, blandit sed est. Sed tortor justo, interdum vel iaculis eu, semper ut libero. Morbi porttitor sem eget dolor eleifend fermentum. Mauris lacinia dictum lacus ut pharetra. Proin lacus felis, vestibulum sit amet malesuada id, pretium at lorem. Duis elementum sapien vitae nibh consequat tincidunt. Proin gravida rhoncus metus sed feugiat. Sed ultricies tellus et augue adipiscing dictum. In vitae tellus eget sapien fringilla tincidunt. Vestibulum gravida, velit quis mattis elementum, lacus felis vestibulum neque, et commodo quam orci quis odio. Nunc varius viverra metus, eu dictum massa venenatis vel. Cras suscipit, orci a gravida pretium, erat massa facilisis turpis, quis sodales sem metus vitae ligula. Nunc interdum augue vel arcu vulputate quis aliquet nulla vehicula. Suspendisse eros odio, ultrices hendrerit euismod nec, condimentum sed metus.</p> 
     <p>Donec at dolor et arcu aliquam tincidunt. Nulla eu elit sit amet leo facilisis posuere. Etiam non elit ac elit ornare elementum a vitae felis. Aenean semper nunc urna. Ut et interdum mi. Duis mollis est eu leo gravida vitae adipiscing leo commodo. Ut scelerisque cursus nulla, nec bibendum elit molestie sed. Nulla facilisi. Proin neque arcu, aliquam sed sagittis non, ultrices in enim. Fusce vitae nunc neque, ut sodales magna. Proin aliquam lobortis augue sed aliquet. Maecenas sit amet pellentesque mauris. Donec luctus purus hendrerit nisl pharetra eleifend. Mauris a lectus mi. In elit dui, porta a venenatis vel, consectetur id magna. Quisque vehicula leo vel nulla convallis quis sollicitudin sem fringilla.</p> 
     <p>Morbi nec mi odio, eget porttitor nisi. Duis luctus blandit lacus. Donec quis sagittis mi. Maecenas id nisl enim. Aliquam erat volutpat. Nulla facilisi. Donec ac velit diam, interdum rutrum mauris. Nullam at odio eget felis tempus elementum. Nam a augue nibh, sed bibendum massa. Vivamus eget sollicitudin mauris. Pellentesque dapibus quam nec ligula blandit scelerisque. In vulputate mauris vel dolor interdum vitae aliquet nisl convallis. In massa mi, consectetur id malesuada at, suscipit vitae libero. Sed a ligula erat.</p> 
    </div> 

    <script type="text/javascript"> 
     $(function() { 
      $('body').hide().fadeIn(800); 
      $('a').click(function() { 
       var href = $(this).attr('href'); 
       $('body').fadeOut(800, function() { 
        window.location = href; 
       }); 
       return false; 
      }); 
     }); 
     // Firefox fix 
     $(window).unload(function() { $(window).unbind('unload'); }); 
     // iOS Safari fix 
     $(window).bind('pageshow', function(event) { 
      if (event.originalEvent.persisted) { 
       window.location.reload() 
      } 
     }); 
    </script> 
</body> 
</html>

來源

2013-04-06 11:49:31 Jesse

謝謝！有用。 –

不，它不會像緩存被完全禁用一樣。 Firefox'** bfcache **只是一個*內存*緩存，Firefox在其歷史記錄中向前/向後轉發時使用* *更快*。基本上，bfcache將頁面的副本存儲在內存中的最後一個狀態中;通過使用'onunload'事件，它不會**使用bfcache，但是該頁面仍然被緩存**在緩存存儲庫中。 – Jesse

@IanY。我更新了我的答案，解釋瞭如何*重新啓用* bfcache。雖然，因爲我沒有辦法（或知道如何）測試bfcache，所以我只是拿Mozilla的話來說。 – Jesse

也許這並不完全是你問的，但他們以這種方式實現效果：頁面內容開始隱藏。即使您點擊返回按鈕，也是如此，因爲隱藏的內容是在標記中的樣式或類中聲明的。然後是JavaScript代碼，淡入就緒事件之後的內容：

$('#content').fadeIn(800);

來源

2013-04-03 15:37:42 Draykos

是的，它使用該方法淡入內容。但是，這怎麼能夠影響上一頁？點擊「返回」按鈕不會使上一頁執行任何JavaScript代碼。 –

單擊後退時，將再次執行上一頁的代碼。「後退按鈕」只能從服務器重新加載html，但它會再次執行JavaScript代碼。所以： - >點擊後退 - >從緩存中重新加載html：它開始「隱藏」 - > exec fadeIn（） – Draykos

我已經設置了測試頁面。你能檢查他們嗎？ –

任何人在運行問題與Rails這 - 您的問題未bfcache - 這是turbolinks寶石。 Here是如何刪除它。

來源

2014-09-27 14:12:57

謝謝你 –

當使用Firefox的「後退」按鈕時，啓動JavaScript代碼不會執行

回答

火狐修復

iOS的Safari瀏覽器修復

工作樣本

相關問題