เหตุใด JavaScript จึงทำงานหลังจากเปิดเครื่องมือนักพัฒนาซอฟต์แวร์ใน IE ครั้งเดียวเท่านั้น

IE9 Bug - JavaScript ใช้งานได้หลังจากเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพียงครั้งเดียว

เว็บไซต์ของเราให้บริการดาวน์โหลดไฟล์ PDF ฟรีแก่ผู้ใช้และมีฟังก์ชั่น "ป้อนรหัสผ่านเพื่อดาวน์โหลด" อย่างง่าย อย่างไรก็ตามมันไม่สามารถใช้งานได้ใน Internet Explorer

คุณสามารถเห็นตัวเองในตัวอย่างนี้

รหัสผ่านการดาวน์โหลดคือ "makeuseof" ในเบราว์เซอร์อื่นมันทำงานได้ดี ใน IE ปุ่มทั้งสองไม่ทำอะไรเลย

สิ่งที่อยากรู้มากที่สุดที่ฉันพบคือถ้าคุณเปิดและปิดแถบเครื่องมือของนักพัฒนาซอฟต์แวร์ด้วย F12 ทุกอย่างก็เริ่มทำงานได้ทันที

เราได้ลองใช้โหมดความเข้ากันได้แล้วและไม่มีอะไรสร้างความแตกต่าง

ฉันจะทำให้งานนี้ใน Internet Explorer ได้อย่างไร

ดูเหมือนว่าคุณอาจมีรหัสการแก้จุดบกพร่องในจาวาสคริปต์ของคุณ

ประสบการณ์ที่คุณอธิบายเป็นเรื่องปกติของรหัสที่มีconsole.log()หรือconsoleฟังก์ชั่นอื่น ๆ

consoleวัตถุถูกเปิดใช้งานเฉพาะเมื่อ Toolbar Dev เปิด undefinedก่อนที่จะเรียกวัตถุคอนโซลจะส่งผลให้มันถูกรายงานว่า หลังจากเปิดแถบเครื่องมือแล้วคอนโซลจะมีอยู่ (แม้ว่าจะปิดแถบเครื่องมือในภายหลัง) ดังนั้นการเรียกใช้คอนโซลของคุณจะใช้งานได้

มีวิธีแก้ปัญหานี้:

consoleที่เห็นได้ชัดที่สุดคือหนึ่งที่จะไปผ่านรหัสลบการอ้างอิงของคุณไป คุณไม่ควรทิ้งสิ่งต่าง ๆ ไว้ในรหัสการผลิต

หากคุณต้องการเก็บการอ้างอิงคอนโซลคุณสามารถรวมมันไว้ในif()คำสั่งหรือเงื่อนไขอื่น ๆ ที่ตรวจสอบว่ามีวัตถุคอนโซลอยู่ก่อนที่จะพยายามเรียกมัน

HTML5 Boilerplateมีโค้ดล่วงหน้าที่ดีสำหรับการแก้ไขปัญหาคอนโซล:

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

ในฐานะที่เป็น @ plus- ชี้ให้เห็นในความคิดเห็นรุ่นล่าสุดมีอยู่ในหน้า GitHubของพวกเขา

นี่เป็นอีกเหตุผลที่เป็นไปได้นอกเหนือจากconsole.logปัญหา (อย่างน้อยใน IE11):

เมื่อคอนโซลไม่เปิดขึ้น IE จะทำการแคชที่ค่อนข้างก้าวร้าวดังนั้นตรวจสอบให้แน่ใจว่าการ$.ajaxโทรหรือการโทรใด ๆXMLHttpRequestมีการตั้งค่าการแคชเป็นเท็จ

ตัวอย่างเช่น:

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

เมื่อคอนโซลผู้พัฒนาเปิดขึ้นการแคชจะรุนแรงน้อยกว่า ดูเหมือนว่าจะเป็นข้อบกพร่อง (หรืออาจจะเป็นคุณสมบัติ?)

วิธีนี้แก้ไขปัญหาของฉันหลังจากที่ฉันทำการเปลี่ยนแปลงเล็กน้อย ฉันได้เพิ่มสิ่งต่อไปนี้ในหน้า html ของฉันเพื่อแก้ไขปัญหา IE9:

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

นอกเหนือจากconsoleปัญหาการใช้งาน '' ที่กล่าวถึงในคำตอบที่ยอมรับและอื่น ๆ มีอย่างน้อยอีกสาเหตุหนึ่งที่ทำให้บางครั้งหน้าใน Internet Explorer ทำงานได้เฉพาะเมื่อเปิดใช้งานเครื่องมือสำหรับนักพัฒนา

เมื่อเปิดใช้งานเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ IE จะไม่ใช้แคช HTTP (อย่างน้อยก็ตามค่าเริ่มต้นใน IE 11) เช่นเดียวกับที่ใช้ในโหมดปกติ

หมายความว่าหากไซต์หรือหน้าของคุณมีปัญหาการแคช (ถ้าแคชมากกว่าที่ควรจะเป็นเช่นนั้นเป็นกรณีของฉัน) คุณจะไม่เห็นปัญหานั้นในโหมด F12 ดังนั้นหากจาวาสคริปต์ทำการร้องขอ AJAX ที่แคชไว้บางรายการอาจไม่ทำงานอย่างที่คาดไว้ในโหมดปกติและทำงานได้ดีในโหมด F12

ฉันเดาว่าสิ่งนี้จะช่วยได้เพิ่มสิ่งนี้ก่อนแท็กของจาวาสคริปต์:

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

หากคุณใช้ AngularJS เวอร์ชัน 1.X คุณสามารถใช้บริการ $ log แทนการใช้ console.log โดยตรง

บริการง่าย ๆ สำหรับการบันทึก การใช้งานเริ่มต้นจะเขียนข้อความลงในคอนโซลของเบราว์เซอร์อย่างปลอดภัย (ถ้ามี)

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

ดังนั้นหากคุณมีสิ่งที่คล้ายกับ

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

คุณสามารถแทนที่ด้วย

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

Angular 2+ ไม่มีบริการบันทึกในตัว

หากคุณใช้angularและเช่น9, 10หรือedgeใช้:

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

cacheเพื่อปิดการใช้งานได้อย่างสมบูรณ์

มันเกิดขึ้นใน IE 11 สำหรับฉัน และฉันกำลังเรียกฟังก์ชั่น jquery .load ดังนั้นฉันจึงใช้วิธีแบบเก่าและใส่บางอย่างใน URL เพื่อปิดใช้งานการแคช

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

ฉันยังมีอีกทางเลือกหนึ่งสำหรับการแก้ปัญหาที่เสนอโดยruneksและtodotresdeที่หลีกเลี่ยงข้อผิดพลาดที่กล่าวถึงในความคิดเห็นต่อคำตอบของSpudley :

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

มันค่อนข้างบอบบาง แต่ในทางกลับกันมันกระชับและครอบคลุมวิธีการบันทึกทั้งหมดที่ครอบคลุมในคำตอบของruneksและมันมีข้อได้เปรียบอย่างมากที่คุณสามารถเปิดหน้าต่างคอนโซลของ IE ได้ตลอดเวลาและมีการบันทึกต่างๆ

เราพบปัญหานี้ใน IE 11 บน Windows 7 และ Windows 10 เราค้นพบว่าปัญหาคืออะไรโดยการเปิดใช้งานการดีบักสำหรับ IE (IE> ตัวเลือกอินเทอร์เน็ต> แท็บขั้นสูง> การเรียกดู> ยกเลิกการตรวจสอบการดีบักสคริปต์ (Internet Explorer ) โดยทั่วไปคุณสมบัตินี้จะได้รับการตรวจสอบในสภาพแวดล้อมของเราโดยผู้ดูแลระบบของโดเมน

ปัญหาเกิดขึ้นเพราะเราใช้console.debug(...)วิธีการภายในรหัสจาวาสคริปต์ของเรา ข้อสันนิษฐานที่ทำโดยนักพัฒนา (ฉัน) คือฉันไม่ต้องการเขียนอะไรถ้าคอนโซลเครื่องมือสำหรับนักพัฒนาของลูกค้าไม่ได้เปิดอย่างชัดเจน ในขณะที่ Chrome และ Firefox ดูเหมือนจะเห็นด้วยกับกลยุทธ์นี้ IE 11 ไม่ชอบเลยแม้แต่นิดเดียว โดยการเปลี่ยนconsole.debug(...)คำสั่งทั้งหมดเป็นคำconsole.log(...)สั่งเราสามารถบันทึกข้อมูลเพิ่มเติมในคอนโซลลูกค้าและดูมันเมื่อมันถูกเปิด แต่มิฉะนั้นให้ซ่อนมันจากผู้ใช้ทั่วไป

ฉันใส่ความละเอียดและแก้ไขปัญหาของฉัน ดูเหมือนว่าคำขอ AJAX ที่ฉันใส่ไว้ใน JavaScript ของฉันไม่ได้รับการประมวลผลเนื่องจากหน้าเว็บของฉันมีปัญหาแคช หากเว็บไซต์หรือหน้าของคุณมีปัญหาการแคชคุณจะไม่เห็นปัญหานั้นในโหมดผู้พัฒนา / F12 AJAX JavaScript ที่แคชไว้ของฉันร้องขออาจไม่ทำงานตามที่คาดไว้และทำให้การดำเนินการเพื่อหยุด F12 ซึ่งไม่มีปัญหาเลย ดังนั้นเพิ่งเพิ่มพารามิเตอร์ใหม่เพื่อทำให้แคชเป็นเท็จ

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

ดูเหมือนว่า IE ต้องการสิ่งนี้เป็นเท็จโดยเฉพาะเพื่อให้กิจกรรม AJAX และ javascript ทำงานได้ดี