为什么 JavaScript 只在 IE 中打开开发者工具一次后才能工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7742781/
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
Why does JavaScript only work after opening developer tools in IE once?
提问by James Bruce
IE9 Bug - JavaScript only works after opening developer tools once.
IE9 错误 - JavaScript 仅在打开开发人员工具一次后才有效。
Our site offers free pdf downloads to users, and it has a simple "enter password to download" function. However, it doesn't work at all in Internet Explorer.
我们的网站为用户提供免费的pdf下载，并有简单的“输入密码下载”功能。但是，它在 Internet Explorer 中根本不起作用。
You can see for yourself in this example.
您可以在此示例中亲自查看。
The download pass is "makeuseof". In any other browser, it works fine. In IE, both buttons do nothing.
下载通行证是“makeuseof”。在任何其他浏览器中，它都可以正常工作。在 IE 中，两个按钮什么都不做。
The most curious thing I've found is that if you open and close the developer toolbar with F12, it all suddenly starts to work.
我发现的最奇怪的事情是，如果您使用 F12 打开和关闭开发人员工具栏，它会突然开始工作。
We've tried compatibility mode and such, nothing makes a difference.
我们已经尝试过兼容模式等，没有任何区别。
How do I make this work in Internet Explorer?
如何在 Internet Explorer 中实现此功能？
回答by Spudley
It sounds like you might have some debugging code in your javascript.
听起来您的 javascript 中可能有一些调试代码。
The experience you're describing is typical of code which contain console.log()or any of the other consolefunctionality.
您所描述的体验是包含console.log()或任何其他console功能的代码的典型体验。
The consoleobject is only activated when the Dev Toolbar is opened. Prior to that, calling the console object will result in it being reported as undefined. After the toolbar has been opened, the console will exist (even if the toolbar is subsequently closed), so your console calls will then work.
该console对象仅在打开开发工具栏时激活。在此之前，调用控制台对象将导致它被报告为undefined. 打开工具栏后，控制台将存在（即使工具栏随后关闭），因此您的控制台调用将起作用。
There are a few solutions to this:
有几个解决方案：
The most obvious one is to go through your code removing references to console. You shouldn't be leaving stuff like that in production code anyway.
最明显的一个是通过你的代码删除对console. 无论如何，您不应该在生产代码中留下这样的东西。
If you want to keep the console references, you could wrap them in an if()statement, or some other conditional which checks whether the console object exists before trying to call it.
如果您想保留控制台引用，您可以将它们包装在一个if()语句中，或者在尝试调用它之前检查控制台对象是否存在的其他条件。
回答by Tallmaris
HTML5 Boilerplatehas a nice pre-made code for console problems fixing:
HTML5 Boilerplate有一个很好的预制代码来修复控制台问题：
// Avoid `console` errors in browsers that lack a console.
(function() {
var method;
var noop = function () {};
var methods = [
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
'timeStamp', 'trace', 'warn'
];
var length = methods.length;
var console = (window.console = window.console || {});
while (length--) {
method = methods[length];
// Only stub undefined methods.
if (!console[method]) {
console[method] = noop;
}
}
}());
As @plus- pointed in comments, latest version is available on their GitHub page
回答by user3916095
Here's another possible reason besides the console.logissue (at least in IE11):
除了console.log问题之外，这是另一个可能的原因（至少在 IE11 中）：
When the console is not open, IE does pretty aggressive caching, so make sure that any $.ajaxcalls or XMLHttpRequestcalls have caching set to false.
当控制台未打开时，IE 会执行非常积极的缓存，因此请确保任何$.ajax调用或XMLHttpRequest调用都将缓存设置为 false。
For example:
例如：
$.ajax({cache: false, ...})
When the developer console is open, caching is less aggressive. Seems to be a bug (or maybe a feature?)
当开发者控制台打开时，缓存不那么激进。似乎是一个错误（或者可能是一个功能？）
回答by runeks
This solved my problem after I made a minor change to it. I added the following in my html page in order to fix the IE9 problem:
在我对它进行了小改动后，这解决了我的问题。我在我的 html 页面中添加了以下内容以解决 IE9 问题：
<script type="text/javascript">
// IE9 fix
if(!window.console) {
var console = {
log : function(){},
warn : function(){},
error : function(){},
time : function(){},
timeEnd : function(){}
}
}
</script>
回答by Simon Mourier
Besides the 'console' usage issue mentioned in accepted answer and others,there is at least another reason why sometimes pages in Internet Explorer work only with the developer tools activated.
除了console在接受的答案和其他人中提到的“ ”使用问题之外，至少还有另一个原因，为什么有时 Internet Explorer 中的页面只能在开发人员工具激活的情况下工作。
When Developer Tools is enabled, IE doesn't really uses its HTTP cache (at least by default in IE 11) like it does in normal mode.
启用开发人员工具后，IE 不会像在正常模式下那样真正使用其 HTTP 缓存（至少在 IE 11 中是默认设置）。
It means if your site or page has a caching problem (if it caches more than it should for example - that was my case), you will not see that problem in F12 mode. So if the javascript does some cached AJAX requests, they may not work as expected in normal mode, and work fine in F12 mode.
这意味着如果您的网站或页面存在缓存问题（例如，如果缓存超过应有的缓存 - 这就是我的情况），您将不会在 F12 模式下看到该问题。因此，如果 javascript 执行一些缓存的 AJAX 请求，它们在正常模式下可能无法正常工作，而在 F12 模式下工作正常。
回答by todotresde
I guess this could help, adding this before any tag of javascript:
我想这会有所帮助，在任何 javascript 标签之前添加它：
try{
console
}catch(e){
console={}; console.log = function(){};
}
回答by Oskar S.
If you are using AngularJS version 1.X you could use the $log service instead of using console.log directly.
如果您使用的是 AngularJS 1.X 版，您可以使用 $log 服务而不是直接使用 console.log。
Simple service for logging. Default implementation safely writes the message into the browser's console (if present).
简单的日志服务。默认实现安全地将消息写入浏览器的控制台（如果存在）。
https://docs.angularjs.org/api/ng/service/$log
https://docs.angularjs.org/api/ng/service/$log
So if you have something similar to
所以如果你有类似的东西
angular.module('logExample', [])
.controller('LogController', ['$scope', function($scope) {
console.log('Hello World!');
}]);
you can replace it with
你可以用
angular.module('logExample', [])
.controller('LogController', ['$scope', '$log', function($scope, $log) {
$log.log('Hello World!');
}]);
Angular 2+ does not have any built-in log service.
Angular 2+没有任何内置的日志服务。
回答by Itsik Mauyhas
If you are using angularand ie 9, 10or edgeuse :
如果您正在使用angular和即9, 10或edge使用：
myModule.config(['$httpProvider', function($httpProvider) {
//initialize get if not there
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
// Answer edited to include suggestions from comments
// because previous version of code introduced browser-related errors
//disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
// extra
$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);
To completely disable cache.
要完全禁用cache.
回答by Vilhelm
It happened in IE 11 for me. And I was calling the jquery .load function. So I did it the old fashion way and put something in the url to disable cacheing.
它发生在 IE 11 中。我正在调用 jquery .load 函数。所以我用老式的方式做了，并在 url 中放了一些东西来禁用缓存。
$("#divToReplaceHtml").load('@Url.Action("Action", "Controller")/' + @Model.ID + "?nocache=" + new Date().getTime());
回答by schnatterer
I got yet another alternative for the solutions offered by runeksand todotresdethat also avoids the pitfalls discussed in the comments to Spudley's answer:
我得到了runeks和todotresde提供的解决方案的另一种替代方案，它也避免了Spudley回答的评论中讨论的陷阱：
try {
console.log(message);
} catch (e) {
}
It's a bit scruffy but on the other hand it's concise and covers all the logging methods covered in runeks' answer and it has the huge advantage that you can open the console window of IE at any time and the logs come flowing in.
它有点邋遢，但另一方面它简洁并且涵盖了runeks' answer 中涵盖的所有日志记录方法，并且它具有巨大的优势，您可以随时打开IE的控制台窗口并且日志流入。
