창 닫기 또는 페이지 새로 고침에서 자바스크립트 코드를 실행하시겠습니까?

창 닫기 또는 페이지 새로 고침에서 자바스크립트 코드를 실행하시겠습니까?

사용자가 브라우저 창을 닫거나 페이지를 새로 고치면 최종 자바스크립트 코드를 실행할 수 있는 방법이 있습니까?

나는 온로드와 비슷한 것을 생각하고 있지만 근접에 더 가깝습니까?감사해요.

언로드 전에 항상 확인란이 뜨거나(페이지를 남기고/모질라에 머무르거나)(재로드/크롬에 다시 로드하지 않음) 하는 방법이 마음에 들지 않습니다.코드를 조용히 실행하는 방법이 있습니까?

둘다 있습니다.window.onbeforeunload그리고.window.onunload, 브라우저에 따라 다르게 사용됩니다.창 속성을 함수로 설정하거나 창 속성을 사용하여 지정할 수 있습니다..addEventListener:

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

,onbeforeunload사용자가 페이지를 떠나는 것을 막을 필요가 있는 경우에 사용됩니다(예: 사용자가 저장되지 않은 데이터를 작업하고 있으므로 떠나기 전에 저장해야 합니다).return끈이나 세트event.returnValue, 그러면 메시지를 표시하지 않고 코드만 실행됩니다.

:beforeunloadiframe이 부모에 의해 삭제된 경우 iframe 내에서 이벤트가 작동하지 않습니다(예:iframeElement.remove() , .unload그리고.pagehideChrome에서 이벤트는 이 경우에 효과가 있습니다.그러나 2023년 8월 현재 Firefox에는 iframe 삭제 사례에 대해 이러한 이벤트가 작동하지 않는 버그가 있습니다. 즉, 다음과 같은 이벤트를 사용하여 iframe이 부모에 의해 삭제되기 직전에 코드를 실행할 수 없습니다.unload파이어폭스에서

좋아요, 이것에 대한 해결책을 찾았습니다. 그것은 다음을 사용하는 것으로 구성됩니다.beforeunload이벤트 후 처리기를 반환합니다.null이 뜨지 원하는 확인란이 뜨지 않고 원하는 코드를 실행합니다.이런 식으로 진행됩니다.

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

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

역사적으로, 당신은 AJAX 요청을beforeunloadfunction 그러나 이것은 두가지 문제를 가지고 있습니다.만약 당신이 비동기 요청을 보낸다면, 그 요청이 제대로 실행될 것이라는 보장은 없습니다.동기화 요청을 전송하면 더 안정적이지만 요청이 완료될 때까지 브라우저가 정지됩니다.이것이 느린 요청이라면 사용자에게 큰 불편을 줄 것입니다.

나중에. 사용해서.sendBeacon()방법은 User Agent가 실행할 기회가 있을 때 데이터를 웹 서버로 비동기식으로 전송하여 언로드를 지연시키거나 다음 탐색의 성능에 영향을 주지 않습니다.이를 통해 데이터가 안정적으로 전송되고, 비동기적으로 전송되며, 다음 페이지 로드에 영향을 미치지 않는 등 분석 데이터 제출과 관련된 모든 문제를 해결할 수 있습니다.

데스크톱 사용자만을 대상으로 하는 경우가 아니라면,sendBeacon() 모바일 장치에서 확실하게 발화되지 않으므로 사용하지 마십시오.대신에 당신은 들을 수 있습니다.visibilitychange이 이벤트는 페이지가 보이고 사용자가 탭을 전환하거나 앱을 전환하거나 홈 화면으로 이동하거나 전화를 받고 페이지에서 멀리 이동하거나 탭을 닫고 새로 고침 등을 수행할 때마다 발생합니다.

사용 예는 다음과 같습니다.

document.addEventListener('visibilitychange', function() {
    if (document.visibilityState == 'hidden') { 
        navigator.sendBeacon("/log.php", analyticsData);
    }
});

사용자가 페이지로 돌아오면,document.visibilityState로 변경됩니다.'visible', 그래서 당신도 그 이벤트를 처리할 수 있습니다.

sendBeacon()지원되는 항목은 다음과 같습니다.

• 가장자리 14
• 파이어폭스 31
• 크롬 39
• 사파리 11.1
• 오페라 26
• iOS 사파리 11.4

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

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

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

업데이트:

언급할 가치가 있을지도 모릅니다.sendBeacon()전송만POST요청한다.다른 방법을 사용하여 요청을 보낼 필요가 있는 경우 를 사용하는 것이 대안입니다.keepalive으로 설정한 깃발true, 그로 인해 그들의 행동이sendBeacon(). 페치 API에 대한 브라우저 지원은 거의 비슷합니다.

fetch(url, {
   method: ..., 
   body: ...,            
   headers: ...,       
   credentials: 'include',
   mode: 'no-cors',
   keepalive: true,
})

jQuery 버전:

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

업데이트: jQuery 3:

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

고마워요 가렛

여기에 나와 있는 설명서는 언로드하기 전에 이벤트를 듣거나 창에 이벤트 수신기를 추가하도록 권장합니다.

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

함수 또는 함수 참조를 사용하여 윈도우의 속성을 언로드하기 전에 .onunload 또는 .on을 채울 수도 있습니다.

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

사용가능window.onbeforeunload.

window.onbeforeunload = confirmExit;
function confirmExit(){
    alert("confirm exit is being called");
    return false;
}

이벤트의 이름은 다음과 같습니다.beforeunload, 기능을 지정할 수 있습니다.window.onbeforeunload.

코드를 조용히 실행하는 방법이 있습니까?(팝업 없음)

다른 방법(예: null 또는 false 반환)에 문제가 있는 경우 이 방법을 성공적으로 사용했습니다.엣지, 크롬, 오페라에 대한 테스트를 받았습니다.

window.addEventListener('beforeunload', function (e) {
  // the absence of a returnValue property on the event will guarantee the browser unload happens
  delete e['returnValue'];
  // my code that silently runs goes here
});

위 코드는 문서를 언로드하기 전에 Mozilla.org 의 on에서 직접 붙여넣습니다.

업데이트: IOS Safari에서는 작동하지 않는 것 같습니다. ( 따라서 완전한 해결책은 아니지만 여전히 누군가에게 도움이 될 수도 있습니다.

언급URL : https://stackoverflow.com/questions/13443503/run-javascript-code-on-window-close-or-page-refresh