브라우저 닫기 이벤트를 검색하는 중
저는 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();
});
Confirm Leave(확인 탈퇴) 기능은 메시지를 사용자 지정해야 하는 경우 팝업 기본 메시지를 제공한 다음, Confirm Leave() 기능에 빈 문자열 대신 표시할 텍스트를 반환합니다.
리눅스 크롬 환경에서는 다음 코드가 작동합니다.실행하기 전에 문서에 jquery가 첨부되어 있는지 확인합니다.
$(document).ready(function()
{
$(window).bind("beforeunload", function() {
return confirm("Do you really want to close?");
});
});
단순한 경우 다음 단계를 수행합니다.
- http://jsfiddle.net/ 열기
- html, css 또는 javascript 상자에 무언가를 입력합니다.
- 크롬에서 탭 닫기 시도
다음 그림이 표시되어야 합니다.
안녕하세요. 새로운 브라우저에서만 작동하는 까다로운 솔루션이 있습니다.
서버에 웹 소켓을 열기만 하면 사용자가 창을 닫으면 온클로즈 이벤트가 실행됩니다.
다음 스크립트는 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
파이어폭스에서 당신은 일반적인 메시지를 받을 것입니다.
메커니즘은 동기식이므로 지연할 서버 호출이 작동하지 않으며, 사용자가 페이지에 남아 있기로 결정한 경우 표시되는 모달 창과 같은 메커니즘을 준비할 수 있지만, 사용자가 떠나는 것을 막을 방법은 없습니다.
질문에 대한 답변(댓글)
F5 이벤트를 다시 시작합니다.F4 +도 마찬가지입니다.
Phoenix가 말했듯이, jQuery.bind 메서드를 사용하지만, 더 많은 브라우저 호환성을 위해서는 String을 반환해야 합니다.
$(document).ready(function()
{
$(window).bind("beforeunload", function() {
return "Do you really want to close?";
});
});
자세한 내용은 developer.mozilla.org 에서 확인할 수 있습니다.
jQuery.bind()가 더 이상 사용되지 않습니다.대신 .on() 사용
$(window).on("beforeunload", function() {
runBeforeClose();
});
경로 감지 마우스를 사용하는 것이 더 나을 수도 있습니다.
브라우저 폐쇄 공지에는 데모 예제와 순수 자바스크립트 라이브러리가 있습니다.
완벽하지는 않지만 문서나 마우스 이벤트의 문제는 피하십시오.
<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
'UFO ET IT' 카테고리의 다른 글
| 동적으로 여러 지연된 jQuery Ajax 호출 (0) | 2023.08.21 |
|---|---|
| Angular 응용 프로그램에서 라우팅으로 페이지 제목을 변경하는 방법은 무엇입니까? (0) | 2023.08.21 |
| Android - 스크롤 가능한 제약 조건 레이아웃을 만드는 방법은 무엇입니까? (0) | 2023.08.21 |
| 숫자를 정수 및 소수 부분으로 분할 (0) | 2023.08.21 |
| 어떻게 파이썬 프로그램을 배포할 수 있습니까? (0) | 2023.08.21 |