为什么JavaScript只在IE中打开开发人员工具后才能工作？

Question

IE9 Bug - 只有在打开一次开发人员工具后才能使用JavaScript.

我们的网站为用户提供免费的pdf下载,它有一个简单的"输入密码下载"功能.但是,它在Internet Explorer中根本不起作用.

你可以在这个例子中看到自己.

下载通行证是"makeuseof".在任何其他浏览器中,它工作正常.在IE中,两个按钮都不起作用.

我发现最奇怪的事情是,如果用F12打开和关闭开发人员工具栏,它就会突然开始工作.

我们尝试过兼容模式等等,没有什么区别.

如何在Internet Explorer中完成此工作？

Answer 1

听起来你的javascript中可能有一些调试代码.

您描述的体验是典型的包含console.log()或任何其他console功能的代码.

console只有在打开开发工具栏时才会激活该对象.在此之前,调用控制台对象将导致报告为undefined.打开工具栏后,控制台将存在(即使工具栏随后关闭),因此您的控制台调用将起作用.

有一些解决方案:

最明显的一个是通过代码删除引用console.不管怎样,你不应该在生产代码中留下这样的东西.

如果要保留控制台引用,可以将它们包装在if()语句中,或者在尝试调用之前检查控制台对象是否存在的其他条件.

Answer 2

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;
        }
    }
}());

正如@ plus-在评论中指出的那样,最新版本可以在他们的GitHub页面上找到

Answer 3

除了console.log问题之外,这是另一个可能的原因(至少在IE11中):

当控制台未打开时,IE会进行相当激进的缓存,因此请确保所有$.ajax调用或XMLHttpRequest调用都将缓存设置为false.

例如:

$.ajax({cache: false, ...})

当开发人员控制台打开时,缓存不那么激进.似乎是一个错误(或者可能是一个功能？)

Answer 4

在我对它做了一些小改动后,这解决了我的问题.我在我的html页面中添加了以下内容以修复IE9问题:

<script type="text/javascript">
    // IE9 fix
    if(!window.console) {
        var console = {
            log : function(){},
            warn : function(){},
            error : function(){},
            time : function(){},
            timeEnd : function(){}
        }
    }
</script>

Answer 5

除了console在已接受的答案和其他人中提到的"使用问题"之外,至少还有另一个原因,即Internet Explorer中的页面有时仅与激活的开发人员工具一起工作.

启用开发人员工具时,IE并不像在正常模式下那样真正使用其HTTP缓存(至少在IE 11中默认使用).

这意味着如果您的站点或页面存在缓存问题(例如,如果缓存超出应该的范围 - 这是我的情况),您将不会在F12模式下看到该问题.因此,如果javascript执行一些缓存的AJAX请求,它们可能无法在正常模式下按预期工作,并在F12模式下正常工作.

Answer 6

我想这可能有所帮助,在任何javascript标签之前添加这个:

try{
  console
}catch(e){
   console={}; console.log = function(){};
}

Answer 7

如果您使用的是AngularJS版本1.X,则可以使用$ log服务而不是直接使用console.log.

简单的日志服务.默认实现安全地将消息写入浏览器的控制台(如果存在).

https://docs.angularjs.org/api/ng/service/$log

所以,如果你有类似的东西

angular.module('logExample', [])
  .controller('LogController', ['$scope', function($scope) {
    console.log('Hello World!');
 }]);

你可以用它替换它

angular.module('logExample', [])
  .controller('LogController', ['$scope', '$log', function($scope, $log) {
    $log.log('Hello World!');
 }]);

Angular 2+ 没有任何内置日志服务.

Answer 8

我在 IE 11 中就遇到了这种情况。我正在调用 jquery .load 函数。所以我用旧的方式做了，并在 url 中添加一些内容来禁用缓存。

$("#divToReplaceHtml").load('@Url.Action("Action", "Controller")/' + @Model.ID + "?nocache=" + new Date().getTime());

Answer 9

如果您正在使用angular和ie 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';
}]);

完全禁用cache.