Programing

브라우저 닫기 이벤트 감지 시도

lottogame 2020. 12. 11. 07:42
반응형

브라우저 닫기 이벤트 감지 시도


jQuery 또는 JavaScript를 통해 브라우저 닫기 이벤트를 감지하기 위해 많은 방법을 시도했습니다. 하지만 안타깝게도 종가를 감지하지 못했습니다. onbeforeunloadonunload방법은 작동하지 않습니다.

어떻게 창 감지 않는 close, unload또는 beforeunload이벤트를?


이 코드를 사용해 보셨습니까?

window.onbeforeunload = function (event) {
    var message = 'Important: Please click on \'Save\' button to leave this page.';
    if (typeof event == 'undefined') {
        event = window.event;
    }
    if (event) {
        event.returnValue = message;
    }
    return message;
};

$(function () {
    $("a").not('#lnkLogOut').click(function () {
        window.onbeforeunload = null;
    });
    $(".btn").click(function () {
        window.onbeforeunload = null;
});
});

두 번째 기능은 #lnkLogOut.btn요소 를 클릭 할 때 메시지가 표시되지 않도록하는 선택 사항 입니다.

한 가지 더, 사용자 지정 프롬프트는 Firefox에서 작동하지 않습니다 (최신 버전에서도). 이에 대한 자세한 내용은 스레드 로 이동하십시오 .


다양한 기사를 참조하고 시행 착오 테스트를 수행 한 후 마침내 제게 완벽하게 작동하는 아이디어를 개발했습니다.

아이디어는 브라우저를 닫으면 트리거되는 언로드 이벤트를 감지하는 것이 었습니다. 이 경우 마우스는 창 밖으로 나와 닫기 버튼 ( 'X')을 가리 킵니다 .

$(window).on('mouseover', (function () {
    window.onbeforeunload = null;
}));
$(window).on('mouseout', (function () {
    window.onbeforeunload = ConfirmLeave;
}));
function ConfirmLeave() {
    return "";
}
var prevKey="";
$(document).keydown(function (e) {            
    if (e.key=="F5") {
        window.onbeforeunload = ConfirmLeave;
    }
    else if (e.key.toUpperCase() == "W" && prevKey == "CONTROL") {                
        window.onbeforeunload = ConfirmLeave;   
    }
    else if (e.key.toUpperCase() == "R" && prevKey == "CONTROL") {
        window.onbeforeunload = ConfirmLeave;
    }
    else if (e.key.toUpperCase() == "F4" && (prevKey == "ALT" || prevKey == "CONTROL")) {
        window.onbeforeunload = ConfirmLeave;
    }
    prevKey = e.key.toUpperCase();
});

ConfirmLeave 함수는 메시지를 사용자 정의해야하는 경우 팝업 기본 메시지를 제공 한 다음 ConfirmLeave () 함수 에서 빈 문자열 대신 표시 할 텍스트를 반환합니다 .


Linux 크롬 환경에서 다음 코드가 작동합니다. 실행하기 전에 jquery가 문서에 첨부되어 있는지 확인하십시오.

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

간단하게 다음 단계를 따르십시오.

  1. http://jsfiddle.net/ 열기
  2. html, css 또는 javascript 상자에 입력
  3. 크롬에서 탭을 닫으십시오

다음 그림이 표시되어야합니다.

여기에 이미지 설명 입력


안녕하세요 저는 새 브라우저에서만 작동하는 까다로운 솔루션을 얻었습니다.

서버에 웹 소켓을 열면 사용자가 창을 닫으면 onclose 이벤트가 발생합니다.


다음 스크립트는 Chrome 및 IE에서 메시지를 제공합니다.

<script>
window.onbeforeunload = function (e) {
// Your logic to prepare for 'Stay on this Page' goes here 

    return "Please click 'Stay on this Page' and we will give you candy";
};
</script>

크롬
여기에 이미지 설명 입력

IE
여기에 이미지 설명 입력

Firefox에서는 일반 메시지가 표시됩니다.

여기에 이미지 설명 입력

메커니즘은 동기식이므로 지연에 대한 서버 호출이 작동하지 않습니다. 사용자가 페이지에 머무르기로 결정한 경우 표시되는 모달 창과 같은 메커니즘을 준비 할 수 있지만 사용자가 떠나는 것을 막을 방법은 없습니다.

댓글의 질문에 대한 응답

F5이벤트가 다시 발생하므로 Atl+ F4.


Phoenix가 말했듯이 jQuery .bind 메서드를 사용하지만 더 많은 브라우저 호환성을 위해 String을 반환해야합니다

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

자세한 내용은 developer.mozilla.org 에서 확인할 수 있습니다.


jQuery .bind () 는 더 이상 사용되지 않습니다. 사용 ) (CSTE 연구진은 대신

$(window).on("beforeunload", function() {
    runBeforeClose();
});

경로 감지 마우스를 사용하는 것이 좋습니다.

에서 BrowserClosureNotice 당신은 그것을 할 수있는 데모 예를 순수 자바 스크립트 라이브러리를 가지고있다.

완벽하지는 않지만 문서 또는 마우스 이벤트 문제를 피하십시오 ...


<script type="text/javascript">
window.addEventListener("beforeunload", function (e) {

  var confirmationMessage = "Are you sure you want to leave this page without placing the order ?";
  (e || window.event).returnValue = confirmationMessage;
  return confirmationMessage;

});
</script>

이 코드를 시도하십시오. 이것은 저에게 잘 작동합니다. 이 사용자 정의 메시지는 Chrome 브라우저로 전달되지만 Mozilla에서는이 메시지가 표시되지 않습니다.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" language="javascript">

var validNavigation = false;

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() {
  if (!validNavigation) {

            var ref="load";
      $.ajax({
            type: 'get',
            async: false,
            url: 'logout.php',
 data:
            {
                ref:ref               
            },
             success:function(data)
            {
                console.log(data);
            }
            });
     endSession();
  }
 }

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

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

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

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

}

// Wire up the events as soon as the DOM tree is ready
$(document).ready(function() {
wireUpEvents();  
}); 
</script> 

로그인 한 사용자가 브라우저 또는 브라우저 탭을 닫을 때 자동으로 사용자 계정을 로그 아웃하는 데 사용됩니다.


이런 식으로 시도해 볼 수 있습니다.

<html>
<head>
    <title>test</title>
    <script>
        function openChecking(){
            // alert("open");
            var width = Number(screen.width-(screen.width*0.25));  
            var height = Number(screen.height-(screen.height*0.25));
            var leftscr = Number((screen.width/2)-(width/2)); // center the window
            var topscr = Number((screen.height/2)-(height/2));
            var url = "";
            var title = 'popup';
            var properties = 'width='+width+', height='+height+', top='+topscr+', left='+leftscr;
            var popup = window.open(url, title, properties);
            var crono = window.setInterval(function() {
                if (popup.closed !== false) { // !== opera compatibility reasons
                    window.clearInterval(crono);
                    checkClosed();
                }
            }, 250); //we check if the window is closed every 1/4 second
        }   
        function checkClosed(){
            alert("closed!!");
            // do something
        }
    </script>    
</head>
<body>
    <button onclick="openChecking()">Click Me</button>
</body>
</html>

사용자가 창을 닫으면 콜백이 실행됩니다.

참고 URL : https://stackoverflow.com/questions/20853142/trying-to-detect-browser-close-event

반응형