IE에서 개발자 도구를 한 번만 연 후에 만 JavaScript가 작동하는 이유는 무엇입니까?
IE9 버그-JavaScript는 개발자 도구를 한 번 연 후에 만 작동합니다.
저희 사이트는 사용자에게 무료 pdf 다운로드를 제공하며 간단한 "다운로드 비밀번호 입력"기능이 있습니다. 그러나 Internet Explorer에서는 전혀 작동하지 않습니다.
이 예 에서 직접 확인할 수 있습니다 .
다운로드 패스는 "makeuseof"입니다. 다른 브라우저에서는 정상적으로 작동합니다. IE에서는 두 버튼 모두 아무것도하지 않습니다.
내가 찾은 가장 흥미로운 점은 F12로 개발자 도구 모음을 열고 닫으면 모든 것이 갑자기 작동하기 시작한다는 것입니다.
우리는 호환성 모드를 시도했지만 아무런 차이가 없습니다.
Internet Explorer에서 어떻게 작동합니까?
자바 스크립트에 디버깅 코드가있는 것 같습니다.
설명하는 경험은 console.log()
또는 다른 console
기능 을 포함하는 코드의 전형적인 경험 입니다.
console
데브 도구 모음을 열 때 개체는 활성화됩니다. 그 전에 콘솔 객체를 호출하면 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
호출의 캐싱이 false로 설정되어 있는지 확인하십시오 .
예를 들면 :
$.ajax({cache: false, ...})
개발자 콘솔이 열려 있으면 캐싱이 덜 공격적입니다. 버그 (또는 기능일까요?) 인 것 같습니다.
이것은 내가 약간 변경 한 후에 내 문제를 해결했습니다. IE9 문제를 해결하기 위해 HTML 페이지에 다음을 추가했습니다.
<script type="text/javascript">
// IE9 fix
if(!window.console) {
var console = {
log : function(){},
warn : function(){},
error : function(){},
time : function(){},
timeEnd : function(){}
}
}
</script>
Besides the 'console
' usage issue mentioned in accepted answer and others,there is at least another reason why sometimes pages in Internet Explorer work only with the developer tools activated.
When Developer Tools is enabled, IE doesn't really uses its HTTP cache (at least by default in IE 11) like it does in normal mode.
It means if your site or page has a caching problem (if it caches more than it should for example - that was my case), you will not see that problem in F12 mode. So if the javascript does some cached AJAX requests, they may not work as expected in normal mode, and work fine in F12 mode.
I guess this could help, adding this before any tag of javascript:
try{
console
}catch(e){
console={}; console.log = function(){};
}
If you are using AngularJS version 1.X you could use the $log service instead of using console.log directly.
Simple service for logging. Default implementation safely writes the message into the browser's console (if present).
https://docs.angularjs.org/api/ng/service/$log
So if you have something similar to
angular.module('logExample', [])
.controller('LogController', ['$scope', function($scope) {
console.log('Hello World!');
}]);
you can replace it with
angular.module('logExample', [])
.controller('LogController', ['$scope', '$log', function($scope, $log) {
$log.log('Hello World!');
}]);
Angular 2+ does not have any built-in log service.
If you are using angular
and ie 9, 10
or edge
use :
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';
}]);
To completely disable cache
.
It happened in IE 11 for me. And I was calling the jquery .load function. So I did it the old fashion way and put something in the url to disable cacheing.
$("#divToReplaceHtml").load('@Url.Action("Action", "Controller")/' + @Model.ID + "?nocache=" + new Date().getTime());
I got yet another alternative for the solutions offered by runeks and todotresde that also avoids the pitfalls discussed in the comments to Spudley's answer:
try {
console.log(message);
} catch (e) {
}
It's a bit scruffy but on the other hand it's concise and covers all the logging methods covered in runeks' answer and it has the huge advantage that you can open the console window of IE at any time and the logs come flowing in.
We ran into this problem on IE 11 on Windows 7 and Windows 10. We discovered what exactly the problem was by turning on debugging capabilities for IE (IE > Internet Options > Advanced tab > Browsing > Uncheck Disable script debugging (Internet Explorer)). This feature is typically checked on within our environment by the domain admins.
The problem was because we were using the console.debug(...)
method within our JavaScript code. The assumption made by the developer (me) was I did not want anything written if the client Developer Tools console was not explicitly open. While Chrome and Firefox seemed to agree with this strategy, IE 11 did not like it one bit. By changing all the console.debug(...)
statements to console.log(...)
statements, we were able to continue to log additional information in the client console and view it when it was open, but otherwise keep it hidden from the typical user.
I put the resolution and fix for my issue . Looks like AJAX request that I put inside my JavaScript was not processing because my page was having some cache problem. if your site or page has a caching problem you will not see that problem in developers/F12 mode. my cached JavaScript AJAX requests it may not work as expected and cause the execution to break which F12 has no problem at all. So just added new parameter to make cache false.
$.ajax({
cache: false,
});
Looks like IE specifically needs this to be false so that the AJAX and javascript activity run well.
'developer tip' 카테고리의 다른 글
PDO 준비 문이 SQL 주입을 방지하기에 충분합니까? (0) | 2020.10.02 |
---|---|
C #에서 현재 페이지의 URL을 얻는 방법 (0) | 2020.10.02 |
jQuery에게 무언가를 실행하기 전에 모든 이미지가로드 될 때까지 기다리도록 요청하는 공식적인 방법 (0) | 2020.10.02 |
jQuery로 요소에 대한 클래스 목록 가져 오기 (0) | 2020.10.02 |
하나를 수정하지 않고 Python에서 두 목록을 연결하는 방법은 무엇입니까? (0) | 2020.10.02 |