Tại sao JavaScript chỉ hoạt động sau khi mở các công cụ dành cho nhà phát triển trong IE một lần?

Lỗi IE9 - JavaScript chỉ hoạt động sau khi mở các công cụ dành cho nhà phát triển một lần.

Trang web của chúng tôi cung cấp tải xuống pdf miễn phí cho người dùng và có chức năng "nhập mật khẩu để tải xuống" đơn giản. Tuy nhiên, nó hoàn toàn không hoạt động trong Internet Explorer.

Bạn có thể nhìn thấy chính mình trong ví dụ này .

Pass tải xuống là "makeuseof". Trong bất kỳ trình duyệt khác, nó hoạt động tốt. Trong IE, cả hai nút không làm gì cả.

Điều gây tò mò nhất mà tôi tìm thấy là nếu bạn mở và đóng thanh công cụ dành cho nhà phát triển với F12, tất cả sẽ bắt đầu hoạt động.

Chúng tôi đã thử chế độ tương thích và như vậy, không có gì làm nên sự khác biệt.

Làm cách nào để tôi thực hiện công việc này trong Internet Explorer?

Có vẻ như bạn có thể có một số mã gỡ lỗi trong javascript của bạn.

Trải nghiệm bạn mô tả là điển hình của mã chứa console.log()hoặc bất kỳ consolechức năng nào khác .

Đối consoletượng chỉ được kích hoạt khi Thanh công cụ Dev được mở. Trước đó, việc gọi đối tượng console sẽ dẫn đến việc nó được báo cáo là undefined. Sau khi thanh công cụ đã được mở, bàn điều khiển sẽ tồn tại (ngay cả khi thanh công cụ sau đó được đóng lại), do đó các cuộc gọi bàn điều khiển của bạn sẽ hoạt động.

Có một vài giải pháp cho vấn đề này:

Rõ ràng nhất là thông qua mã của bạn loại bỏ các tham chiếu đến console. Dù sao thì bạn cũng không nên để những thứ như thế trong mã sản xuất.

Nếu bạn muốn giữ các tham chiếu giao diện điều khiển, bạn có thể gói chúng trong một if()câu lệnh hoặc một số điều kiện khác để kiểm tra xem đối tượng giao diện điều khiển có tồn tại hay không trước khi thử gọi nó.

HTML5 Boilerplate có một mã được tạo sẵn đẹp để khắc phục sự cố bàn điều khiển:

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

Như @ plus- đã chỉ ra trong các nhận xét, phiên bản mới nhất có sẵn trên trang GitHub của họ

Đây là một lý do có thể khác bên cạnh console.logvấn đề (ít nhất là trong IE11):

Khi bàn điều khiển không mở, IE thực hiện bộ nhớ đệm khá tích cực, do đó hãy đảm bảo rằng mọi $.ajaxcuộc gọi hoặc XMLHttpRequestcuộc gọi đều được đặt thành bộ đệm.

Ví dụ:

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

Khi bảng điều khiển dành cho nhà phát triển mở, bộ nhớ đệm sẽ ít tích cực hơn. Có vẻ là một lỗi (hoặc có thể là một tính năng?)

Điều này đã giải quyết vấn đề của tôi sau khi tôi thực hiện một thay đổi nhỏ cho nó. Tôi đã thêm phần sau vào trang html của mình để khắc phục sự cố IE9:

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

Bên cạnh consolevấn đề sử dụng '' được đề cập trong câu trả lời được chấp nhận và các vấn đề khác, có ít nhất một lý do khác khiến đôi khi các trang trong Internet Explorer chỉ hoạt động với các công cụ dành cho nhà phát triển được kích hoạt.

Khi Công cụ dành cho nhà phát triển được bật, IE không thực sự sử dụng bộ đệm HTTP (ít nhất là theo mặc định trong IE 11) như ở chế độ bình thường.

Điều đó có nghĩa là nếu trang web hoặc trang của bạn có vấn đề về bộ đệm (nếu nó lưu trữ nhiều hơn mức cần thiết - đó là trường hợp của tôi), bạn sẽ không thấy vấn đề đó ở chế độ F12. Vì vậy, nếu javascript thực hiện một số yêu cầu AJAX được lưu trong bộ nhớ cache, chúng có thể không hoạt động như mong đợi ở chế độ bình thường và hoạt động tốt ở chế độ F12.

Tôi đoán điều này có thể giúp ích, thêm nó trước bất kỳ thẻ javascript nào:

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

Nếu bạn đang sử dụng AngularJS phiên bản 1.X, bạn có thể sử dụng dịch vụ $ log thay vì sử dụng console.log trực tiếp.

Dịch vụ đơn giản để đăng nhập. Cài đặt mặc định ghi tin nhắn vào bảng điều khiển của trình duyệt một cách an toàn (nếu có).

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

Vì vậy, nếu bạn có một cái gì đó tương tự như

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

bạn có thể thay thế nó bằng

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

Angular 2+ không có bất kỳ dịch vụ đăng nhập tích hợp nào .

Nếu bạn đang sử dụng angularvà tức là 9, 10hoặc edgesử dụng:

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

Để vô hiệu hóa hoàn toàn cache.

Nó đã xảy ra trong IE 11 đối với tôi. Và tôi đã gọi hàm jquery .load. Vì vậy, tôi đã làm theo cách cũ và đặt một cái gì đó vào url để tắt bộ đệm.

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

Tôi đã nhận được một giải pháp thay thế khác cho các giải pháp được cung cấp bởi runeks và todotresde cũng tránh được những cạm bẫy được thảo luận trong các bình luận cho câu trả lời của Spudley :

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

Mặt khác, nó hơi khó hiểu nhưng mặt khác nó ngắn gọn và bao quát tất cả các phương thức ghi nhật ký trong câu trả lời của runeks và nó có lợi thế rất lớn là bạn có thể mở cửa sổ giao diện điều khiển IE bất cứ lúc nào và các bản ghi xuất hiện.

Chúng tôi đã gặp phải sự cố này trên IE 11 trên Windows 7 và Windows 10. Chúng tôi đã phát hiện chính xác vấn đề là gì khi bật khả năng gỡ lỗi cho IE (IE> Tùy chọn Internet> tab Nâng cao> Duyệt web> Bỏ chọn Tắt gỡ lỗi tập lệnh (Internet Explorer) ). Tính năng này thường được kiểm tra trong môi trường của chúng tôi bởi các quản trị viên tên miền.

Vấn đề là do chúng tôi đã sử dụng console.debug(...)phương thức trong mã JavaScript của mình. Giả định được đưa ra bởi nhà phát triển (tôi) là tôi không muốn bất cứ điều gì được viết nếu bảng điều khiển Công cụ dành cho nhà phát triển máy khách không được mở rõ ràng. Mặc dù Chrome và Firefox dường như đồng ý với chiến lược này, IE 11 không thích nó một chút nào. Bằng cách thay đổi tất cả các console.debug(...)câu lệnh thành console.log(...)câu lệnh, chúng tôi có thể tiếp tục đăng nhập thông tin bổ sung trong bảng điều khiển máy khách và xem nó khi nó được mở, nhưng nếu không thì hãy giấu nó khỏi người dùng thông thường.

Tôi đặt giải pháp và khắc phục sự cố của tôi. Có vẻ như yêu cầu AJAX mà tôi đặt trong JavaScript không được xử lý vì trang của tôi có vấn đề về bộ đệm. nếu trang web hoặc trang của bạn có vấn đề về bộ đệm, bạn sẽ không thấy vấn đề đó ở chế độ nhà phát triển / F12. JavaScript AJAX được lưu trong bộ nhớ cache của tôi yêu cầu nó có thể không hoạt động như mong đợi và khiến việc thực thi bị phá vỡ mà F12 không có vấn đề gì cả. Vì vậy, chỉ cần thêm tham số mới để làm cho bộ đệm sai.

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

Có vẻ như IE đặc biệt cần điều này là sai để hoạt động AJAX và javascript chạy tốt.