[javascript] 브라우저 또는 탭 닫기 감지

JAVASCRIPT / 글쓴이

브라우저 또는 브라우저 탭이 닫혀 있는지 확인하지만 링크 클릭으로 인한 것이 아닌지를 감지하는 브라우저 간 JavaScript / jQuery 코드가 있습니까?

답변

내가 당신을 올바르게 얻는다면, 당신은 언제 탭 / 창이 효과적으로 닫히는 지 알고 싶습니다. 글쎄, AFAIK는 Javascript그런 종류의 물건을 감지하는 유일한 방법 은 onunload& onbeforeunload이벤트입니다.

불행하게도 (또는 운 좋게도), 해당 이벤트는 link또는 브라우저 뒤로 버튼을 통해 사이트를 떠날 때 발생 합니다. 그래서 이것은 내가 줄 수있는 가장 좋은 대답입니다. 나는 당신이 기본적으로 순수한 close자바 스크립트를 감지 할 수 있다고 생각하지 않습니다 . 내가 틀렸다면 바로 수정하십시오.

답변

에서 파이어 폭스 문서

어떤 이유로 웹킷 기반 브라우저는 대화 상자의 스펙을 따르지 않습니다. 거의 교차 작업 예는 아래 예와 비슷합니다.

window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

  (e || window.event).returnValue = confirmationMessage; //Gecko + IE
  return confirmationMessage;                            //Webkit, Safari, Chrome
});

모든 브라우저를 처리하는 예제입니다.

답변

간단한 솔루션

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

답변

<body onbeforeunload="ConfirmClose()" onunload="HandleOnClose()">

var myclose = false;

function ConfirmClose()
{
    if (event.clientY < 0)
    {
        event.returnValue = 'You have closed the browser. Do you want to logout from your application?';
        setTimeout('myclose=false',10);
        myclose=true;
    }
}

function HandleOnClose()
{
    if (myclose==true)
    {
        //the url of your logout page which invalidate session on logout 
        location.replace('/contextpath/j_spring_security_logout') ;
    }
}

// 탭이 하나만있는 탭 또는 브라우저를 닫는 경우 IE7에서 작동합니다.

답변

브라우저 나 탭을 닫을 때 사용자를 자동으로 로그 아웃해야하지만 사용자가 다른 링크를 탐색 할 때는 아닙니다. 또한 그럴 때 확인 메시지를 표시하고 싶지 않았습니다. 잠시 동안, 특히 IE와 Edge 에서이 문제를 해결 한 후이 답변으로 접근 방식을 기반으로 한 후에 IE 11, Edge, Chrome 및 Firefox에서 작업을 확인한 결과가 끝났습니다 .

먼저 beforeunloadJS 의 이벤트 핸들러에서 서버의 카운트 다운 타이머를 시작하십시오 . IE와 Edge가 제대로 작동하려면 ajax 호출이 동기식이어야합니다. 또한 return;확인 대화 상자가 다음과 같이 표시되지 않도록 사용해야 합니다.

    window.addEventListener("beforeunload", function (e) {
      $.ajax({
          type: "POST",
          url: startTimerUrl,
          async: false
      });
      return;
    });

타이머를 시작하면 cancelLogout플래그가 false로 설정 됩니다. 사용자가 페이지를 새로 고치거나 다른 내부 링크로 이동 cancelLogout하면 서버 의 플래그가 true 로 설정됩니다 . 타이머 이벤트가 경과하면 cancelLogout플래그를 확인하여 로그 아웃 이벤트가 취소되었는지 확인합니다 . 타이머가 취소 된 경우 타이머가 중지됩니다. 브라우저 나 탭이 닫혀 있으면 cancelLogout플래그가 거짓으로 유지됩니다 되고 이벤트 핸들러는 사용자를 로그 아웃합니다.

구현 참고 사항 : ASP.NET MVC 5를 사용하고 있으며 재정의 된 Controller.OnActionExecuted()메소드 에서 로그 아웃을 취소하고 있습니다.

답변

죄송합니다, 기존 답변 중 하나에 의견을 추가 할 수 없었지만 일종의 경고 대화 상자를 구현하려는 경우 이벤트 핸들러 함수에 인수-이벤트가 있다고 언급하고 싶었습니다. 귀하의 경우 event.preventDefault ()를 호출하여 페이지를 자동으로 떠나지 못하게하고 자체 대화 상자를 발행 할 수 있습니다. 표준 추악하고 안전하지 않은 alert ()을 사용하는 것보다 이것이 더 나은 옵션이라고 생각합니다. 나는 kendoWindow 객체 (kendoGrid 및 kendoEditor를 제외하고 거의 완전히 오픈 소스 인 Telele의 Kendo UI)를 기반으로 한 자체 대화 상자 세트를 개인적으로 구현했습니다. jQuery UI에서 대화 상자를 사용할 수도 있습니다. 그러나 이러한 것은 비동기식이므로 모든 버튼의 onclick 이벤트에 핸들러를 바인딩해야하지만 이는 구현하기가 매우 쉽습니다.

그러나 실제 종료 이벤트가 없다는 것은 끔찍한 일이라는 데 동의합니다. 예를 들어 실제 종료의 경우에만 백엔드에서 세션 상태를 재설정하려는 경우 문제가됩니다.

답변

유사한 작업의 sessionStorage경우 브라우저 탭을 닫을 때까지 로컬로 데이터를 저장하는 데 사용할 수 있습니다 .

sessionStorage하나의 세션 (브라우저 탭을 닫을 때 데이터가 삭제됩니다)에 대한 오브젝트 데이터를 저장합니다. ( W3 스쿨 )

이것은 내 펜 입니다.

<div id="Notice">
    <span title="remove this until browser tab is closed"><u>dismiss</u>.</span>
</div>
<script>
    $("#Notice").click(function() {
     //set sessionStorage on click
        sessionStorage.setItem("dismissNotice", "Hello");
        $("#Notice").remove();
    });
    if (sessionStorage.getItem("dismissNotice"))
    //When sessionStorage is set Do stuff...
        $("#Notice").remove();
</script>