Chrome 在浏览器后退按钮上再次执行所有 JS答案

【问题标题】：Chrome executing all JS again on browser back buttonChrome 在浏览器后退按钮上再次执行所有 JS
【发布时间】：2015-09-09 08:02:16
【问题描述】：

我正在开发一个网络应用程序。我编写了一些 JS 脚本，以便在准备好文档时执行。但是在 chrome 中，当我们单击后退按钮并返回上一页时，它会再次执行所有 js 脚本。但是当我在 firefox 上使用它时，它不会执行 JS。

我在页面上有一个手风琴，当用户打开任何手风琴并点击手风琴下的链接之一，然后如果再次单击手风琴页面上的后退按钮，chrome 将关闭所有手风琴，因为我已经写了脚本在文档准备好时关闭所有这些。但火狐不关闭。

有没有办法用 javascript 解决这个问题？这样我就可以设置任何条件，例如if(history.forward.length < 1){ do this....}

【问题讨论】：

【解决方案1】：

您可以使用 pageshow 事件来保证您始终检测到特定页面的导航，无论用户是否按下后退/前进按钮或选择链接，也无论正在使用哪个浏览器。

然后您可以检查 UI 的状态并根据需要执行逻辑（即修改 UI，防止执行其他 JS）。

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

【讨论】：

【解决方案2】：

我想到的解决方案是使用 sessionStorage 来了解它是否是第一次加载。或者更好的是，您可以将手风琴的状态保存在会话存储中，以便始终按照用户想要的方式进行。

【讨论】：

【解决方案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>

一旦按下“返回按钮”，浏览器将重新加载一个空白页面。

请注意，如果您的情况与我的情况不同，这可能不适用。

【讨论】：

【解决方案4】：

在 Chrome 扩展中您可以使用以下功能：

chrome.webNavigation.onCommitted.addListener(函数回调)

在回调函数中，您可以查看参数：

transitionType + transitionQualifiers

寻找：

"forward_back" 用户使用前进或后退按钮启动导航。

当然，这个事件可以用通常的消息模型传达给内容脚本（参考：Message Passing

【讨论】：