Window: unload 이벤트

unload 이벤트는 문서나 하위 리소스가 언로딩 중일 때 발생합니다.

확산 아니오
취소 가능 아니오
인터페이스 Event
이벤트 처리기 속성 onunload

unload는 다음 이벤트 이후 발생합니다.

unload 시점의 문서는 다음과 같은 상태입니다.

  • 이미지, IFrame 등 모든 리소스는 여전히 존재합니다.
  • 최종 사용자는 아무것도 볼 수 없습니다.
  • UI 상호작용은 아무 효과도 없습니다. (window.open(), window.alert(), window.confirm(), 등등)
  • 오류가 발생해도 언로딩 절차는 중단되지 않습니다.

참고로 unload 이벤트 역시 문서 트리의 순서를 따라갑니다. 즉 부모 프레임의 unload가 자식 프레임의 unload 이전에 발생합니다. 아래 예제를 확인하세요

예제

<!DOCTYPE html>
<html>
  <head>
    <title>Parent Frame</title>
    <script>
      window.addEventListener('beforeunload', function(event) {
        console.log('I am the 1st one.');
      });
      window.addEventListener('unload', function(event) {
        console.log('I am the 3rd one.');
      });
    </script>
  </head>
  <body>
    <iframe src="child-frame.html"></iframe>
  </body>
</html>

아래는 child-frame.html의 내용입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Child Frame</title>
    <script>
      window.addEventListener('beforeunload', function(event) {
        console.log('I am the 2nd one.');
      });
      window.addEventListener('unload', function(event) {
        console.log('I am the 4th and last one…');
      });
    </script>
  </head>
  <body>
      ☻
  </body>
</html>

부모 프레임이 언로딩 될 때, console.log() 메시지를 통해 순서를 확인할 수 있습니다.

명세

Specification Status Comment
UI Events
The definition of 'unload' in that specification.
Working Draft

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
unload eventChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 4Safari Full support 3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

같이 보기