Neden JavaScript yalnızca IE'de geliştirici araçlarını açtıktan sonra çalışır?

IE9 Hatası - JavaScript yalnızca geliştirici araçlarını bir kez açtıktan sonra çalışır.

Sitemiz kullanıcılara ücretsiz pdf indirmeleri sunmaktadır ve basit bir "indirmek için şifre girin" fonksiyonuna sahiptir. Ancak, Internet Explorer'da hiç çalışmaz.

Bu örnekte kendiniz görebilirsiniz .

İndirme kartı "makeuseof" dir. Başka herhangi bir tarayıcıda iyi çalışır. IE'de her iki düğme de hiçbir şey yapmaz.

Bulduğum en ilginç şey, geliştirici araç çubuğunu F12 ile açar ve kapatırsanız, aniden çalışmaya başlar.

Uyumluluk modunu denedik ve böyle bir şey hiçbir şey fark etmiyor.

Bunu Internet Explorer'da nasıl çalıştırabilirim?

Javascript'inizde bazı hata ayıklama kodlarına sahip olabileceğiniz anlaşılıyor.

Açıkladığınız deneyim, tipik olan console.log()veya diğer consoleişlevleri içeren koddur .

consoleDev Araç açıldığında nesnesi, yalnızca devreye girer. Bundan önce, konsol nesnesinin çağrılması, nesnenin olarak bildirilmesine neden olur undefined. Araç çubuğu açıldıktan sonra konsol var olacaktır (araç çubuğu sonradan kapatılsa bile), böylece konsol çağrılarınız çalışır.

Bunun için birkaç çözüm var:

En belirgin olanı, kodunuzu referansları kaldırarak geçmektir console. Zaten üretim kodunda böyle şeyler bırakmamalısınız.

Konsol başvurularını saklamak istiyorsanız, bunları bir if()deyime veya konsol nesnesini çağırmaya çalışmadan önce var olup olmadığını kontrol eden başka bir koşulla sarabilirsiniz .

HTML5 Boilerplate , konsol sorunlarını düzeltmek için önceden hazırlanmış güzel bir koda sahiptir:

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

Yorumlarda @ artısının işaret ettiği gibi, en son sürüm GitHub sayfalarında mevcuttur

console.logSorunun yanı sıra başka bir olası neden daha var (en azından IE11'de):

Konsol açık olmadığında, IE oldukça agresif önbellekleme yapar, bu nedenle tüm $.ajaxçağrıların veya XMLHttpRequestçağrıların önbelleğe alınmasının false olarak ayarlandığından emin olun .

Örneğin:

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

Geliştirici konsolu açıkken, önbellekleme daha az agresiftir. Bir hata gibi görünüyor (veya belki bir özellik?)

Bu, küçük bir değişiklik yaptıktan sonra sorunumu çözdü. IE9 sorununu çözmek için html sayfama aşağıdakileri ekledim:

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

consoleKabul edilen cevapta ve diğerlerinde belirtilen ' ' kullanım sorununun yanı sıra, bazen Internet Explorer'daki sayfaların yalnızca geliştirici araçları etkinleştirildiğinde çalışmasının en az başka bir nedeni vardır.

Geliştirici Araçları etkinleştirildiğinde, IE normal modda olduğu gibi HTTP önbelleğini (en azından IE 11'de varsayılan olarak) gerçekten kullanmaz.

Bu, sitenizde veya sayfanızda bir önbellek sorunu varsa (örneğin, benim durumumdan daha fazla önbelleğe sahipse - bu benim durumumdu), F12 modunda bu sorunu görmeyeceğiniz anlamına gelir. Javascript bazı önbelleğe alınmış AJAX istekleri yaparsa, normal modda beklendiği gibi çalışmayabilir ve F12 modunda iyi çalışabilir.

Bu herhangi bir javascript etiketi önce ekleyerek, bu yardımcı olabilir sanırım:

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

AngularJS sürüm 1.X kullanıyorsanız, doğrudan console.log kullanmak yerine $ log hizmetini kullanabilirsiniz.

Günlük kaydı için basit hizmet. Varsayılan uygulama mesajı güvenli bir şekilde tarayıcının konsoluna yazar (varsa).

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

Yani buna benzer bir şeyiniz varsa

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

ile değiştirebilirsiniz

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

Angular 2+ ürününde yerleşik günlük hizmeti yoktur .

Kullanıyorsanız, angularyani 9, 10veya edgekullanıyorsanız:

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

Tamamen devre dışı bırakmak için cache.

IE 11'de benim için oldu. Ve jquery .load işlevini çağırıyordum. Bu yüzden eski moda şekilde yaptım ve önbelleği devre dışı bırakmak için URL'ye bir şey koydum.

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

Ben sunduğu çözümler için henüz başka bir alternatif var runeks ve todotresde da yorumlarında tartışılan eksikliklerini artık o Spudley 'ın cevabı:

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

Biraz dağınık ama öte yandan kısa ve runeks yanıtında kapsanan tüm kayıt yöntemlerini kapsar ve IE'nin konsol penceresini istediğiniz zaman açabilmeniz ve günlüklerin akması büyük bir avantaja sahiptir.

Windows 7 ve Windows 10'da IE 11'de bu sorunu yaşadık. IE için hata ayıklama yeteneklerini açarak sorunun tam olarak ne olduğunu keşfettik (IE> Internet Seçenekleri> Gelişmiş sekmesi> Göz atma> Kod hata ayıklamasını devre dışı bırak (Internet Explorer) işaretini kaldırın . Bu özellik genellikle ortamımızda etki alanı yöneticileri tarafından denetlenir.

Sorun, console.debug(...)yöntemi JavaScript kodumuzda kullanmamızdı. Geliştirici (ben) tarafından yapılan varsayım, istemci Geliştirici Araçları konsolu açıkça açık değilse yazılı bir şey istemiyordum. Chrome ve Firefox bu stratejiyi kabul ediyor gibi görünse de, IE 11 bunu biraz beğenmedi. Tüm console.debug(...)ifadeleri ifadelere değiştirerek console.log(...), istemci konsolunda ek bilgileri günlüğe kaydetmeye ve açıkken görüntülemeye devam edebildik, ancak aksi takdirde normal kullanıcıdan gizli tuttuk.

Sorunumu çözer ve çözerim. Görünüşe göre sayfamın önbellek sorunu olduğu için JavaScript'imin içine koyduğum AJAX isteği işlenmiyor. sitenizde veya sayfanızda bir önbellek sorunu varsa, bu sorunu geliştiriciler / F12 modunda göremezsiniz. önbelleğe alınan JavaScript AJAX, beklendiği gibi çalışmayabilir ve yürütmenin F12'nin hiç sorun yaşamamasına neden olabilir. Bu yüzden önbelleği yanlış yapmak için yeni bir parametre ekledik.

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

Görünüşe göre IE özellikle AJAX ve javascript etkinliğinin iyi çalışması için yanlış olması gerekiyor.