브라우저 닫기 이벤트 감지 시도
jQuery 또는 JavaScript를 통해 브라우저 닫기 이벤트를 감지하기 위해 많은 방법을 시도했습니다. 하지만 안타깝게도 종가를 감지하지 못했습니다. onbeforeunload및 onunload방법은 작동하지 않습니다.
어떻게 창 감지 않는 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?");
});
});
간단하게 다음 단계를 따르십시오.
- http://jsfiddle.net/ 열기
- html, css 또는 javascript 상자에 입력
- 크롬에서 탭을 닫으십시오
다음 그림이 표시되어야합니다.
안녕하세요 저는 새 브라우저에서만 작동하는 까다로운 솔루션을 얻었습니다.
서버에 웹 소켓을 열면 사용자가 창을 닫으면 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
'Programing' 카테고리의 다른 글
| Git 파일을 커밋하려고하지만 :: 치명적 : LF가 CRLF로 대체됩니다. (0) | 2020.12.12 |
|---|---|
| 매우 큰 'n'에 대한 n 번째 피보나치 수 찾기 (0) | 2020.12.11 |
| 차이점 ?? (0) | 2020.12.11 |
| 마이그레이션을 사용하여 laravel에서 열의 이름을 어떻게 바꿀 수 있습니까? (0) | 2020.12.11 |
| Erlang 프로세스 대 Java 스레드 (0) | 2020.12.11 |