Perché JavaScript funziona solo dopo aver aperto gli strumenti per sviluppatori in IE una volta?

Bug IE9: JavaScript funziona solo dopo aver aperto gli strumenti per sviluppatori una volta.

Il nostro sito offre agli utenti download gratuiti di pdf e ha una semplice funzione "inserisci password per scaricare". Tuttavia, non funziona affatto in Internet Explorer.

Puoi vedere di persona in questo esempio .

Il pass per il download è "makeuseof". In qualsiasi altro browser, funziona benissimo. In IE, entrambi i pulsanti non fanno nulla.

La cosa più curiosa che ho trovato è che se apri e chiudi la barra degli strumenti per sviluppatori con F12, tutto inizia improvvisamente a funzionare.

Abbiamo provato la modalità di compatibilità e simili, nulla fa la differenza.

Come faccio a farlo funzionare in Internet Explorer?

Sembra che potresti avere del codice di debug nel tuo javascript.

L'esperienza che stai descrivendo è tipica del codice che contiene console.log()o uno qualsiasi degli altriconsole funzionalità.

L' consoleoggetto viene attivato solo quando viene aperta la barra degli strumenti Dev. Prima di ciò, la chiamata all'oggetto console comporterà la sua segnalazione comeundefined . Dopo che la barra degli strumenti è stata aperta, la console esiste (anche se la barra degli strumenti viene successivamente chiusa), quindi le chiamate della console funzioneranno.

Ci sono alcune soluzioni a questo:

Il più ovvio è esaminare il codice rimuovendo i riferimenti console. Non dovresti comunque lasciare cose del genere nel codice di produzione.

Se si desidera conservare i riferimenti della console, è possibile racchiuderli in if()un'istruzione o in qualche altro condizionale che controlli se l'oggetto console esiste prima di provare a chiamarlo.

HTML5 Boilerplate ha un bel codice predefinito per la risoluzione dei problemi della 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;
        }
    }
}());

Come sottolineato da @ plus nei commenti, l'ultima versione è disponibile sulla loro pagina GitHub

Ecco un'altra possibile ragione oltre al console.logproblema (almeno in IE11):

Quando la console non è aperta, IE esegue una memorizzazione nella cache piuttosto aggressiva, quindi assicurati che tutte le $.ajaxchiamate o le XMLHttpRequestchiamate siano impostate su false.

Per esempio:

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

Quando la console per sviluppatori è aperta, la memorizzazione nella cache è meno aggressiva. Sembra essere un bug (o forse una funzionalità?)

Ciò ha risolto il mio problema dopo averlo apportato una piccola modifica. Ho aggiunto quanto segue nella mia pagina HTML per risolvere il problema IE9:

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

Oltre al ' console' problema di utilizzo menzionato nella risposta accettata e altri, c'è almeno un altro motivo per cui a volte le pagine in Internet Explorer funzionano solo con gli strumenti di sviluppo attivati.

Quando Strumenti per gli sviluppatori è abilitato, IE non utilizza realmente la sua cache HTTP (almeno per impostazione predefinita in IE 11) come fa in modalità normale.

Significa che se il tuo sito o pagina ha un problema di memorizzazione nella cache (se memorizza nella cache più di quanto dovrebbe ad esempio - era il mio caso), non vedrai quel problema in modalità F12. Pertanto, se javascript esegue alcune richieste AJAX memorizzate nella cache, potrebbero non funzionare come previsto in modalità normale e funzionare correttamente in modalità F12.

Immagino che questo possa aiutare, aggiungendolo prima di qualsiasi tag di javascript:

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

Se si utilizza AngularJS versione 1.X, è possibile utilizzare il servizio $ log anziché utilizzare direttamente console.log.

Servizio semplice per la registrazione. L'implementazione predefinita scrive in modo sicuro il messaggio nella console del browser (se presente).

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

Quindi se hai qualcosa di simile a

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

puoi sostituirlo con

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

Angular 2+ non ha alcun servizio di registro integrato .

Se stai usando angulare cioè 9, 10o edgeusi:

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

Per disabilitare completamente cache.

È successo in IE 11 per me. E stavo chiamando la funzione jload di .load. Quindi l'ho fatto alla vecchia maniera e ho inserito qualcosa nell'url per disabilitare la cache.

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

Ho ottenuto un'altra alternativa per le soluzioni offerte da Runeks e Todotresde che evita anche le insidie ​​discusse nei commenti alla risposta di Spudley :

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

È un po 'trasandato, ma d'altra parte è conciso e copre tutti i metodi di registrazione trattati nella risposta di Runeks e ha l'enorme vantaggio di poter aprire la finestra della console di IE in qualsiasi momento e che i registri entrano.

Abbiamo riscontrato questo problema su IE 11 su Windows 7 e Windows 10. Abbiamo scoperto quale fosse esattamente il problema attivando le funzionalità di debug per IE (IE> Opzioni Internet> scheda Avanzate> Navigazione> Deseleziona Disabilita debug script (Internet Explorer) ). Questa funzione è generalmente controllata nel nostro ambiente dagli amministratori di dominio.

Il problema era perché stavamo usando il console.debug(...)metodo nel nostro codice JavaScript. Il presupposto dello sviluppatore (me) era che non volevo che nulla fosse scritto se la console degli strumenti di sviluppo del client non era esplicitamente aperta. Mentre Chrome e Firefox sembravano concordare con questa strategia, IE 11 non piaceva un po '. Modificando tutte le console.debug(...)istruzioni in console.log(...)dichiarazioni, siamo stati in grado di continuare a registrare ulteriori informazioni nella console del client e visualizzarle quando erano aperte, ma altrimenti tenerle nascoste all'utente tipico.

Ho messo la risoluzione e la correzione per il mio problema. Sembra che la richiesta AJAX che ho inserito nel mio JavaScript non sia stata elaborata perché la mia pagina aveva qualche problema di cache. se il tuo sito o pagina ha un problema di memorizzazione nella cache, non vedrai quel problema in modalità sviluppatori / F12. il mio JavaScript cache AJAX richiede che potrebbe non funzionare come previsto e causare l'interruzione dell'esecuzione che F12 non ha alcun problema. Quindi ho appena aggiunto un nuovo parametro per rendere falsa la cache.

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

Sembra che IE abbia specificamente bisogno che questo sia falso in modo che l'attività AJAX e javascript funzioni correttamente.