Internet Explorer 11后退按钮Javascript行为 [英] Internet Explorer 11 Back Button Javascript Behavior

查看:178
本文介绍了Internet Explorer 11后退按钮Javascript行为的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在Chrome,FF和IE8-10中,当我按下后退按钮时,我的javascript $(document).ready()函数被调用,但在IE11中,没有调用任何javascript。有谁知道如何使IE11像所有其他浏览器一样响应并为我的代码带来一致性?

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?

<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()。

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.

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

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).

Cache-Control: no-cache


推荐答案

好吧,经过冲击过去2小时的问题,这是我的调查结果。

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

以下事件从未在前后调用:

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

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

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!

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

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://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。如果用户来回过快地导航,则在调用函数之前可能会有一瞬间,如果这是一个问题,您可以减少间隔。希望这有助于其他人。

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.

这篇关于Internet Explorer 11后退按钮Javascript行为的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆