Internet Explorer 11 后退按钮 Javascript 行为
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21274085/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Internet Explorer 11 Back Button Javascript Behavior
提问by PressingOnAlways
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
采纳答案by PressingOnAlways
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 行为有用且有益的场景，但我只是希望 Microsoft 能够在您不希望那样的情况下提供文档。此外，如果默认设置与其他所有浏览器一样并且使此功能成为可选功能，而不是破坏与所有内容（包括其自己的 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...
因此，我意识到如果我启动一个计时器，它会从我停止的地方开始。我不喜欢这段代码，因为它是一个忙等待的 hack，但它做我想要的。如果有人能想到更好的东西而不是那么忙，那就太好了......
<!-- 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>
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。如果用户来回导航太快，在调用函数之前可能会有一瞬间，如果这是一个问题，您可以减少间隔。希望这对其他人有帮助。
回答by Robert Daly
It's called the BF Cache and it's been around since FF 1.5
它被称为 BF 缓存，它从 FF 1.5 开始就出现了
Bind to the pageshowevent and event.persistedwill tell you if its served from the cache.
绑定到pageshow事件并event.persisted告诉您它是否从缓存中提供。
http://msdn.microsoft.com/library/ie/dn265017(v=vs.85).aspx
http://msdn.microsoft.com/library/ie/dn265017(v=vs.85).aspx
https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching
https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching
回答by betelgeuz
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).aspxYou can find on this doc that beforeunloadevent 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，这显然不是错误。正如 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;
}
回答by ucdream
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);
};
回答by Keith Murray
I have been equally annoyed with this problem. Why is IE so frustratingly different?
我对这个问题同样感到恼火。为什么 IE 如此令人沮丧地不同？
I found that setting Cache-Control: no-cachein the HTML file wasn't helping. What helped was to actually set that in the response header.
我发现Cache-Control: no-cacheHTML 文件中的设置没有帮助。有帮助的是在响应头中实际设置它。
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.
希望这可以帮助。
