Internet Explorer 11 后退按钮 Javascript 行为答案

【问题标题】：Internet Explorer 11 Back Button Javascript BehaviorInternet Explorer 11 后退按钮 Javascript 行为
【发布时间】：2014-02-11 23:44:01
【问题描述】：

在 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

【问题讨论】：

这不仅仅是烦人，而且只是 IE 崩溃的另一个新原因。
我无法在 Win7 下的 IE 11.0.9600.17105 上重现此问题。返回页面时，触发就绪处理程序
@A. Wolff - 确保在测试此问题时关闭开发人员工具控制台！如果它是打开的，一切都像其他浏览器一样工作。如果控制台关闭，那么缓存问题比比皆是。

标签： javascript jquery internet-explorer internet-explorer-11

【解决方案1】：

好的，在过去 2 小时解决这个问题后，这是我的发现。

在后退和前进之间永远不会调用以下事件：

IE11 缓存页面上的所有内容，包括 javascript 状态，因此不会触发任何常见事件。当通过后退/前进按钮在页面之间来回切换时，javascript 代码只是恢复状态而不会被通知它被中断。恕我直言，对开发人员有点粗鲁，或者可能为此触发了一个事件，但我当然不知道。

无论如何，您可以在this page full of balls 上看到这种行为。请注意，在 IE11 中，您导航到 google.com，然后按返回，所有的球都在同一个确切的位置，一切都会继续工作。在所有其他浏览器中，页面都会重新初始化，并且球会再次从天花板上掉下来。我可以看到 IE11 行为有用且有益的场景，但我只希望 Microsoft 会在您不希望这样的情况下提供文档。此外，如果默认设置与其他所有浏览器一样，并让此功能成为可选功能，而不是破坏与所有浏览器的所有兼容性，包括它自己的 IE9 和 IE10，那就太好了！

因此，我意识到如果我启动一个计时器，它就会从我离开的地方开始。我不喜欢这段代码，因为它是一个忙等待黑客，但它可以满足我的需求。如果有人能想到一些不会那么忙的更好的事情，那就太好了……

<!-- IE11 back/forward hack - http://stackoverflow.com/questions/21274085/internet-explorer-11-back-button-javascript-behavior -->
<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。如果用户来回导航太快，在调用函数之前可能会有一瞬间，如果这是一个问题，你可以减少间隔。希望这对其他人有帮助。

【讨论】：

也试试这个，它可能会解决这个问题stackoverflow.com/a/20422240/2089963
当你在站点 A 然后你回到你身边 B，然后返回站点 A稍后再转到您的站点 B，历史长度不会改变，因此您的脚本对于这种情况毫无用处。 IE 不执行任何脚本，只是静默加载最后知道的 DOM 状态。
好点，我的场景并不真正关心导航离开，只关心返回。感谢赏金，我也想得到更好更满意的答案！

【解决方案2】：

您可以使用 window.onhashchange 来监控后退/前进按钮的行为。

var isInited = false;

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

    ...
}

$(document).ready(init);

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

【讨论】：

onhashchange 只监控url后面的变化，比如example.com/whatever#hashChange。如果您完全更改页面，则不会触发 onhashchange。所以onhashchange检测到example.com/whatever#hashChange到example.com/whatever#changed，但是当example.com/whatever被回击并转到例如example.com时它不会被触发。

【解决方案3】：

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

我发现在 HTML 文件中设置 Cache-Control: no-cache 没有帮助。有帮助的是在响应标头中实际设置它。

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

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

Response.CacheControl = "no-cache";

希望这会有所帮助。

【讨论】：

【解决方案4】：

它被称为 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 开发人员工具窗口未打开”
附录：一个稍微有趣的花絮是，如果在客户端注册表中将 TabProcGrowth 设置为 0，那么 IE11 出现（根据我的测试）不再缓存带有有问题的机制。如果这确实成立，那么它是无证行为（AFAIK），所以如果我错了，请随时纠正我。
第一个链接没有帮助，我从来没有注意到那里有第二个链接，因为格式化..它看起来很有希望......不幸的是，我不再从事需要此功能的项目所以我无法测试它atm。我建议编辑答案以突出显示 IE11 特定链接。
可能被否决了，因为他没有回答这个问题。为什么 IE 的行为与 Firefox 和其他浏览器不同，您如何修复它以使其始终如一地工作

【解决方案5】：

我也遇到过这个问题，如果你阅读 IE Doc，这显然不是一个错误。正如 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;
}

【讨论】：