Chrome在瀏覽器后退按鈕上再次執行所有JS

Question

我正在開發一個Web應用程序。 我寫了一些JS腳本，以便在文檔就緒時執行。 但是在Chrome中，當我們點擊后退按鈕並返回上一頁時，它會再次執行所有js腳本。 但是當我在firefox上使用它時，它不會執行JS。

我在一個頁面上有一個手風琴，當用戶打開任何手風琴並進入手風琴下的其中一個鏈接時，如果再次點擊手風琴頁面上的后退按鈕，chrome將關閉所有手風琴，因為我已經編寫了腳本關閉所有這些都准備好了。 但是firefox沒有關閉。

有沒有辦法用javascript解決這個問題？ 所以我可以放任何條件，如if(history.forward.length < 1){ do this....}

Answer 1

您可以使用pageshow事件來保證始終檢測到特定頁面的導航，無論用戶是按下后退/前進按鈕還是選擇鏈接，無論使用哪個瀏覽器。

然后，您可以執行有關UI狀態的檢查並根據需要執行邏輯（即修改UI，防止執行其他JS）。

window.addEventListener('pageshow', function(event) { // check state of UI, etc. });

Answer 2

我想到的解決方案是使用sessionStorage來了解它是否是第一次加載。 或者甚至更好，您可以將手風琴的狀態保存在會話存儲中，這樣它始終是用戶想要的方式。

Answer 3

在我的例子中，iframe是一個隱藏的iframe（寬度和高度為零）。

這個iframe只是12年前開發的遺留系統的解決方法。 但現在仍在使用當前的應用程序。

為了解決這個問題，我只是將加載到iframe的頁面重定向到空白頁面。

例：

page_loaded_into_iframe.php

<?php
//do the php stuffs
?>
<script>
alert("hello world");
location.href = "about:blank"; // here, where the the magic happens!
</script>

按下“后退按鈕”后，瀏覽器將重新加載空白頁面。

請注意，如果您的案例與我的案例不相似，則可能不適用。

Answer 4

在Chrome擴展程序中，您可以使用以下功能：

chrome.webNavigation.onCommitted.addListener(function callback)

在回調函數中，您可以查看參數：

transitionType + transitionQualifiers

尋找：

“forward_back”用戶使用“前進”或“后退”按鈕啟動導航。

對於deatils，請參閱chrome.webNavigation

當然，可以使用通常的消息模型將此事件傳遞給內容腳本（請參閱： 消息傳遞