Window: beforeunload 이벤트

beforeunload 이벤트는 문서와 그 리소스가 언로드 되기 직전에 window에서 발생합니다. 이벤트 발생 시점엔 문서를 아직 볼 수 있으며 이벤트도 취소 가능합니다.

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

beforeunload 이벤트를 사용하면 사용자가 페이지를 떠날 때 정말로 떠날 것인지 묻는 확인 대화 상자를 표시할 수 있습니다. 사용자가 확인을 누를 경우 브라우저는 새로운 페이지로 탐색하고, 취소할 경우 탐색을 취소하고 현재 페이지에 머무릅니다.

명세에 따라, 확인 대화 상자를 표시하려면 이벤트의 preventDefault()를 호출해야 합니다.

다만, 모든 브라우저가 위의 방법을 지원하는 것은 아니므로 아래의 두 가지 구형 방법을 사용해야 할 수도 있습니다.

  • 이벤트의 returnValue 속성에 문자열 할당
  • 이벤트 처리기에서 문자열 반환

일부 브라우저에서는 확인 대화 상자의 문구를 직접 지정할 수 있었습니다. 그러나 현재 대부분의 브라우저에서는 사용자 지정 문구를 사용하지 않으며 이 동작을 지원하지 않습니다.

원치 않는 팝업을 방지하기 위해, 브라우저는 사용자가 이벤트 발생 전에 현재 페이지와 상호작용을 했을 때만 대화 상자를 표시할 수도 있고, 심지어 아예 표시하지 않을 수도 있습니다.

window 또는 documentbeforeunload 이벤트 처리기를 부착하면 페이지가 브라우저의 메모리 내 탐색 캐시에 추가되는 것을 방지합니다.

HTML 명세는 이벤트 처리 중의 window.alert(), window.confirm(), 및 window.prompt() 메서드를 무시할 수 있음을 요구합니다. HTML 명세에서 더 자세한 정보를 확인하세요.

예제

HTML 명세에 따르면 개발 시 Event.returnValue 대신 Event.preventDefault() 메서드를 사용해야 합니다. 그러나 모든 브라우저가 이 방법을 지원하는 것은 아닙니다.

window.addEventListener('beforeunload', (event) => {
  // 표준에 따라 기본 동작 방지
  event.preventDefault();
  // Chrome에서는 returnValue 설정이 필요함
  event.returnValue = '';
});

명세

Specification Status Comment
HTML Living Standard
The definition of 'beforeunload' in that specification.
Living Standard
HTML5
The definition of 'beforeunload' in that specification.
Recommendation Initial definition

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
beforeunload eventChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 12Safari Full support 3WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 12Safari iOS Full support 1Samsung Internet Android Full support 1.0
Custom text support
DeprecatedNon-standard
Chrome No support ? — 51Edge No support NoFirefox No support ? — 44IE Full support YesOpera No support ? — 38Safari No support ? — 9WebView Android No support ? — 51Chrome Android No support ? — 51Firefox Android No support ? — 44Opera Android No support ? — 41Safari iOS No support NoSamsung Internet Android No support ? — 5.0
Activation using event.returnValue = "string";
Deprecated
Chrome Full support 30Edge Full support 12Firefox Full support YesIE Full support YesOpera ? Safari ? WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
Activation using event.preventDefault()Chrome No support NoEdge No support 12 — 79Firefox Full support YesIE Full support 9Opera No support NoSafari Full support 11WebView Android No support NoChrome Android No support NoFirefox Android Full support YesOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
Activation using return "string";
Deprecated
Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support YesOpera Full support 12Safari Full support 3WebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

WindowEventHandlers.onbeforeunload에서 각각의 브라우저가 beforeunload를 어떻게 처리하는지 자세히 알아보세요.

같이 보기