code

페이지 로드가 완료되기 전에 사용자가 페이지를 떠난 경우 jQuery agaxError() 핸들러가 실행됨

starcafe 2023. 8. 11. 22:26
반응형

페이지 로드가 완료되기 전에 사용자가 페이지를 떠난 경우 jQuery agaxError() 핸들러가 실행됨

jQuery의 글로벌 agaxError() 핸들러를 사용하여 사용자에게 AJAX 오류를 경고합니다.

$(document).ajaxError(function() {  
    $("There was a network or server error. Please try again later.").dialog({  
        title: "Error",  
        modal: true,  
        resizable: false,  
        buttons: { 'Ok': function() { (this).dialog("close"); } }  
    });  
});  

안타깝게도 이 글로벌 오류 처리기는 로드가 완료되기 전에 페이지를 떠난 경우에도 실행됩니다.다음은 오류를 재현하는 단계입니다.

  1. 사용자는 AJAX를 통해 로드되는 요소가 포함된 페이지 A를 방문합니다.
  2. 페이지 A의 AJAX 요소가 로드되기 시작합니다.
  3. 사용자는 페이지 A의 AJAX 요소 로드가 완료되기 전에 페이지 B를 방문하기 위해 링크를 클릭합니다.
  4. 브라우저가 페이지 B로 리디렉션되기 전에 오류 대화 상자가 잠깐 나타납니다.

사용자가 새 페이지를 방문하여 오류가 직접 발생할 때 agaxError()가 트리거되지 않도록 하는 방법을 알고 있습니까?

업데이트: 의견에 제안 사항을 반영한 후 지금 제 코드는 다음과 같습니다.

// I added a 3 second delay to our error dialog, enough time
// for the user to leave for a new page:
$(document).ajaxError(function() {
    setTimeout(my_error_handler, 3000);
});

// Warn user before leaving page if AJAX is still loading.
// Not sure I'll keep this:
$(document).ajaxStart(function() {
    ajaxing = true;
});

$(document).ajaxStop(function() {
    ajaxing = false;
});

window.onbeforeunload = function() {
    if (typeof(ajaxing) != 'undefined' && ajaxing) {
        return "Page elements are still loading!";
    }
};

예, 사용자가 다른 페이지로 이동하면 xhr이 중단되고, 이는 사실상 통신에 실패하는 것입니다.해결책은 수신기를 등록하는 것입니다.onbeforeunload이벤트, 바인딩 해제ajaxError거기서 기본적으로 말한다: 사용자가 페이지를 떠나려고 하기 때문에, 나는 뒤따를 수 있는 아약스 오류에 대해 알리고 싶지 않습니다.

그러나 Gmail과 같은 일부 사이트는 반대로 진행됩니다. 일부 Ajax 요청이 보류 중인 상태에서 페이지를 벗어나려고 하면 일부 프로세스가 아직 실행 중이라는 메시지가 표시되고 사용자가 요청이 완료될 때까지 사이트에 남아 있을 것인지 아니면 계속 이동할 것인지 결정할 수 있습니다.

위의 David Hedlund의 답변을 바탕으로 저에게 맞는 코드는 다음과 같습니다.

//enable global ajax error handling
$(document).ajaxError(function (event, request, settings) {
    //your error handling code here
});

//user leaving page so ignore any unfinished ajax loads
$(window).bind('beforeunload', function () {
    $(document).unbind('ajaxError');
});

알겠습니다.'ajaxError'jquery agaxError 설명서의 주석 섹션에 있는 사양입니다.묶어야 했어요beforeunload로.$(window)크롬을 지원하기 위해 (IE가 문서로 잘 작동하고 있었습니다..ajaxError내가 묶을 때 발사되지 않았습니다.$(window)이것이 바로 제가 이 창/문서 솔루션을 가지고 있는 이유입니다.

언급URL : https://stackoverflow.com/questions/1906023/jquery-ajaxerror-handler-fires-if-user-leaves-page-before-page-finishes-loadin

반응형