Internet Explorer 11后退按钮Javascript行为

In Chrome, FF, and IE8-10, when I press the back button, my javascript $(document).ready() function is called, but in IE11, none of the javascript is invoked. Does anyone know how to make IE11 respond like all the other browsers and bring consistency to my code?

在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>

The annoying issue about IE11 is that if you turn on developer tools and start trying to trace or debug the issue, it goes away and it behaves as IE10 and calls the .ready() after going back.

关于IE11的令人烦恼的问题是,如果你打开开发人员工具并开始尝试跟踪或调试问题,它会消失,它的行为与IE10一样,并在返回后调用.ready()。

I do have cache disabled on this page via this header and again, it works on all other browsers that I am looking to support (IE8-10, FF, and Chrome).

我通过此标题在此页面上禁用了缓存,并且它再次适用于我希望支持的所有其他浏览器(IE8-10,FF和Chrome)。

Cache-Control: no-cache

5 个解决方案

#1

Alright, after pounding away at the problem for the past 2 hours, here's my findings.

好吧,在过去2个小时对这个问题进行冲击之后,这是我的发现。

The following events are never called between back and forward:

从来没有在后退和前进之间调用以下事件:

load/onload
unload/onUnload
change/onchange
or any of the other events that looked like it might be called on back/forward

或任何看起来可能在后退/前进时调用的其他事件

IE11 caches everything on page including the javascript state so none of the usual events are fired. When going back and forth between a page via the back/forward buttons, javascript code just resumes state without being notified that it was interrupted. Sorta rude to developers imho or maybe there is an event that is triggered for this, but I certainly don't know about it.

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

Anyways, you can see this behavior on this page full of balls. Note in IE11, you navigate to google.com and then press back, all the balls are in the same exact location and everything continues to work. In every other browser, the page is reinitialized and the the balls drop fresh from the ceiling again. I can see scenarios where IE11 behavior would be useful and beneficial, but I just wish Microsoft would provide documentation for when you don't want it like that. Also, it would be nice if the defaults would be like every other browser and making this feature optional instead of breaking all compatibility with everything, including its own IE9 and IE10!

无论如何,你可以在这个充满球的页面上看到这种行为。请注意,在IE11中,您导航到google.com然后按回,所有球都在相同的位置,一切都继续工作。在其他所有浏览器中,页面都会重新初始化,并且球再次从天花板上掉下来。我可以看到IE11行为有用且有益的场景,但我只是希望微软能够在你不希望这样的时候提供文档。此外,如果默认设置与其他浏览器一样并且使此功能可选而不是破坏与所有内容的所有兼容性,包括其自己的IE9和IE10,那将是很好的!

So with that, I realized that if I started a timer, it would just pick off from where I left off. I don't like this code as it is a busy-wait hack, but it does what I want. It would be great if someone could think of something better that wouldn't be so busy...

因此,我意识到,如果我开始计时器,它就会从我离开的地方开始。我不喜欢这个代码,因为它是一个忙碌的等待黑客,但它做我想要的。如果有人能想到一些不那么繁忙的更好的东西,那就太好了......

<!-- IE11 back/forward hack - http://*.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>

Works for what I'm doing to catch when the back/forward button is pressed because the history length will be +1 after we hit back. If the user navigates back and forth too quickly, there might be a split second before the function is called, if that is a concern, you can reduce the interval. Hope this helps others.

适用于按下后退/前进按钮时我要抓住的内容,因为在我们回击后历史长度将为+1。如果用户来回过快地导航,则在调用函数之前可能会有一瞬间,如果这是一个问题,您可以减少间隔。希望这有助于其他人。

#2

It's called the BF Cache and it's been around since FF 1.5

它被称为BF Cache,它自FF 1.5以来一直存在

Bind to the pageshow event and event.persisted will tell you if its served from the cache.

绑定到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

#3

I also have encountered this issue, which is clearly not a bug if you read IE Doc. As wrote Robert Daly, take a look to http://msdn.microsoft.com/library/ie/dn265017(v=vs.85).aspx You can find on this doc that beforeunload event prevents BF cache. So here is a short peace of code that defines this event writing on the console to prevent BF cache:

我也遇到过这个问题,如果您阅读IE Doc,这显然不是一个错误。正如罗伯特戴利所写,请看http://msdn.microsoft.com/library/ie/dn265017(v=vs.85).aspx你可以在这个doc上找到beforeunload事件阻止BF缓存。所以这里是一个简短的代码,它定义了在控制台上写入此事件以防止BF缓存:

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

#4

-2

you can use window.onhashchange to monitor behaviors of the back/forward buttons.

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

var isInited = false;

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

    ...
}

$(document).ready(init);

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

#5

-2

I have been equally annoyed with this problem. Why is IE so frustratingly different?

我同样对此问题感到恼火。为什么IE如此令人沮丧?

I found that setting Cache-Control: no-cache in the HTML file wasn't helping. What helped was to actually set that in the response header.

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

In my case I'm drawing a Google chart and I need it to redraw whenever I visit the page (IE11 was even preventing the redraw of my chart when I refreshed the page manually!).

在我的情况下,我正在绘制一个谷歌图表,每当我访问该页面时我都需要重绘(当我手动刷新页面时,IE11甚至阻止重绘我的图表!)。

I'm using ASP.NET MVC and this code in my action method solves the problem.

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

Response.CacheControl = "no-cache";

Hope this helps.

希望这可以帮助。

#1