Internet Explorer 11 返回按钮 Javascript 行为

Question

在Chrome、FF和IE8-10中，当我按返回按钮时，我的JavaScript $(document).ready()函数会被调用，但在IE11中，没有任何JavaScript被调用。有人知道如何使IE11像其他所有浏览器一样响应并使我的代码保持一致吗？

<script type="text/javascript">

    alert("Are we called?"); // neither is this called in IE11
        $( document ).ready( function() {
            alert("document ready"); // does not get fired after hitting back on IE11
        });
</script>

IE11的一个令人困扰的问题是，如果您打开开发者工具并开始尝试跟踪或调试问题，则该问题将消失，并且它会像IE10一样在返回后调用.ready()。

通过此标头禁用了此页面上的缓存，但是它在我想要支持的所有其他浏览器（IE8-10、FF和Chrome）中都可以正常工作。

Cache-Control: no-cache

- PressingOnAlways

---

这太烦人了，只是IE糟糕的又一个新理由。 - KingOfHypocrites

我无法在Win7下的IE 11.0.9600.17105上重现此问题。当返回到页面时，ready处理程序被触发。 - A. Wolff

@A. Wolff - 在测试此问题时，请确保关闭开发人员工具控制台！如果它打开了，一切都像其他浏览器一样工作。如果控制台关闭，则缓存问题会大量出现。 - Ryan

我在2022年仍然收到点赞...IE官方MS EOL计划于2022年6月15日停止支持。希望你们都能够放弃支持这个已经过时的浏览器！https://www.theverge.com/2021/5/19/22443997/microsoft-internet-explorer-end-of-support-date - PressingOnAlways

Answer 1

这被称为BF缓存，自FF 1.5以来一直存在。

绑定到pageshow事件，event.persisted将告诉您它是否从缓存中提供。

http://msdn.microsoft.com/library/ie/dn265017(v=vs.85).aspx

https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching

- Robert Daly

---

我不知道为什么罗伯特·戴利的回答被踩了两次。它包含有用的信息，阐明了在按下后退按钮时IE11的行为方式。从msdn-docs（又名第二个链接）中我们可以读到：“为了被缓存，网页必须满足以下条件：[...] F12开发人员工具窗口未打开” - XDS

附录：一个有趣的细节是，如果客户端注册表中将TabProcGrowth设置为0，则根据我的测试，IE11 似乎不再使用相关机制缓存页面。如果这个确实是这样的话，那么这是未记录的行为（据我所知），如果我错了，请随便纠正我。 - XDS

第一个链接没有帮助，由于格式问题我从未注意到那里有第二个链接。它看起来非常有前途...不幸的是，我不再在需要这个功能的项目上工作，所以我现在无法测试它。我建议编辑答案以突出IE11特定的链接。 - PressingOnAlways

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Ryan

Answer 2

好的，在过去的两个小时里，我一直在解决这个问题，以下是我的调查发现。

在后退和前进之间，以下事件从未被调用：

• load/onload
• unload/onUnload
• change/onchange
• 或任何其他看起来可能在后退/前进时被调用的事件

IE11会缓存页面上的所有内容，包括JavaScript状态，因此不会触发通常的事件。通过后退和前进按钮在页面之间切换时，JavaScript代码会在没有被通知中断的情况下恢复。我认为这对开发人员来说有点粗鲁，或者也许有一个可以触发此操作的事件，但我肯定不知道。

无论如何，您可以在这个充满球的页面上看到这种行为。请注意，在IE11中，您导航到google.com，然后按返回，所有的球都在同一个位置上，一切都继续工作。在其他所有浏览器中，页面会重新初始化，球会从天花板上掉落。我可以想象IE11行为会有用和有益的情况，但我希望Microsoft提供文档，说明何时不希望出现这种情况。此外，如果默认值与其他所有浏览器相同并使此功能可选，而不是破坏与所有内容（包括自己的IE9和IE10）的兼容性，那将是很好的。

所以，我意识到如果我启动了一个定时器，它就会从我离开的地方继续。我不喜欢这段代码，因为它是一个忙等待的hack，但它可以满足我的需求。如果有人能想出更好的方案，那将是很棒的，不需要这么忙碌......

<!-- IE11 back/forward hack - https://dev59.com/OmEi5IYBdhLWcg3wb7-O -->
<script type="text/javascript">
    var dumbIEHistory=history.length;
    function busyWaitCheckForHistoryChange() {
        if (history.length != dumbIEHistory) {
            alert("History has changed, back/forward has been pressed, run my function!");
            myFunction();
            dumbIEHistory=history.length;
        }
    }

// using http://www.pinlady.net/PluginDetect/Browsers/ to do browser detection
    $( window ).load(function() {
        if (browser.isIE && browser.verIE >= 11) {
            // let's not bog down all the other browsers because of IE11 stupidity
            window.setInterval("busyWaitCheckForHistoryChange()", 1000);
        } else {
            // in other browsers, this will be called when back/forward is pressed
            myFunction();
        }
    });
</script>

对于我正在进行的工作来说，这个代码可以用来捕获当用户按下后退/前进按钮时的事件，因为历史记录长度会在我们点击后退按钮后增加1。如果用户快速地来回导航，可能会出现函数调用之前有一瞬间的时间差，如果这是一个问题，您可以减少时间间隔。希望这能对其他人有所帮助。

- PressingOnAlways

---

也可以尝试这个，它可能会解决那个问题 https://dev59.com/nGIj5IYBdhLWcg3wkl2U#20422240 - Syed Mohamed

当您在站点A上，然后转到您的站点B，返回站点A并稍后前往您的站点B时，历史记录长度不会更改，因此您的脚本对于这种情况是无用的。IE不执行任何脚本，只是静默加载DOM的最后已知状态。 - Ωmega

好的，我的情况并不是真正关注离开，只是回到之前的页面。感谢您的慷慨奖励，我也希望能得到更好、更令人满意的答案！ - PressingOnAlways

Answer 3

我也遇到了这个问题，如果您阅读IE Doc，则明显不是bug。正如Robert Daly所写，可以查看http://msdn.microsoft.com/library/ie/dn265017(v=vs.85).aspx。您可以在这个文档中找到beforeunload事件防止BF缓存。因此，以下是一段短代码，定义了这个事件，并在控制台上写入，以防止BF缓存：

if (typeof window.onbeforeunload != 'undefined'){
   function doNothing(){
      console.log('Prevent BF Cache');
   }
   window.onbeforeunload = doNothing;
}

- betelgeuz

Answer 4

我对这个问题同样感到非常恼火。为什么IE如此令人沮丧地不同呢？

我发现在HTML文件中设置Cache-Control: no-cache并没有帮助。真正有用的是在响应头中设置它。

在我的情况下，我正在绘制一个Google图表，我需要每次访问页面时重新绘制它（甚至当我手动刷新页面时，IE11也阻止了我的图表重新绘制！）。

我正在使用ASP.NET MVC，在我的操作方法中使用以下代码解决了这个问题。

Response.CacheControl = "no-cache";

希望这能有所帮助。

- Keith Murray

Answer 5

你可以使用 window.onhashchange 监听浏览器的后退/前进按钮行为。

var isInited = false;

function init() {
    if (isInited) {
        return;
    }
    isInited = true;

    ...
}

$(document).ready(init);

window.onhashchange = function() {
    $(document).ready(init);
};

- ucdream

---

onhashchange 只监测 URL 中 # 后面的变化，例如 http://example.com/whatever#hashChange。如果你完全切换了页面，onhashchange 就不会触发。因此，onhashchange 可以检测到从 http://example.com/whatever#hashChange 到 http://example.com/whatever#changed 的变化，但是当回退到 http://example.com 或者跳转到其他页面时，它将不会被触发。 - PressingOnAlways