Mengapa JavaScript hanya berfungsi setelah membuka alat pengembang di IE satu kali?

Bug IE9 - JavaScript hanya berfungsi setelah membuka alat pengembang satu kali.

Situs kami menawarkan unduhan pdf gratis kepada pengguna, dan memiliki fungsi sederhana "memasukkan kata sandi untuk mengunduh". Namun, itu tidak berfungsi sama sekali di Internet Explorer.

Anda dapat melihatnya sendiri dalam contoh ini .

Pass unduhan adalah "makeuseof". Di peramban lain, itu berfungsi dengan baik. Di IE, kedua tombol tidak melakukan apa-apa.

Hal paling aneh yang saya temukan adalah bahwa jika Anda membuka dan menutup bilah alat pengembang dengan F12, semuanya tiba-tiba mulai berfungsi.

Kami telah mencoba mode kompatibilitas dan semacamnya, tidak ada yang membuat perbedaan.

Bagaimana cara membuat ini berfungsi di Internet Explorer?

Sepertinya Anda mungkin memiliki beberapa kode debug di javascript Anda.

Pengalaman yang Anda gambarkan adalah khas kode yang berisi console.log()atau consolefungsi lainnya .

The consoleobjek hanya aktif ketika Toolbar Dev dibuka. Sebelum itu, memanggil objek konsol akan membuatnya dilaporkan sebagai undefined. Setelah bilah alat dibuka, konsol akan ada (bahkan jika bilah alat ditutup kemudian), maka panggilan konsol Anda kemudian akan berfungsi.

Ada beberapa solusi untuk ini:

Yang paling jelas adalah melalui kode Anda menghapus referensi console. Anda seharusnya tidak meninggalkan barang-barang seperti itu dalam kode produksi.

Jika Anda ingin menyimpan referensi konsol, Anda bisa membungkusnya dalam sebuah if()pernyataan, atau persyaratan lain yang memeriksa apakah objek konsol ada sebelum mencoba menyebutnya.

HTML5 Boilerplate memiliki kode pra-dibuat yang bagus untuk memperbaiki masalah konsol:

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

Seperti @ plus- menunjuk dalam komentar, versi terbaru tersedia di halaman GitHub mereka

Berikut adalah kemungkinan alasan lain selain console.logmasalah (setidaknya di IE11):

Ketika konsol tidak terbuka, IE melakukan caching yang cukup agresif, jadi pastikan bahwa semua $.ajaxpanggilan atau XMLHttpRequestcaching disetel ke false.

Sebagai contoh:

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

Saat konsol pengembang terbuka, caching kurang agresif. Tampaknya menjadi bug (atau mungkin fitur?)

Ini menyelesaikan masalah saya setelah saya melakukan sedikit perubahan. Saya menambahkan berikut ini di halaman html saya untuk memperbaiki masalah IE9:

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

Selain consolemasalah penggunaan yang disebutkan dalam jawaban yang diterima dan yang lain, setidaknya ada alasan lain mengapa kadang-kadang halaman di Internet Explorer hanya berfungsi dengan alat pengembang yang diaktifkan.

Ketika Alat Pengembang diaktifkan, IE tidak benar-benar menggunakan cache HTTP-nya (setidaknya secara default di IE 11) seperti dalam mode normal.

Itu berarti jika situs atau halaman Anda memiliki masalah caching (jika cache lebih dari yang seharusnya misalnya - itu adalah kasus saya), Anda tidak akan melihat masalah itu dalam mode F12. Jadi jika javascript melakukan beberapa permintaan AJAX yang di-cache, mereka mungkin tidak berfungsi seperti yang diharapkan dalam mode normal, dan berfungsi dengan baik dalam mode F12.

Saya kira ini bisa membantu, menambahkan ini sebelum tag javascript:

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

Jika Anda menggunakan AngularJS versi 1.X Anda bisa menggunakan layanan $ log alih-alih menggunakan console.log secara langsung.

Layanan sederhana untuk logging. Implementasi default dengan aman menulis pesan ke konsol browser (jika ada).

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

Jadi, jika Anda memiliki sesuatu yang mirip

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

Anda bisa menggantinya dengan

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

Angular 2+ tidak memiliki layanan log bawaan .

Jika Anda menggunakan angulardan yaitu 9, 10atau edgemenggunakan:

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

Untuk sepenuhnya menonaktifkan cache.

Itu terjadi di IE 11 untuk saya. Dan saya menelepon fungsi jquery .load. Jadi saya melakukannya dengan cara lama dan memasukkan sesuatu ke url untuk menonaktifkan cache.

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

Saya mendapatkan alternatif lain untuk solusi yang ditawarkan oleh runeks dan todotresde yang juga menghindari perangkap yang dibahas dalam komentar untuk jawaban Spudley :

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

Agak berantakan tetapi di sisi lain ringkas dan mencakup semua metode logging yang tercakup dalam jawaban runeks dan memiliki keuntungan besar bahwa Anda dapat membuka jendela konsol IE kapan saja dan log masuk mengalir.

Kami mengalami masalah ini pada IE 11 pada Windows 7 dan Windows 10. Kami menemukan apa sebenarnya masalahnya dengan mengaktifkan kemampuan debugging untuk IE (IE> Internet Options> tab Advanced> Browsing> Hapus centang Nonaktifkan debugging skrip (Internet Explorer) ). Fitur ini biasanya diperiksa di dalam lingkungan kami oleh admin domain.

Masalahnya adalah karena kami menggunakan console.debug(...)metode dalam kode JavaScript kami. Asumsi yang dibuat oleh pengembang (saya) adalah saya tidak ingin apa pun ditulis jika konsol Alat Pengembang klien tidak terbuka secara eksplisit. Sementara Chrome dan Firefox tampaknya setuju dengan strategi ini, IE 11 tidak menyukainya sedikit pun. Dengan mengubah semua console.debug(...)pernyataan menjadi console.log(...)pernyataan, kami dapat terus mencatat informasi tambahan di konsol klien dan melihatnya saat dibuka, tetapi selain itu tetap tersembunyi dari pengguna biasa.

Saya menempatkan resolusi dan memperbaiki masalah saya. Sepertinya permintaan AJAX yang saya masukkan ke dalam JavaScript saya tidak diproses karena halaman saya mengalami masalah cache. jika situs atau halaman Anda memiliki masalah caching Anda tidak akan melihat masalah itu dalam mode pengembang / F12. JavaScript AJAX cache saya meminta itu mungkin tidak berfungsi seperti yang diharapkan dan menyebabkan eksekusi rusak yang F12 tidak memiliki masalah sama sekali. Jadi baru saja menambahkan parameter baru untuk membuat cache salah.

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

Sepertinya IE secara khusus membutuhkan ini menjadi salah agar aktivitas AJAX dan javascript berjalan dengan baik.