2015-02-04 1 views
52

:동기 XMLHttpRequest의 경고와 내가 경고 메시지를 받고 있어요 <script>

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/ .

$.html() 방법을 사용하여, HTML에 주입하는 스크립트를 (즉, 지역 src있다)가 포함 된 비동기 AJAX 요청을 수행. 주어진 스크립트가 async="async"을 포함하도록 변경했지만 경고 메시지가 여전히 남아 있습니다.

내가 (문제가 어디에서 오는지 그 아마) 내 asyncfalse로 설정되어 jQuery.ajaxTransport (http://code.jquery.com/jquery-1.10.0.js, # 8663)에서 JQuery와 AJAX 호출을 통해 처리됩니다 <script>을 추가 발견하기 위해 문제를 디버깅 시작했습니다.

이제 어떻게해야합니까?

메시지는 Firefox뿐만 아니라 최신 버전의 Chrome에도 나타납니다. 내가 jsfiddle에 테스트 케이스를 제공 할 수는 없지만


, 여기에 문제를 표시하는 테스트 케이스의 :

인 test.html를

<html> 
<body> 
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script> 
<script> 
$(document).ready(function(){ 
    $.ajax({ 
     url: '/response.html', 
     success: function(response){ 
      $(document.body).html(response); 
     } 
    }) 
}); 
</script> 
</body> 
</html> 

response.html

<script type="text/javascript" src="/json.js" async="async"></script> 

json.js

console.log('hi'); 

AJAX 요청이 경고를 트리거 할 필요가 없습니다 - 모든 <script>

test2.html

<html> 
<body> 
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script> 
<script> 
$(document).ready(function(){ 
    $(document.body).html('<script type="text/javascript" src="/json.js" async="async"><\/script>'); 
}); 
</script> 
</body> 
</html> 

그것은이 고정 된 것을 주목할 필요가 삽입되어 필요하다, https://github.com/jquery/jquery/issues/2060

+0

일부 유사 [질문] (http://stackoverflow.com/q/27736186/4043409). – Gideon

+0

안녕하세요, 크롬 및 파이어 폭스의 whatsapp 버전에서이 사실을 알 수 있습니까? – Raj

답변

50

UPDATE: This has been fixed in jQuery 3.x. If you have no possibility to upgrade to any version above 3.0, you could use following snippet BUT be aware that now you will lose sync behaviour of script loading in the targeted content.

당신은 true에 XHR 요청을 명시 적으로 비동기 옵션을 설정, 그것을 고칠 수 :

$.ajaxPrefilter(function(options, original_Options, jqXHR) { 
    options.async = true; 
}); 
+21

비록 이것이 실제로는 을 비동기로 검색 할지라도 스크립트가 HTML을 포함하는 뒤에로드되기 때문에 예기치 않은 동작을 일으킬 수 있습니다. 따라서 HTML에 외부 파일 내에서 선언 된 함수에 대한 호출이 포함되어 있으면 작동하지 않을 수 있습니다. 어제 나에게 일어났습니다 – valepu

+0

AngularJs를 사용하고 있는데 같은 오류가 발생했습니다. 내부에서 무엇을 사용하고 있는지 확실하지 않지만 get 및 post 요청에 $ http를 사용하고 있습니다. –

+0

Shiny in R은 어떻게 사용할 수 있습니까? –

6

심지어 latest jQuery에도 해당 행이 있으므로 이 옵션을 사용할 수 있습니다

  • 변경합니다 jQuery를 자신의 소스를 -하지만 어쩌면 그 사용
  • 경고와 라이브를위한 좋은 이유가,이 옵션을 하지 되지 않는 사용되지 않는 것을 유의하시기 바랍니다. 그것은이 기능

내가 2 번이 경우에 행동의 가장 합리적인 코스입니다 생각을 사용하지 않도록 , 당신의 코드를 변경

  • .

    아직 시도하지 않았다면 이것을 시도하십시오 : $.ajaxSetup({async:true});,하지만 작동하지 않을 것이라고 생각합니다.

  • +0

    '_evalUrl'은'async' 설정을 명시 적으로 지정하기 때문에 그렇지 않습니다. – raina77ow

    +0

    그러나 어떤 이유로 든 jquery가 ajax를 통해 '

    4

    나는이 오류 메시지에 의해 퍼진를 방문하여 응용 프로그램에 액세스 할 수 있습니다. 실제 문제는 success 메소드를 사용하고있는 것으로 나타났습니다. 이것을 done으로 변경하고 경고가 사라졌습니다.

    done: function(response) { ... }

    +0

    나는 나를 위해 아무것도 바뀌지 않았다 ... – ThePhi

    +0

    나는 당신을 위해서도 아무것도 변하지 않았다. –

    +0

    ... 나는 의미했다 : "IT는 아무것도 바뀌지 않았다". 죄송합니다 ... – ThePhi

    2

    방금이

    를 시도 짖는 소리

    $(document.body).html('<script type="text/javascript" src="/json.js" async="async"><\/script>'); 
    

    할 해달라고 스크립트를로드해야하는 경우 :

    success: function(response) { ... }

    로 대체

    +1

    JS 스크립트의 캐싱을 효과적으로 막을 수 있습니다. 그러나'getTime()'비트를 제거하면 작동합니다 (jQuery를 사용하지 않고 파싱되지 않으므로 버그가 발생하지 않음). 비트) – eithed

    관련 문제