JavaScript console.log가 오류를 발생시킵니다. "주 스레드에서 동기 XMLHttpRequest가 사용되지 않습니다…"

Firefox 디버거를 사용하지 않고 다른 변수의 상태를 확인하기 위해 콘솔에 로그를 추가했습니다.

그러나 많은 장소에서하는 난이 추가 console.log내에서 main.js파일, 나 자신에 대신 내 사랑스러운 작은 손으로 쓴 메시지의 다음과 같은 오류가 나타납니다

기본 스레드의 동기 XMLHttpRequest는 최종 사용자의 경험에 해로운 영향으로 사용되지 않습니다. 도움이 더 필요하면 http://xhr.spec.whatwg.org/

console.log이 오류를 발생시키지 않는 코드 사용에 어떤 대안이나 래퍼를 추가 할 수 있습니까?

"잘못하고 있습니까?"

이것은 게으르고 있었고 반환되는 내용의 일부로 스크립트 태그를 포함했을 때 나에게 일어났습니다. 따라서 :

부분 HTML 내용 :

<div> 
 SOME CONTENT HERE
</div>
<script src="/scripts/script.js"></script> 

적어도 내 경우에는 xhr을 통해 HTML 콘텐츠를 반환하면 jQuery가 해당 스크립트를 가져 오기 위해 호출하게됩니다. 이 호출은로드를 계속하려면 스크립트가 필요하다고 가정하기 때문에 비동기 플래그가 false로 발생합니다.

이와 같은 상황에서는 일종의 바인딩 프레임 워크를 조사하고 JSON 객체를 반환하거나 백엔드 및 템플릿에 따라 스크립트로드 방법을 변경할 수 있습니다.

jQuerygetScript() 를 사용 하여 관련 스크립트를 가져올 수도 있습니다 . 여기에 바이올린이 있습니다. jQuery 예제의 간단한 사본이지만 스크립트가로드 될 때 경고가 표시되지 않습니다.

예

<script>
var url = "/scripts/script.js";
$.getScript(url);
</script>

http://jsfiddle.net/49tkL0qd/

비동기 플래그가 false로 설정된 주 스레드 내의 XMLHttpRequest 요청으로 인해 경고 메시지가 발생할 수 있습니다.

https://xhr.spec.whatwg.org/#synchronous-flag :

작업자 외부의 동기 XMLHttpRequest는 최종 사용자의 경험에 해로운 영향을 미치므로 웹 플랫폼에서 제거되고 있습니다. (이 과정은 오랜 시간이 걸린다.) JavaScript 전역 환경이 문서 환경 인 경우 개발자는 비동기 인수에 대해 false를 전달해서는 안된다. 사용자 에이전트는 개발자 도구에서의 이러한 사용에 대해 경고 할 것을 강력히 권장하며 InvalidAccessError 예외가 발생하면이를 실험 해 볼 수 있습니다.

미래의 방향은 작업자 스레드에서만 XMLHttpRequests를 허용하는 것입니다. 메시지는 그러한 영향을 경고하기위한 것입니다.

나는 또한 같은 문제에 직면했지만 async : true를 넣어서 해결할 수 있습니다. 나는 그것이 기본적으로 사실이라는 것을 알고 있지만 명시 적으로 쓸 때 작동합니다.

$.ajax({
   async: true,   // this will solve the problem
   type: "POST",
   url: "/Page/Method",
   contentType: "application/json",
   data: JSON.stringify({ ParameterName: paramValue }),
});

Visual Studio 2015/2017의 라이브 디버거에서 더 이상 사용되지 않는 호출이 포함 된 코드를 주입하고 있습니다.

때때로 아약스는 스크립트를로드해야하지만 문서 준비는 지연 스크립트가로드 될 때까지 될 수 있습니다.

jQuery는이 holdReady()기능을 지원 합니다.

사용법 예 :

$.holdReady(true);                              //set hold
function releaseHold() { $.holdReady(false); }  //callback to release hold
$.getScript('script.js', releaseHold);          //load script then release hold

실제 스크립트 로딩은 비동기 적이지만 ( 오류 없음 ) 문서의 준비가 완료된 후 나머지 JavaScript가 실행되면 효과는 동기화됩니다 .

이 고급 기능 은 일반적으로 DOM이 준비되어 있어도 ready 이벤트가 발생하기 전에 jQuery 플러그인과 같은 추가 JavaScript를로드하려는 동적 스크립트 로더에서 사용됩니다.

설명서 :
https://api.jquery.com/jquery.holdready

업데이트 2019 년 1 월 7 일

에서 JQMIGRATE :

jQuery.holdReady ()는 더 이상 사용되지 않습니다

원인 :jQuery.holdReady() 방법은 페이지의 글로벌 성능에 미치는 해로운 영향으로 인해 더 이상 사용되지 않습니다. 이 방법을 사용하면 페이지의 모든 코드가 장시간 초기화되지 않을 수 있습니다.

솔루션 : 모든 jQuery 준비 핸들러가 지연되지 않도록 페이지를 다시 작성하십시오. 예를 들어 실행이 안전 할 때 지연이 필요한 코드 만 늦게로드하여이를 수행 할 수 있습니다. 이 방법의 복잡성으로 인해 jQuery Migrate는 기능을 채우려 고 시도하지 않습니다. jQuery Migrate와 함께 사용되는 jQuery의 기본 버전에 더 이상 jQuery.holdReady()코드가 포함되어 있지 않으면 이 경고가 나타난 직후 코드가 실패합니다.

이 경고를 피하려면 다음을 사용하지 마십시오.

async: false

$ .ajax () 호출 중 하나. 이것은 더 이상 사용되지 않는 XMLHttpRequest의 유일한 기능입니다.

디폴트는

async: true

jQuery는 동기 XMLHTTPRequest를 더 이상 사용하지 않습니다.

@Webgr 부분 답변은 실제로 콘솔 로그 에서이 경고를 디버깅하는 데 도움이되었습니다. 답의 다른 부분은 너무 많은 다운 투표를 가져 왔습니다.

어쨌든, 여기 내 경우 에이 경고의 원인이 무엇인지 어떻게 알 수 있습니까?

1. Chrome 브라우저> Hit F12를 사용하여 DevTools 가져 오기
2. 서랍 메뉴를 엽니 다 (오른쪽 상단의 Chrome 3 세로 점)
3. 콘솔 아래에서 로그 XMLHttpRequests 확인 옵션
4. 오류가 발생한 페이지를 다시로드하고 콘솔 로그의 각 ajax 요청에서 발생하는 상황을 관찰하십시오.

제 경우에는 다른 플러그인이 2 개의 .js 라이브러리를 로드했습니다. 각 ajax 호출 후 하고 있었으며 절대 필요하지는 않았습니다. 악성 플러그인을 비활성화하면 로그에서 경고가 제거되었습니다. 이 시점에서 문제를 직접 해결하거나 (예 : 특정 페이지 나 이벤트에 대한 스크립트로드 제한-여기에 대한 답변이 너무 구체적 임) 타사 플러그인 개발자에게 문의하여 문제를 해결할 수 있습니다.

이것이 누군가를 돕기를 바랍니다.

나는 모든 인상적인 답변을보고있다. 나는 그가 문제를 일으키는 코드를 제공해야한다고 생각합니다. 아래 예제에서 page.php의 jquery에 링크 할 스크립트가있는 경우 해당 통지를받습니다.

$().ready(function () {
    $.ajax({url: "page.php",
        type: 'GET',
        success: function (result) {
        $("#page").html(result);
   }});
 });

다음과 같은 경우 이러한 경고가 나타납니다.

1)을 포함하는 file1 <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>. 페이지에 입력 필드가 있습니다. 입력 필드에 값을 입력하고 버튼을 클릭하십시오. Jquery는 외부 PHP 파일로 입력을 보냅니다.

2) 외부 PHP 파일에는 jquery가 포함되어 있으며 외부 PHP 파일에는 i도 포함되어 있습니다 <script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>. 이 경고가 표시되면.

<script type="text/javascript" src="/javascript/jquery-1.10.2.js"></script>외부 PHP 파일에서 제거 되었으며 경고없이 작동합니다.

첫 번째 파일 (file1)을로드하는 것을 이해함에 따라로드 jquery-1.10.2.js되고 페이지가 다시로드되지 않으므로 (jquery 사용하여 외부 PHP 파일로 데이터를 전송 $.post) jquery-1.10.2.js계속 존재합니다. 다시로드 할 필요가 없습니다.

"example.com/files/text.txt"와 같은 쿼리에서 URL을 설정할 때이 예외가 발생했습니다. URL을 " http://example.com/files/text.txt "로 변경 했는데이 예외는 사라졌습니다.

그리고 하나의 can.js 스크립트를 다른 것 안에 포함시키는 예외가 있습니다.

{{>anotherScript}}

MVC 응용 프로그램에서 PartialView () 대신 View ()를 반환하는 메서드로 Kendo Window를 열었 으므로이 경고가 발생했습니다. View ()가 페이지의 모든 스크립트를 다시 검색하려고했습니다.

ZF2에서 나에게 일어난 일입니다. 모달 콘텐츠를로드하려고했지만 레이아웃을 비활성화하는 것을 잊었습니다.

그래서:

$viewModel = new ViewModel();
$viewModel->setTerminal(true);
return $viewModel;

@Nycen과 마찬가지로 Cloudfare에 대한 링크로 인해이 오류가 발생했습니다. 내 선택은 Select2 플러그인이었습니다.

그것을 고치기 위해 방금 제거했습니다.

 src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"

오류가 사라졌습니다.

1. Chrome에서 press F12
2. 개발 도구->를 누릅니다 F1.
3. 설정-> 일반 "Don't show chrome Data Saver warning"- > 외관을 참조하십시오 : -이 확인란을 설정하십시오.
4. 설정-> 일반 "Log XMLHTTPRequest"- > 콘솔을 참조하십시오 : -이 확인란도 설정하십시오.

즐겨

이것은 내 경우에 해결됩니다.

JS

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

이 답변은이 링크에 삽입되었습니다

/programming/28322636/synchronous-xmlhttprequest-warning-and-script

필자의 경우 이는 Cloudflare에서 제공하는 "CDNJS Selections"앱의 일부인 flexie 스크립트 로 인해 발생했습니다. .

Cloudflare에 따르면 "이 앱은 2015 년 3 월에 더 이상 사용되지 않습니다." 나는 그것을 끄고 메시지가 즉시 사라졌다.

https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com 을 방문하여 앱에 액세스 할 수 있습니다.

NB :이이 스레드에 대한 내 대답의 복사 동기 XMLHttpRequest의 경고와 <스크립트> (I 두 솔루션을 찾고 때를 방문)

나는 이것을 아래 단계로 고쳤다.

1. CDN 스크립트를 확인하고 로컬로 추가하십시오.
2. 스크립트 포함을 헤더 섹션으로 이동하십시오.

내 특별한 경우에는 Rails 부분을 렌더링하지 않고 태그의 render layout: false모든 스크립트를 포함하여 전체 레이아웃을 다시 렌더링 하지 않았습니다 <head>. render layout: false컨트롤러 작업에 추가 하면 문제가 해결되었습니다.

나에게 문제는 OK 요청에서 ajax 응답이 테이블과 같은 형식이 지정된 HTML 문자열 일 것으로 예상했지만이 경우 서버에서 요청에 문제가 발생하여 오류 페이지로 리디렉션되는 것입니다. 따라서 오류 페이지의 HTML 코드를 반환했습니다 ( <script어딘가에 태그가 있습니다. 콘솔이 아약스 응답을 기록했으며 그 시점이 내가 예상 한 것이 아니라는 것을 깨달았을 때 디버깅을 계속했습니다.

2014 년에 제기 된 질문과 2019 년이므로 더 나은 옵션을 찾는 것이 좋습니다.

fetchJavascript에서 api 를 사용 하면 더 많은 유연성을 제공 할 수 있습니다.

예를 들어,이 코드를 참조하십시오

fetch('./api/some.json')
    .then((response) => {
        response.json().then((data) => { 
            ... 
        });
    })
    .catch((err) => { ... });