Warum funktioniert JavaScript nur nach einmaligem Öffnen der Entwicklertools im IE?

Question

IE9 Bug - JavaScript funktioniert nur nach einmaligem Öffnen der Entwicklertools.

Unsere Website bietet den Nutzern kostenlose PDF-Downloads an und verfügt über eine einfache "Passwort eingeben zum Herunterladen"-Funktion. Allerdings funktioniert sie im Internet Explorer überhaupt nicht.

Davon können Sie sich selbst überzeugen Beispiel .

Der Download-Pass ist "makeuseof". In allen anderen Browsern funktioniert er einwandfrei. Im IE bewirken beide Schaltflächen nichts.

Das Merkwürdigste, was ich festgestellt habe, ist, dass, wenn man die Entwickler-Symbolleiste mit F12 öffnet und schließt, plötzlich alles funktioniert.

Wir haben es mit dem Kompatibilitätsmodus und so weiter versucht, aber nichts hat einen Unterschied gemacht.

Wie bringe ich das im Internet Explorer zum Laufen?

Answer 1

Es hört sich an, als hätten Sie vielleicht etwas Debugging-Code in Ihrem Javascript.

Die Erfahrung, die Sie beschreiben, ist typisch für Code, der console.log() oder einer der anderen console Funktionalität.

Die console Objekt wird nur aktiviert, wenn die Dev Toolbar geöffnet wird. Davor führt der Aufruf des Konsolenobjekts dazu, dass es wie folgt gemeldet wird undefined . Nachdem die Symbolleiste geöffnet wurde, ist die Konsole vorhanden (auch wenn die Symbolleiste anschließend geschlossen wird), so dass Ihre Konsolenaufrufe dann funktionieren.

Hierfür gibt es einige Lösungen:

Die naheliegendste ist, dass Sie Ihren Code durchgehen und Verweise auf console . Sie sollten solche Dinge ohnehin nicht im Produktionscode belassen.

Wenn Sie die Konsolenreferenzen beibehalten wollen, können Sie sie in eine if() Anweisung oder eine andere Bedingung, die prüft, ob das Konsolenobjekt existiert, bevor es aufgerufen wird.

Answer 2

HTML5 Boilerplate hat einen schönen vorgefertigten Code für die Behebung von Konsolenproblemen:

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

Wie @plus- in den Kommentaren erwähnte, ist die neueste Version auf ihrer GitHub-Seite

Answer 3

Hier ist ein weiterer möglicher Grund neben dem console.log Problem (zumindest im IE11):

Wenn die Konsole nicht geöffnet ist, führt der IE eine ziemlich aggressive Zwischenspeicherung durch; stellen Sie also sicher, dass alle $.ajax Anrufe oder XMLHttpRequest Aufrufen ist die Zwischenspeicherung auf false gesetzt.

Zum Beispiel:

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

Wenn die Entwicklerkonsole geöffnet ist, ist die Zwischenspeicherung weniger aggressiv. Scheint ein Fehler zu sein (oder vielleicht eine Funktion?)

Answer 4

Damit war mein Problem gelöst, nachdem ich eine kleine Änderung vorgenommen hatte. Ich fügte das Folgende in meine HTML-Seite ein, um das IE9-Problem zu beheben:

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

Answer 5

Neben dem ' console Wenn das in der akzeptierten Antwort erwähnte Nutzungsproblem und andere Probleme auftreten, gibt es zumindest einen weiteren Grund, warum Seiten im Internet Explorer manchmal nur mit aktivierten Entwicklertools funktionieren.

Wenn die Entwicklertools aktiviert sind, verwendet der IE nicht wirklich seinen HTTP-Cache (zumindest standardmäßig in IE 11), wie es im normalen Modus der Fall ist.

Das heißt, wenn Ihre Website oder Seite ein Caching-Problem hat (wenn sie zum Beispiel mehr zwischenspeichert als sie sollte - das war mein Fall), werden Sie dieses Problem im F12-Modus nicht sehen. Wenn das Javascript also einige AJAX-Anfragen zwischenspeichert, funktionieren sie im normalen Modus möglicherweise nicht wie erwartet, im F12-Modus jedoch einwandfrei.