브라우저 또는 브라우저 탭이 닫혀 있는지 확인하지만 링크 클릭으로 인한 것이 아닌지를 감지하는 브라우저 간 JavaScript / jQuery 코드가 있습니까?
sessionStorage
속성을 사용 하면 브라우저가 닫히면 만료됩니다. w3schools.com/jsref/prop_win_sessionstorage.asp
브라우저 또는 브라우저 탭이 닫혀 있는지 확인하지만 링크 클릭으로 인한 것이 아닌지를 감지하는 브라우저 간 JavaScript / jQuery 코드가 있습니까?
sessionStorage
속성을 사용 하면 브라우저가 닫히면 만료됩니다. w3schools.com/jsref/prop_win_sessionstorage.asp
답변:
내가 당신을 올바르게 얻는다면, 당신은 언제 탭 / 창이 효과적으로 닫히는 지 알고 싶습니다. 글쎄, AFAIK는 Javascript
그런 종류의 물건을 감지하는 유일한 방법 은 onunload
& onbeforeunload
이벤트입니다.
불행하게도 (또는 운 좋게도), 해당 이벤트는 link
또는 브라우저 뒤로 버튼을 통해 사이트를 떠날 때 발생 합니다. 그래서 이것은 내가 줄 수있는 가장 좋은 대답입니다. 나는 당신이 기본적으로 순수한 close
자바 스크립트를 감지 할 수 있다고 생각하지 않습니다 . 내가 틀렸다면 바로 수정하십시오.
String
반환 값을 제거했습니다 onbeforeunload
. 이제 언로드하기 전에 더 이상 사용자 정의 메시지를 표시 할 수 없습니다.
unload
있습니까?
에서 파이어 폭스 문서
어떤 이유로 웹킷 기반 브라우저는 대화 상자의 스펙을 따르지 않습니다. 거의 교차 작업 예는 아래 예와 비슷합니다.
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에서 작동합니다.
window.onunload = "alert('wait')"
하여 window.onbeforeunload = "alert('wait... chrome!')"
사용했지만 탭을 닫을 때도 실행되지 않았습니다.
window.onunload = "alert('wait')"
그런 식으로 작동하지 않아야합니다. "함수는 문자열 값을 Event 객체의 returnValue 속성에 할당하고 동일한 문자열을 반환해야합니다." 살펴 보시기 바랍니다 MDN 문서를
브라우저 나 탭을 닫을 때 사용자를 자동으로 로그 아웃해야하지만 사용자가 다른 링크를 탐색 할 때는 아닙니다. 또한 그럴 때 확인 메시지를 표시하고 싶지 않았습니다. 잠시 동안, 특히 IE와 Edge 에서이 문제를 해결 한 후이 답변으로 접근 방식을 기반으로 한 후에 IE 11, Edge, Chrome 및 Firefox에서 작업을 확인한 결과가 끝났습니다 .
먼저 beforeunload
JS 의 이벤트 핸들러에서 서버의 카운트 다운 타이머를 시작하십시오 . 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()
메소드 에서 로그 아웃을 취소하고 있습니다.
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>
$(window).unload( function () { alert("Bye now!"); } );
beforeunload
경고를 표시하려면 시도하십시오 . : 이것처럼$(window).on('beforeunload', function(){ alert ('Bye now')});
그것을 사용해보십시오 :
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;
});
});
나는 모든 브라우저에서 작동 하는 방법을 찾았습니다 .
Firefox 57, Internet Explorer 11, Edge 41, 최신 Chrome 중 하나 (내 버전이 표시되지 않음)에서 테스트되었습니다.
참고 : onbeforeunload는 페이지를 가능한 어떤 방식 으로든 떠나면 실행됩니다 (새로 고침, 브라우저 닫기, 리디렉션, 링크, 제출.). 브라우저 닫기에서만 발생하도록하려면 이벤트 핸들러를 바인드하십시오.
$(document).ready(function(){
var validNavigation = false;
// Attach the event keypress to exclude the F5 refresh (includes normal 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;
});
window.onbeforeunload = function() {
if (!validNavigation) {
// -------> code comes here
}
};
});
아직 언급 한 사람이 없기 때문에 (8 년 후) : WebSocket은 닫힌 탭을 감지하는 또 다른 효과적인 방법이 될 수 있습니다. 탭이 열려 있고 호스트를 가리키면 클라이언트는 호스트에 대한 활성 WebSocket 연결을 유지할 수 있습니다.
주의 사항 :이 솔루션은 WebSocket에 이미 수행중인 작업에서 추가로 상당한 오버 헤드가 필요하지 않은 경우 프로젝트에 대해서만 실제로 실행 가능합니다.
적절한 시간 초과 기간 (예 : 2 분) 내에서 서버 측은 WebSocket의 연결이 끊어진 후 클라이언트가 사라진 것으로 판단하고 업로드 된 임시 파일 제거와 같은 원하는 작업을 수행 할 수 있습니다. (매우 전문적인 유스 케이스에서, 나의 목표는 WebSocket 연결이 끊어지고 모든 CGI / FastCGI 활동이 종료 된 후 3 초 후에 localhost 앱 서버 를 종료 하는 것이 었습니다. 다른 연결 유지 연결은 나에게 영향을 미치지 않습니다.)
onunload 이벤트 핸들러가 비콘과 올바르게 작동하도록하는 데 문제가 있습니다 ( 이 답변에서 권장하는대로 ). 탭을 닫으면 비콘이 트리거되는 것처럼 보이지 않았고 열린 탭은 문제를 일으킬 수있는 방식으로 트리거했습니다. WebSocket은 탭이 닫히고 응용 프로그램 내에서 페이지를 전환하는 것과 거의 동시에 연결이 닫히기 때문에 지연 창 내에서 새 WebSocket 연결을 열기 때문에 거의 깨끗하게 실행되는 문제를 해결했습니다.
//Detect Browser or Tab Close Events
$(window).on('beforeunload',function(e) {
e = e || window.event;
var localStorageTime = localStorage.getItem('storagetime')
if(localStorageTime!=null && localStorageTime!=undefined){
var currentTime = new Date().getTime(),
timeDifference = currentTime - localStorageTime;
if(timeDifference<25){//Browser Closed
localStorage.removeItem('storagetime');
}else{//Browser Tab Closed
localStorage.setItem('storagetime',new Date().getTime());
}
}else{
localStorage.setItem('storagetime',new Date().getTime());
}
});
안녕하세요, 브라우저 로컬 저장소 및 타임 스탬프를 사용하여 '브라우저 감지 및 탭 닫기 이벤트'클릭을 달성 할 수있었습니다. 이 솔루션을 사용하여 문제가 해결되기를 바랍니다.
처음 연구 한 결과 브라우저를 닫으면 브라우저가 모든 탭을 하나씩 닫아 브라우저를 완전히 닫습니다. 따라서 탭을 닫는 데 약간의 시간 지연이 있음을 알았습니다. 따라서이 시간 지연을 주요 유효성 검사 지점으로 사용하여 브라우저 및 탭 닫기 이벤트 감지를 달성 할 수있었습니다.
Chrome 브라우저 버전 76.0.3809.132에서 테스트했으며 작동하는 것으로 나타났습니다.
내 답변이 도움이된다면 투표하십시오 ....
window.onbeforeunload = function() {
console.log('event');
return false; //here also can be string, that will be shown to the user
}
here also can be string, that will be shown to the user
파이어 폭스에서는 크롬에서는 그렇지 않습니다.
다음과 같이 '언로드'이벤트에 대한 이벤트 처리기에서 window.closed를 사용하여 확인할 수 있지만 시간 초과 사용이 필요합니다 (따라서 smth가 지연되거나 창이 닫히지 않으면 결과를 보장 할 수 없습니다).
JSFiddle의 예 (Safari, FF, Chrome, Edge 및 IE11 후기 테스트)
var win = window.open('', '', 'width=200,height=50,left=200,top=50');
win.document.write(`<html>
<head><title>CHILD WINDOW/TAB</title></head>
<body><h2>CHILD WINDOW/TAB</h2></body>
</html>`);
win.addEventListener('load',() => {
document.querySelector('.status').innerHTML += '<p>Child was loaded!</p>';
});
win.addEventListener('unload',() => {
document.querySelector('.status').innerHTML += '<p>Child was unloaded!</p>';
setTimeout(()=>{
document.querySelector('.status').innerHTML += getChildWindowStatus();
},1000);
});
win.document.close()
document.querySelector('.check-child-window').onclick = ()=> {
alert(getChildWindowStatus());
}
function getChildWindowStatus() {
if (win.closed) {
return 'Child window has been closed!';
} else {
return 'Child window has not been closed!';
}
}
위의 모든 솔루션을 시도했지만 실제로는 효과가 없었습니다. 특히 프로젝트에 팝업 창에 대한 '닫기'버튼이있는 Telerik 구성 요소가 있고 'beforeunload'이벤트를 호출하기 때문에 실제로는 효과가 없었습니다. 또한 페이지에 Telerik 그리드가있을 때 버튼 선택기가 제대로 작동하지 않습니다 (그리드 내부의 버튼을 의미합니다). 그래서 위의 제안을 사용할 수 없습니다. 마지막으로 이것은 나를 위해 일한 해결책입니다. _Layout.cshtml의 body 태그에 onUnload 이벤트를 추가했습니다. 이 같은:
<body onUnload="LogOff()">
그런 다음 Asp.Net MVC의 기본 제공 방법 인 Account / LogOff로 리디렉션하기 위해 LogOff 기능을 추가하십시오. 이제 브라우저 또는 탭을 닫으면 LogOff 메서드로 리디렉션되고 사용자가 돌아올 때 로그인해야합니다. Chrome 및 Firefox에서 모두 테스트했습니다. 그리고 작동합니다!
function LogOff() {
$.ajax({
url: "/Account/LogOff",
success: function (result) {
}
});
}
window.onbeforeunload = function ()
{
if (isProcess > 0)
{
return true;
}
else
{
//do something
}
};
이 기능은 브라우저에서 프로세스 중에 창을 닫거나 페이지를 새로 고치면 확인 대화 상자를 표시합니다.이 기능은 모든 브라우저에서 작동합니다 .Ajax 프로세스에서 isProcess var를 설정해야합니다.
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "tab close";
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
sendkeylog(confirmationMessage);
return confirmationMessage; //Webkit, Safari, Chrome etc.
});
sendkeylog
입니까?
@jAndy가 언급했듯이 창이 닫히는 것을 감지하는 데 올바르게 자바 스크립트 코드가 없습니다. @Syno가 제안한 것부터 시작했습니다.
나는 그런 상황을 통과했지만이 단계를 따르면 당신은 그것을 감지 할 수 있습니다.
Chrome 67 이상 및 Firefox 61 이상에서 테스트했습니다.
var wrapper = function () { //ignore this
var closing_window = false;
$(window).on('focus', function () {
closing_window = false;
//if the user interacts with the window, then the window is not being
//closed
});
$(window).on('blur', function () {
closing_window = true;
if (!document.hidden) { //when the window is being minimized
closing_window = false;
}
$(window).on('resize', function (e) { //when the window is being maximized
closing_window = false;
});
$(window).off('resize'); //avoid multiple listening
});
$('html').on('mouseleave', function () {
closing_window = true;
//if the user is leaving html, we have more reasons to believe that he's
//leaving or thinking about closing the window
});
$('html').on('mouseenter', function () {
closing_window = false;
//if the user's mouse its on the page, it means you don't need to logout
//them, didn't it?
});
$(document).on('keydown', function (e) {
if (e.keyCode == 91 || e.keyCode == 18) {
closing_window = false; //shortcuts for ALT+TAB and Window key
}
if (e.keyCode == 116 || (e.ctrlKey && e.keyCode == 82)) {
closing_window = false; //shortcuts for F5 and CTRL+F5 and CTRL+R
}
});
// Prevent logout when clicking in a hiperlink
$(document).on("click", "a", function () {
closing_window = false;
});
// Prevent logout when clicking in a button (if these buttons rediret to some page)
$(document).on("click", "button", function () {
closing_window = false;
});
// Prevent logout when submiting
$(document).on("submit", "form", function () {
closing_window = false;
});
// Prevent logout when submiting
$(document).on("click", "input[type=submit]", function () {
closing_window = false;
});
var toDoWhenClosing = function() {
//write a code here likes a user logout, example:
//$.ajax({
// url: '/MyController/MyLogOutAction',
// async: false,
// data: {
// },
// error: function () {
// },
// success: function (data) {
// },
//});
};
window.onbeforeunload = function () {
if (closing_window) {
toDoWhenClosing();
}
};
};
resize
창이 흐려질 때 계속 바인딩됩니다 . 100 배 흐려지면 리스너가 100 개가되어 브라우저 속도가 느려집니다.
이것을 시도하십시오, 나는 이것이 당신을 위해 일할 것이라고 확신합니다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
try{
opera.setOverrideHistoryNavigationMode('compatible');
history.navigationMode = 'compatible';
}catch(e){}
function ReturnMessage()
{
return "wait";
}
function UnBindWindow()
{
$(window).unbind('beforeunload', ReturnMessage);
}
$(window).bind('beforeunload',ReturnMessage );
});
</script>