Pourquoi JavaScript ne fonctionne-t-il qu'après avoir ouvert une fois les outils de développement dans IE?

Bogue IE9 - JavaScript ne fonctionne qu'une fois les outils de développement ouverts.

Notre site propose des téléchargements gratuits de pdf aux utilisateurs, et il a une simple fonction "entrer le mot de passe pour télécharger". Cependant, cela ne fonctionne pas du tout dans Internet Explorer.

Vous pouvez voir par vous-même dans cet exemple .

Le pass de téléchargement est "makeuseof". Dans tout autre navigateur, cela fonctionne bien. Dans IE, les deux boutons ne font rien.

La chose la plus curieuse que j'ai trouvée est que si vous ouvrez et fermez la barre d'outils du développeur avec F12, tout commence soudainement à fonctionner.

Nous avons essayé le mode de compatibilité et tel, rien ne fait de différence.

Comment faire pour que cela fonctionne dans Internet Explorer?

Il semble que vous ayez du code de débogage dans votre javascript.

L'expérience que vous décrivez est typique du code qui contient console.log()ou toute autre consolefonctionnalité.

L' consoleobjet n'est activé que lorsque la barre d'outils de développement est ouverte. Avant cela, l'appel de l'objet console entraînera son rapport en tant que undefined. Une fois la barre d'outils ouverte, la console existera (même si la barre d'outils est fermée par la suite), vos appels de console fonctionneront alors.

Il existe quelques solutions à cela:

Le plus évident est de parcourir votre code en supprimant les références à console. De toute façon, vous ne devriez pas laisser des trucs comme ça dans le code de production.

Si vous souhaitez conserver les références de la console, vous pouvez les encapsuler dans une if()instruction ou une autre condition qui vérifie si l'objet console existe avant d'essayer de l'appeler.

HTML5 Boilerplate a un joli code pré-fait pour résoudre les problèmes de console:

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

Comme @ plus indiqué dans les commentaires, la dernière version est disponible sur leur page GitHub

Voici une autre raison possible en plus du console.logproblème (au moins dans IE11):

Lorsque la console n'est pas ouverte, IE effectue une mise en cache assez agressive, alors assurez-vous que la mise en cache de tous les $.ajaxappels ou XMLHttpRequestappels est définie sur false.

Par exemple:

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

Lorsque la console développeur est ouverte, la mise en cache est moins agressive. Semble être un bug (ou peut-être une fonctionnalité?)

Cela a résolu mon problème après y avoir apporté une modification mineure. J'ai ajouté ce qui suit dans ma page html afin de résoudre le problème IE9:

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

Outre le consoleproblème d'utilisation mentionné dans la réponse acceptée et d'autres, il existe au moins une autre raison pour laquelle parfois les pages d'Internet Explorer ne fonctionnent qu'avec les outils de développement activés.

Lorsque les outils de développement sont activés, IE n'utilise pas vraiment son cache HTTP (au moins par défaut dans IE 11) comme il le fait en mode normal.

Cela signifie que si votre site ou votre page a un problème de mise en cache (s'il cache plus qu'il ne devrait par exemple - c'était mon cas), vous ne verrez pas ce problème en mode F12. Donc, si le javascript effectue certaines requêtes AJAX mises en cache, elles peuvent ne pas fonctionner comme prévu en mode normal et fonctionner correctement en mode F12.

Je suppose que cela pourrait aider, en ajoutant ceci avant toute balise de javascript:

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

Si vous utilisez AngularJS version 1.X, vous pouvez utiliser le service $ log au lieu d'utiliser directement console.log.

Service simple pour la journalisation. L'implémentation par défaut écrit en toute sécurité le message dans la console du navigateur (le cas échéant).

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

Donc, si vous avez quelque chose de similaire à

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

vous pouvez le remplacer par

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

Angular 2+ n'a pas de service de journal intégré .

Si vous utilisez angularet c'est-à-dire 9, 10ou edgeutilisez:

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';
}]);

Pour désactiver complètement cache.

C'est arrivé dans IE 11 pour moi. Et j'appelais la fonction jquery .load. Je l'ai donc fait à l'ancienne et j'ai mis quelque chose dans l'URL pour désactiver le cache.

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

J'ai encore une autre alternative pour les solutions proposées par runeks et todotresde qui évite également les pièges discutés dans les commentaires à la réponse de Spudley :

        try {
            console.log(message);
        } catch (e) {
        }

C'est un peu délicat mais d'un autre côté, il est concis et couvre toutes les méthodes de journalisation couvertes par la réponse de runeks et il a l'énorme avantage que vous pouvez ouvrir la fenêtre de console d'IE à tout moment et les journaux arrivent.

Nous avons rencontré ce problème sur IE 11 sur Windows 7 et Windows 10. Nous avons découvert quel était exactement le problème en activant les capacités de débogage pour IE (IE> Options Internet> onglet Avancé> Navigation> Décocher Désactiver le débogage de script (Internet Explorer) ). Cette fonctionnalité est généralement vérifiée dans notre environnement par les administrateurs de domaine.

Le problème était dû au fait que nous utilisions la console.debug(...)méthode dans notre code JavaScript. L'hypothèse faite par le développeur (moi) était que je ne voulais rien écrire si la console des outils de développement client n'était pas explicitement ouverte. Alors que Chrome et Firefox semblaient d'accord avec cette stratégie, IE 11 ne l'aimait pas du tout. En changeant toutes les console.debug(...)instructions en console.log(...)instructions, nous avons pu continuer à enregistrer des informations supplémentaires dans la console client et à les afficher lorsqu'elle était ouverte, mais sinon, à les cacher à l'utilisateur type.

J'ai mis la résolution et corrigé mon problème. On dirait que la demande AJAX que j'ai mise dans mon JavaScript n'était pas en cours de traitement car ma page avait un problème de cache. si votre site ou page a un problème de mise en cache, vous ne verrez pas ce problème en mode développeurs / F12. mon JavaScript AJAX mis en cache demande que cela ne fonctionne pas comme prévu et que l'exécution s'arrête, ce qui ne pose aucun problème à F12. Il suffit donc d'ajouter un nouveau paramètre pour rendre le cache faux.

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

Il semble qu'IE ait spécifiquement besoin que ce soit faux pour que l'activité AJAX et javascript fonctionne bien.