창을 닫거나 페이지를 새로 고칠 때 JavaScript 코드를 실행 하시겠습니까?

110

사용자가 브라우저 창을 닫거나 페이지를 새로 고칠 때 최종 JavaScript 코드를 실행하는 방법이 있습니까?

나는 onload와 비슷한 것을 생각하고 있지만 onclose와 더 비슷합니까? 감사.

나는 항상 확인 상자가 팝업 (페이지 나가기 / 모질라에 머물러 있음) 또는 (크롬에서 새로 고침 / 다시로드하지 않음) 팝업으로 양보하는 onbeforeunload 메소드를 좋아하지 않습니다. 코드를 조용히 실행할 수있는 방법이 있습니까?

javascript  browser 
— 베드로
소스
1
— 1.44mb
— Horen 2011
18
잠깐-이것은 실제로 중복이 아닙니다 ... 그는 사용자에게 프롬프트없이 무언가를 실행하는 방법을 알고 싶어합니다. 연결된 질문은 반대를 묻습니다 ...
— Phildo

답변:

85

이 둘 다 window.onbeforeunload와 window.onunload브라우저에 따라 다르게 사용되는. 창 속성을 함수로 설정하거나 다음을 사용하여 어싱 할 수 있습니다 .addEventListener.

window.onbeforeunload = function(){
   // Do something
}
// OR
window.addEventListener("beforeunload", function(e){
   // Do something
}, false);

일반적으로 onbeforeunload사용자가 페이지를 떠나는 것을 중지해야하는 경우에 사용됩니다 (예 : 사용자가 저장되지 않은 일부 데이터를 작업 중이므로 떠나기 전에 저장해야합니다). 내가 아는 onunload한 Opera 에서 지원하지 않지만 항상 둘 다 설정할 수 있습니다.

— JCOC611
소스
이것은 나를 위해 일했습니다 : Firefox (69.0.2) 및 Chrome (77.0.3865.90)
— FelipeCaparelli
51

좋아, 나는 이것에 대한 작동하는 해결책을 찾았고, 그것은 beforeunload이벤트 를 사용한 다음 핸들러가 return을 만드는 것으로 구성됩니다 null. 이것은 확인 상자 팝업없이 원하는 코드를 실행합니다. 다음과 같이 진행됩니다.

window.onbeforeunload = closingCode;
function closingCode(){
   // do something...
   return null;
}

도움이 되었기를 바랍니다.

— 베드로
소스
10
탐색 할 때나 새로 고침 (F5) 할 때도 실행되지 않습니까? 그렇다면, 정말 ... 문제를 해결하지 않습니다
— 자고
1
테스트되지 않았지만 return false;동일한 작업을 수행하고 (즉, 기본 동작을 방지 함) 의미 상 더 정확 하다고 생각 합니다.
— collimarco 2013-09-24
1
false를 반환하면 페이지에서 나갈 것인지 묻는 대화 상자가 계속 나타납니다. 나는 앵커에서 그것을 테스트했습니다. 는 null로 대화 상자가 팝업되지 않았지만 여전히 CONSOLE.LOG 한
— 리키 스탐
20

때로는 사용자가 페이지를 떠나고 있음을 서버에 알리고 싶을 수 있습니다. 예를 들어, 서버에 임시로 저장된 저장되지 않은 이미지를 정리하거나 해당 사용자를 "오프라인"으로 표시하거나 세션이 완료 될 때 기록하는 데 유용합니다.

역사적으로 beforeunload함수 에서 AJAX 요청을 보내지 만 두 가지 문제가 있습니다. 비동기 요청을 보내면 요청이 올바르게 실행된다는 보장이 없습니다. 동기 요청을 보내면 더 안정적이지만 요청이 완료 될 때까지 브라우저가 중단됩니다. 느린 요청이라면 사용자에게 큰 불편이 될 것입니다.

다행히 이제 navigator.sendBeacon(). 이 sendBeacon()방법 을 사용하면 사용자 에이전트가 언로드를 지연 시키거나 다음 탐색의 성능에 영향을주지 않고 그렇게 할 수있는 기회가있을 때 데이터가 웹 서버로 비동기 적으로 전송됩니다. 이렇게하면 분석 데이터 제출과 관련된 모든 문제가 해결됩니다. 데이터가 안정적으로 전송되고 비동기 적으로 전송되며 다음 페이지의로드에 영향을주지 않습니다. 다음은 사용 예입니다.

window.addEventListener("unload", logData, false);

function logData() {
  navigator.sendBeacon("/log.php", analyticsData);
}

sendBeacon()다음에서 지원 됩니다.

  • 가장자리 14
  • Firefox 31
  • 크롬 39
  • Safari 11.1
  • 오페라 26
  • iOS Safari 11.4

현재 다음에서 지원되지 않습니다.

  • 인터넷 익스플로러
  • 오페라 미니

다음은 지원되지 않는 브라우저에 대한 지원을 추가해야하는 경우 sendBeacon () 에 대한 폴리 필입니다 . 브라우저에서 메서드를 사용할 수없는 경우 대신 동기식 AJAX 요청을 보냅니다.

— 마이크
소스
이 질문은 "서버에 요청을 보내려면"사례의 범위에있었습니다. 아이디어는 사용자 당 열린 탭에 탭을 유지하고 탭이 닫힐 때 백엔드에서 정리할 수 있다는 것이 었습니다.
— Peter
@Peter 완전성을 위해 포함했지만 삭제했습니다.
— Mike
@Mike, 제발, 당신의 대답을 삭제하지 마십시오. 선택한 베스트 답변을 완료 할뿐만 아니라 (귀하의 것이어야 함) 창 종료를 포착하거나 닫는 데 사용되는 이벤트도 제공합니다
— Alex8752
@ Alex8752 내 답변을 삭제하지 않았으며 질문과 관련이없는 부분을 수정했습니다 . 여기에서 볼 수 있습니다 .
— 마이크
1
@AshokKumar 서버로 보내는 내용을 제어 할 수 있습니다. GET으로 물건을 보내려는 경우 요청을 http://example.com/script.php?token=something&var1=val1&var2=val2GET에 넣는 것과 같이 요청을 보내는 것을 방해하는 것은 없습니다 .
— Mike
14

jQuery 버전 :

$(window).unload(function(){
    // Do Something
});

업데이트 : jQuery 3 :

$(window).on("unload", function(e) {
    // Do Something
});

감사합니다 Garrett

— 파라 스
소스
8

여기에있는 문서는 onbeforeunload 이벤트 수신 및 / 또는 창에 이벤트 리스너 추가를 권장합니다.

window.addEventListener('beforeunload', function(event) {
  //do something here
}, false);

함수 또는 함수 참조로 창의 .onunload 또는 .onbeforeunload 속성을 채울 수도 있습니다.

동작이 브라우저간에 표준화되지는 않지만 함수는 페이지를 떠날 지 여부를 확인할 때 브라우저가 표시 할 값을 반환 할 수 있습니다.

— Davejoem
소스
7

사용할 수 있습니다 window.onbeforeunload.

window.onbeforeunload = confirmExit;
function confirmExit(){
    alert("confirm exit is being called");
    return false;
}
— 구르 프릿 싱
소스
3

이벤트가 호출 beforeunload되므로에 기능을 할당 할 수 있습니다 window.onbeforeunload.

— Phssthpok
소스
-2

다음과 같이 시도 할 수 있습니다.

<SCRIPT language="JavaScript">
<!--
function loadOut()
{
window.location="http://www.google.com";
}
//-->
</SCRIPT>

<body onBeforeUnload="loadOut()">
— 데인 발리 아
소스
23
고대가 아닌 사람들이 이것을 읽는다는 것을 조심하십시오. 이것은 고대 JS와 HTML이고 여기에있는 다른 제안들이 훨씬 더 좋습니다.
— RAnders00
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.