복붙노트

[JQUERY] 어떻게 브라우저 창 닫기 이벤트를 캡처?

JQUERY

어떻게 브라우저 창 닫기 이벤트를 캡처?

해결법

  1. 1.사용자가 어떤 이유로 페이지를 잎마다 beforeunload 이벤트가 발생합니다.

    사용자가 어떤 이유로 페이지를 잎마다 beforeunload 이벤트가 발생합니다.

    사용자가 상자 또는 북마크를 검색, 양식을 제출 링크를 클릭, 창 (또는 탭) 종료, 또는 주소 표시 줄을 사용하여 새 페이지로 이동하는 경우 예를 들어, 해고 될 것입니다.

    다음 코드를 사용하여 양식을 제출하고 (다른 프레임에서 제외) 하이퍼 링크를 제외 할 수 있습니다 :

    var inFormOrLink;
$('a').on('click', function() { inFormOrLink = true; });
$('form').on('submit', function() { inFormOrLink = true; });

$(window).on("beforeunload", function() { 
    return inFormOrLink ? "Do you really want to close?" : null; 
})

    1.7보다 이전 버전의 jQuery 버전의 경우,이 시도 :

    var inFormOrLink;
$('a').live('click', function() { inFormOrLink = true; });
$('form').bind('submit', function() { inFormOrLink = true; });

$(window).bind("beforeunload", function() { 
    return inFormOrLink ? "Do you really want to close?" : null; 
})

    라이브 방법은 새 폼을 추가 그렇다면, 제출 이벤트 작동하지 않습니다, 당신은뿐만 아니라 그것을 핸들러를 바인딩해야합니다.

    다른 이벤트 핸들러가 제출 또는 탐색 취소하면 윈도우가 실제로 나중에 닫혀있는 경우, 당신은 확인 프롬프트 잃지 않습니다. 당신은 제출을 클릭 이벤트의 시간을 기록하고 beforeunload 더 나중에 몇 초보다 발생하는 경우 확인하여 그 문제를 해결 할 수있다.

  2. 2.어쩌면 단지 형태의 내의 beforeunload 이벤트 처리기를 바인딩 해제는 이벤트 핸들러를 제출

    어쩌면 단지 형태의 내의 beforeunload 이벤트 처리기를 바인딩 해제는 이벤트 핸들러를 제출

    jQuery('form').submit(function() {
    jQuery(window).unbind("beforeunload");
    ...
});

  3. 3.크로스 브라우저 솔루션 (크롬 21에서 테스트, IE9, FF15), Slaks '코드의 약간 불통 버전이 다음과 같은 코드를 사용하는 것이 좋습니다 :

    크로스 브라우저 솔루션 (크롬 21에서 테스트, IE9, FF15), Slaks '코드의 약간 불통 버전이 다음과 같은 코드를 사용하는 것이 좋습니다 :

    var inFormOrLink;
$('a').live('click', function() { inFormOrLink = true; });
$('form').bind('submit', function() { inFormOrLink = true; });

$(window).bind('beforeunload', function(eventObject) {
    var returnValue = undefined;
    if (! inFormOrLink) {
        returnValue = "Do you really want to close?";
    }
    eventObject.returnValue = returnValue;
    return returnValue;
});

    참고 파이어 폭스 4 있기 때문에, 메시지는 "당신이 정말로 닫으시겠습니까?"라는 표시되지 않습니다. FF는 일반적인 메시지를 표시합니다. https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload에 참고 사항을 참조하십시오

  4. 4.

    window.onbeforeunload = function () {
    return "Do you really want to close?";
};

  5. 5.desm의 코드를 약간 불통 버전이 자기를위한 더 나은 선택 함께 다음 코드를 사용하여, 여러 가지 이유로 앵커 태그를 사용 고려 Telerik (예 : RadComboBox)과 DevExpress의 같은 타사 컨트롤이 잘 작동 해결책을 앵커 태그를 대상으로 :

    desm의 코드를 약간 불통 버전이 자기를위한 더 나은 선택 함께 다음 코드를 사용하여, 여러 가지 이유로 앵커 태그를 사용 고려 Telerik (예 : RadComboBox)과 DevExpress의 같은 타사 컨트롤이 잘 작동 해결책을 앵커 태그를 대상으로 :

    var inFormOrLink;
$('a[href]:not([target]), a[href][target=_self]').live('click', function() { inFormOrLink = true; });
$('form').bind('submit', function() { inFormOrLink = true; });

$(window).bind('beforeunload', function(eventObject) {
    var returnValue = undefined;
    if (! inFormOrLink) {
        returnValue = "Do you really want to close?";
    }
    eventObject.returnValue = returnValue;
    return returnValue;
});

  6. 6.내 대답은 간단 벤치 마크를 제공하는 것을 목적으로한다.

    내 대답은 간단 벤치 마크를 제공하는 것을 목적으로한다.

    @SLaks 대답을 참조하십시오.

    $(window).on("beforeunload", function() { 
    return inFormOrLink ? "Do you really want to close?" : null; 
})

    사용자가 페이지 (X 버튼 또는 CTRL + W) 종료 할 때마다, 브라우저는 불명확하지만, 주어진 beforeunload 코드를 실행한다. 유일한 예외는 사용자의 응답 할 때까지 대기 한 확인 상자 (귀국일 '당신이 정말로 닫으시겠습니까?)입니다.

    크롬 : 이초. 파이어 폭스 : ∞ (또는 더블 클릭, 또는 가까운에 힘) 가장자리 : ∞ (또는 더블 클릭) 탐색기 11 : 0초. 사파리 : TODO

    우리는이를 테스트하는 데 사용하는 :

    그것이 무엇을하면 브라우저 종료 비방의 페이지 (동기) 전에 가능한 한 많은 요청으로 보내는 것입니다.

    <html>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
    function request() {
        return $.ajax({
            type: "GET",
            url: "http://localhost:3030/" + Date.now(),
            async: true
        }).responseText;
    }
    window.onbeforeunload = () => {
        while (true) {
            request();
        }
        return null;
    }
    </script>
</body>
</html>

    크롬 출력 :

    GET /1480451321041 404 0.389 ms - 32  
GET /1480451321052 404 0.219 ms - 32  
...  
GET /hello/1480451322998 404 0.328 ms - 32

1957ms ≈ 2 seconds // we assume it's 2 seconds since requests can take few milliseconds to be sent.

  7. 7.나는 Slaks 응답을 사용하지만입니다 onbeforeunload에 ReturnValue는 문자열로 구문 분석 확인서가 브라우저의 상자에 다음이 표시되기 때문에, 그대로 작동하지 않는 그. 실제 값이 표시된 그래서, "true"로있다.

    나는 Slaks 응답을 사용하지만입니다 onbeforeunload에 ReturnValue는 문자열로 구문 분석 확인서가 브라우저의 상자에 다음이 표시되기 때문에, 그대로 작동하지 않는 그. 실제 값이 표시된 그래서, "true"로있다.

    그냥 반환을 사용하여 일했다. 여기 내 코드입니다

    var preventUnloadPrompt;
var messageBeforeUnload = "my message here - Are you sure you want to leave this page?";
//var redirectAfterPrompt = "http://www.google.co.in";
$('a').live('click', function() { preventUnloadPrompt = true; });
$('form').live('submit', function() { preventUnloadPrompt = true; });
$(window).bind("beforeunload", function(e) { 
    var rval;
    if(preventUnloadPrompt) {
        return;
    } else {
        //location.replace(redirectAfterPrompt);
        return messageBeforeUnload;
    }
    return rval;
})

  8. 8.아마 당신은 OnSubmit를 처리하고 나중에입니다 onbeforeunload 핸들러에 확인하는 것이 플래그를 설정할 수 있습니다.

    아마 당신은 OnSubmit를 처리하고 나중에입니다 onbeforeunload 핸들러에 확인하는 것이 플래그를 설정할 수 있습니다.

  9. 9.

    jQuery(window).bind(
                    "beforeunload",
                      function (e) {
                          var activeElementTagName = e.target.activeElement.tagName;
                          if (activeElementTagName != "A" && activeElementTagName != "INPUT") {
                              return "Do you really want to close?";
                          }
                      })

  10. 10.불행하게도, 그것은 다시로드, 새로운 페이지 리디렉션 또는 브라우저인지 가까운 이벤트가 트리거됩니다. 대안은 이벤트를 트리거 ID를 잡을이며이 형태 해달라고 트리거 어떤 기능이며 양식의 ID가 아닌 경우 다음 때 페이지가 닫히고하고 싶은 일을합니다. 즉 직접 가능하며 지루한 있는지 확실하지 않다.

    불행하게도, 그것은 다시로드, 새로운 페이지 리디렉션 또는 브라우저인지 가까운 이벤트가 트리거됩니다. 대안은 이벤트를 트리거 ID를 잡을이며이 형태 해달라고 트리거 어떤 기능이며 양식의 ID가 아닌 경우 다음 때 페이지가 닫히고하고 싶은 일을합니다. 즉 직접 가능하며 지루한 있는지 확실하지 않다.

    고객이 탭을 닫기 전에 당신은 몇 가지 작은 일을 할 수있다. 자바 스크립트는 브라우저 탭 닫기 / 닫기 브라우저를 감지하지만, 작업 목록이 크다과 이전 탭 닫히고이 완료되면 당신은 무력입니다. 당신은 그것을 시도하지만 내 경험이 donot과에 따라 달라질 수 있습니다.

    window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";
  /* Do you small action code here */
  (e || window.event).returnValue = confirmationMessage; //Gecko + IE
  return confirmationMessage;                            //Webkit, Safari, Chrome
});

    https://developer.mozilla.org/en-US/docs/Web/Reference/Events/beforeunload?redirectlocale=en-US&redirectslug=DOM/Mozilla_event_reference/beforeunload

  11. 11.(나는 그것이 따라서 beforeunload의 트리거 않는 가정으로) 양식 제출 다른 페이지에 걸린다면, 당신은 아약스 전화로 양식 제출을 변경을 시도 할 수 있습니다. 그들은 양식을 제출하고 당신이 원하는대로 당신이 당신의 beforeunload 바인딩 코드를 사용할 수없는 경우이 방법은, 그들은 당신의 페이지를 떠나지 않을 것입니다.

    (나는 그것이 따라서 beforeunload의 트리거 않는 가정으로) 양식 제출 다른 페이지에 걸린다면, 당신은 아약스 전화로 양식 제출을 변경을 시도 할 수 있습니다. 그들은 양식을 제출하고 당신이 원하는대로 당신이 당신의 beforeunload 바인딩 코드를 사용할 수없는 경우이 방법은, 그들은 당신의 페이지를 떠나지 않을 것입니다.

  12. 12.내 문제 : 제출하기 (클릭)의 홀수가 있었다 경우 'onbeforeunload'이벤트는 트리거 될 것이다. 나는 내 솔루션 작업을 위해 매우 유사한 스레드의 솔루션의 조합을 가지고 있었다. 물론 내 코드를 말하는 것입니다.

    내 문제 : 제출하기 (클릭)의 홀수가 있었다 경우 'onbeforeunload'이벤트는 트리거 될 것이다. 나는 내 솔루션 작업을 위해 매우 유사한 스레드의 솔루션의 조합을 가지고 있었다. 물론 내 코드를 말하는 것입니다.

    <!--The definition of event and initializing the trigger flag--->


$(document).ready(function() {
updatefgallowPrompt(true);
window.onbeforeunload = WarnUser;   
}

function WarnUser() {
var allowPrompt = getfgallowPrompt();
    if(allowPrompt) {
    saveIndexedDataAlert();
    return null;
    } else {
        updatefgallowPrompt(true);
        event.stopPropagation
    }
}

<!--The method responsible for deciding weather the unload event is triggered from submit or not--->
function saveIndexedDataAlert() {
    var allowPrompt = getfgallowPrompt();
    var lenIndexedDocs = parseInt($('#sortable3 > li').size()) + parseInt($('#sortable3 > ul').size());

    if(allowPrompt && $.trim(lenIndexedDocs) > 0) {
        event.returnValue = "Your message";
    } else {
        event.returnValue = "   ";
        updatefgallowPrompt(true);
    }
}

<!---Function responsible to reset the trigger flag---->
$(document).click(function(event) {  
$('a').live('click', function() { updatefgallowPrompt(false); });
 });

<!--getter and setter for the flag---->
function updatefgallowPrompt (allowPrompt){ //exit msg dfds
    $('body').data('allowPrompt', allowPrompt); 
}   

function getfgallowPrompt(){        
    return $('body').data('allowPrompt');   
}

  13. 13.jQuery를 1.7으로, .live () 메소드는 추천된다. 이벤트 핸들러를 첨부) (CSTE 연구진 사용합니다. jQuery를 이전 버전의 사용자) (.live에 우선 .delegate ()를 사용한다

    jQuery를 1.7으로, .live () 메소드는 추천된다. 이벤트 핸들러를 첨부) (CSTE 연구진 사용합니다. jQuery를 이전 버전의 사용자) (.live에 우선 .delegate ()를 사용한다

    $(window).bind("beforeunload", function() {
    return true || confirm("Do you really want to close?"); 
});

    전체 또는 링크

    $(window).unbind();

  14. 14.이 시도

    이 시도

    window.onbeforeunload = function ()
{       
    if (pasteEditorChange) {
        var btn = confirm('Do You Want to Save the Changess?');
           if(btn === true ){
               SavetoEdit();//your function call
           }
           else{
                windowClose();//your function call
           }
    }  else { 
        windowClose();//your function call
    }
};

  15. 15.그냥 확인 ...

    그냥 확인 ...

    function wopen_close(){
  var w = window.open($url, '_blank', 'width=600, height=400, scrollbars=no, status=no, resizable=no, screenx=0, screeny=0');
  w.onunload = function(){
    if (window.closed) {
       alert("window closed");
    }else{ 
       alert("just refreshed");
    }
  }
}

  16. 16.

    var validNavigation = false;
            jQuery(document).ready(function () {

                wireUpEvents();
            });

            function endSession() {
                // Browser or broswer tab is closed
                // Do sth here ...
                alert("bye");
            }

            function wireUpEvents() {
                /*
                * For a list of events that triggers onbeforeunload on IE
                * check http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx
                */
                window.onbeforeunload = function () {
                    debugger
                    if (!validNavigation) {
                        endSession();
                    }
                }

                // Attach the event keypress to exclude the F5 refresh
                $(document).bind('keypress', function (e) {
                    debugger
                    if (e.keyCode == 116) {
                        validNavigation = true;
                    }
                });

                // Attach the event click for all links in the page
                $("a").bind("click", function () {
                    debugger
                    validNavigation = true;
                });

                // Attach the event submit for all forms in the page
                $("form").bind("submit", function () {
                    debugger
                    validNavigation = true;
                });

                // Attach the event click for all inputs in the page
                $("input[type=submit]").bind("click", function () {
                    debugger
                    validNavigation = true;
                });

            }`enter code here`

  17. 17.나를 위해 일한 다음,

    나를 위해 일한 다음,

     $(window).unload(function(event) {
    if(event.clientY < 0) {
        //do whatever you want when closing the window..
    }
 });

    18. from https://stackoverflow.com/questions/1631959/how-to-capture-the-browser-window-close-event by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 jQuery를 통해 선택되는 라디오 버튼을 알 수 있는가?  (0) 2020.09.24
[JQUERY] 제출 페이지를 새로 고침 중지 양식  (0) 2020.09.24
[JQUERY] jQuery로 왼쪽 및 오른쪽 마우스 클릭을 구별하는 방법  (0) 2020.09.24
[JQUERY] 모바일 jQuery를 동적으로 추가 된 콘텐츠의 마크 업 향상  (0) 2020.09.24
[JQUERY] 이미지가 jQuery를 함께 (오류)를로드하지 않은 경우 확인  (0) 2020.09.24
,

티스토리툴바