Question 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 l'ouverture des outils de développement une fois.

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

Vous pouvez voir par vous-même dans ce Exemple.

La passe de téléchargement est "makeuseof". Dans tout autre navigateur, cela fonctionne très 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 ainsi, rien ne fait de différence.

Comment est-ce que je fais ce travail dans Internet Explorer?


608
2017-10-12 15:44


origine


Réponses:


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 l'un des autres console fonctionnalité.

le console objet n'est activé que lorsque la barre d'outils Dev est ouverte. Avant cela, l'appel de l'objet console entraînera son signalement comme undefined. Après l'ouverture de la barre d'outils, la console existera (même si la barre d'outils est ensuite fermée), vos appels de console fonctionneront alors.

Il y a quelques solutions à cela:

La plus évidente est de passer par 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 placer dans un if() instruction ou un autre conditionnel qui vérifie si l'objet console existe avant d'essayer de l'appeler.


782
2017-10-12 15:51



Boilerplate HTML5 a un joli code pré-fait pour la fixation des 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- pointé dans les commentaires, la dernière version est disponible sur leur Page GitHub


158
2017-09-07 09:58



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

Lorsque la console n'est pas ouverte, IE fait une mise en cache assez agressive, alors assurez-vous que $.ajax appels ou XMLHttpRequest les appels ont la mise en cache 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é?)


142
2017-08-06 21:28



Ceci a résolu mon problème après que j'ai fait un changement mineur à lui. 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>

62
2017-09-06 19:39



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

Lorsque Developer Tools est activé, 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 le devrait par exemple - c'était mon cas), vous ne verrez pas ce problème en mode F12. Ainsi, si le javascript effectue des requêtes AJAX en cache, il se peut qu'ils ne fonctionnent pas comme prévu en mode normal et fonctionnent correctement en mode F12.


28
2018-05-29 17:24



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

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

17
2018-04-20 13:23



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

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

Angulaire 2+ n'a pas de service de journalisation intégré.


8
2017-08-14 18:37



C'est arrivé dans IE 11 pour moi. Et j'appelais la fonction jquery .load. Donc, je l'ai fait à la mode à l'ancienne et mettre quelque chose dans l'url pour désactiver la mise en cache.

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

4
2018-04-30 16:03



Si vous utilisez angular et c'est à dire 9, 10 ou edge utilisation :

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.


4
2017-08-18 08:43