web-dev-qa-db-fra.com

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

IE9 Bug - JavaScript ne fonctionne qu'après avoir ouvert les outils de développement une fois.

Notre site offre aux utilisateurs des téléchargements gratuits de pdf, et il comporte 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 ce exemple .

Le passe 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 de développeur avec F12, tout commence soudainement à fonctionner.

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

Comment faire pour que cela fonctionne dans Internet Explorer?

javascriptinternet-explorerinternet-explorer-9
625
James Bruce

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

L’expérience que vous décrivez est typique du code contenant console.log() ou n’importe laquelle des autres fonctionnalités console.

L'objet console n'est activé que lorsque la barre d'outils de développement est ouverte. Auparavant, l'appel de l'objet console entraînerait le signalement de undefined. Après l’ouverture de la barre d’outils, la console existera (même si la barre d’outils est fermée par la suite), vos appels à la console fonctionneront ensuite.

Il y a quelques solutions à cela:

La plus évidente consiste à parcourir votre code en supprimant les références à console. De toute façon, vous ne devriez pas laisser de telles choses dans le code de production.

Si vous souhaitez conserver les références de la console, vous pouvez les envelopper dans une instruction if() ou dans une autre condition permettant de vérifier si l'objet console existe avant de tenter de l'appeler.

802
Spudley

HTML5 Boilerplate a un code prédéfini 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- souligné dans les commentaires, la dernière version est disponible sur leur page GitHub

160
Tallmaris

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

Lorsque la console n'est pas ouverte, IE effectue une mise en cache assez agressive. Assurez-vous donc que tous les appels $.ajax ou XMLHttpRequest ont la valeur de mise en cache définie sur false.

Par exemple:

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

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

152
user3916095

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 d'IE9:

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

Outre le problème d'utilisation 'console' mentionné dans la réponse acceptée et d'autres, il existe au moins une autre raison pour laquelle les pages d'Internet Explorer fonctionnent parfois uniquement 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 (du 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 en cache plus qu'il ne devrait, par exemple - c'était mon cas), vous ne verrez pas ce problème en mode F12. Ainsi, si le javascript effectue certaines requêtes AJAX en cache, elles risquent de ne pas fonctionner comme prévu en mode normal et de fonctionner correctement en mode F12.

28
Simon Mourier

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

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

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 le message en toute sécurité 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+ ne possède pas de service de journalisation intégré .

8
Oskar S.

Si vous utilisez angular et que 9, 10 ou Edge, utilisez:

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.

5
Itsik Mauyhas

C'est arrivé dans IE 11 pour moi. Et j'appelais la fonction jquery .load. Donc, je l'ai 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());
4
Vilhelm

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

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

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

2
schnatterer

Nous avons rencontré ce problème sur IE11 sur Windows 7 et Windows 10. Nous avons découvert le problème en activant les fonctions de débogage pour IE (IE> Options Internet> onglet Avancé> Navigation> Désactiver 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 que nous utilisions la méthode console.debug(...) dans notre code JavaScript. Le développeur (moi) partait du principe que je ne voulais rien écrire si la console Client Developer Tools n'était pas explicitement ouverte. Bien que Chrome et Firefox semblaient être d'accord avec cette stratégie, IE 11 ne l'aimait pas du tout. En remplaçant toutes les instructions console.debug(...) par console.log(...), nous avons pu continuer à enregistrer des informations supplémentaires dans la console client et à les visualiser à l'ouverture de celle-ci, sans les masquer à l'utilisateur standard.

0
gregsonian

Je mets la résolution et corrige mon problème. On dirait que la demande AJAX que je mets dans mon code JavaScript n'était pas traitée car ma page avait un problème de cache. Si votre site ou votre page a un problème de mise en cache, vous ne le verrez pas en mode développeurs/F12. mon JavaScript mis en cache AJAX demande qu'il ne fonctionne peut-être pas comme prévu et que l'exécution soit interrompue, ce que F12 n'a aucun problème. Donc, juste ajouté un nouveau paramètre pour rendre le cache faux.

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

On dirait que IE a spécifiquement besoin que ce soit faux pour que l'activité AJAX et javascript s'exécute correctement.

0
pauldx