Window: beforeunload 이벤트

beforeunload 이벤트는 window, 문서(document) 및 해당 리소스가 언로드(unload) 되려고 할 때 시작됩니다. 문서는 계속 보이고 있으며 이벤트는 이 시점에서도 취소할 수 있습니다.

이 이벤트를 사용하면 웹 페이지에서 사용자에게 실제로 페이지를 떠날 것인지 묻는 확인 대화 상자를 표시할 수 있습니다. 사용자가 확인 버튼을 누를 경우 브라우저는 새 페이지로 이동하고 그렇지 않으면 탐색을 취소하고 현재 페이지에 머무릅니다.

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

HTML 명세에는 이 이벤트 동안 window.alert(), window.confirm(), 및 window.prompt() 메서드에 대한 호출이 무시될 수 있다고 명시되어 있습니다. 자세한 내용은 HTML 명세을 참고하세요.

구문

addEventListener()와 같은 메서드에서 이벤트 이름을 사용하거나 이벤트 핸들러 속성을 설정합니다.

js
addEventListener("beforeunload", (event) => {});
onbeforeunload = (event) => {};

이벤트 타입

BeforeUnloadEvent 이벤트는 Event에서 상속됩니다.

이벤트 처리기 별칭(alias)

Window 인터페이스 뿐만 아니라 이벤트 핸들러 속성 onbeforeunload도 사용할 수 있습니다.

보안

임시 사용자 활성화가 필요합니다. beforeunload 이벤트가 동작하기 위해선 사용자가 페이지 또는 UI 요소와 상호 작용해야 합니다.

사용 일람

beforeunload 이벤트는 unload 이벤트와 동일한 문제가 있습니다.

특히 모바일에서 beforeunload 이벤트는 안정적으로 실행되지 않습니다. 예를 들면, 다음의 시나리오에서는 beforeunload 이벤트가 전혀 발생하지 않습니다.

  1. 모바일 사용자가 페이지를 방문합니다.
  2. 그런 다음 사용자가 다른 앱으로 전환합니다.
  3. 나중에 사용자는 앱 관리자에서 브라우저를 닫습니다.

beforeunload 이벤트는 back/forward cache (bfcache)와 호환되지 않습니다. 이 이벤트를 사용하는 많은 페이지가 이벤트 후에 페이지가 더 이상 존재하지 않을 것이라고 가정하기 때문입니다. 이를 방지하기 위해 브라우저는 beforeunload 수신기(listener)가 있는 경우 bfcache에 페이지를 배치하지 않으며 이는 성능에 좋지 않습니다.

그러나 unload 이벤트와 달리 beforeunload 이벤트에는 합법적인 사용 사례가 있습니다. 사용자가 페이지에서 데이터를 입력후 저장하지 않고 이탈(unload) 할때 데이터가 손실되는 경우의 시나리오입니다.

개발자는 성능에 미치는 영향을 최소화하기 위해 이 시나리오에서 실제로 저장되지 않는 변경 사항이 있을 때만 beforeunload를 수신하는 것이 좋습니다. 이에 대한 예는 아래의 예제 섹션을 참조하세요.

beforeunload 이벤트와 관련된 문제에 대한 더 많은 정보는 페이지 라이프사이클 API 가이드를 참고하세요.

예제

이 예제에서 페이지는 input 텍스트에 대한 변경 사항을 수신합니다. 만약 요소의 값이 포함되어 있으면 beforeunload에 대한 수신기(listener)를 추가합니다. 만약 요소가 비어있으면 수신기를 제거합니다.

js
const beforeUnloadListener = (event) => {
  event.preventDefault();
  return (event.returnValue = "");
};
const nameInput = document.querySelector("#name");
nameInput.addEventListener("input", (event) => {
  if (event.target.value !== "") {
    addEventListener("beforeunload", beforeUnloadListener, { capture: true });
  } else {
    removeEventListener("beforeunload", beforeUnloadListener, {
      capture: true,
    });
  }
});

명세

Specification
HTML Standard
# event-beforeunload
HTML Standard
# handler-window-onbeforeunload

브라우저 호환성

BCD tables only load in the browser

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

호환성 참고 사항

HTML 명세에는 개발자가 Event.returnValue를 사용하여 사용자에게 메시지를 표시하는 대신 Event.preventDefault() 메서드를 사용해야 한다고 명시되어 있습니다. 그러나 아직 모든 브라우저에서 지원하고 있지는 않습니다.

이 이벤트가 null 또는 undefined 이외의 값을 반환(또는 returnValue 속성을 설정)하면 페이지 언로드를 확인하라는 메시지가 사용자에게 표시됩니다. 오래된 브라우저에서는 이벤트의 반환 값이 표시됩니다. Firefox 44, Chrome 51, Opera 38, 및 Safari 9.1 이후로 반환된 문자열 대신 웹 페이지에서 제어할 수 없는 문자열이 표시됩니다. 예를들면 아래와 같습니다.

  • Firefox는 "This page is asking you to confirm that you want to leave - data you have entered may not be saved."라는 문자열을 표시합니다(Firefox 버그 588292를 확인하세요).
  • Chrome은 "Do you want to leave the site? Changes you made may not be saved."라는 문자열을 표시합니다(Chrome 플랫폼 상태를 확인하세요).

일부 브라우저에서 window.alert(), window.confirm(), 및 window.prompt() 호출은 beforeunload 이벤트가 진행되는 동안 무시될 수 있습니다. 자세한 내용은 HTML 명세를 확인하세요.

또한 다양한 브라우저는 이벤트 결과를 무시하고 사용자에게 확인을 전혀 요청하지 않습니다. 이러한 경우 문서는 항상 자동으로 언로드 됩니다. Firefox는 이 동작을 활성화 하기 위해 about:config 에 dom.disable_beforeunload라는 스위치가 있습니다. Chrome 60부터는 프레임이나 페이지가 로드된 이후 사용자가 제스처를 수행하지 않은 경우 확인을 건너뜁니다. 페이지에서 F5를 누르는 것은 사용자 상호작용으로 간주되는 반면 새로고침 화살표를 마우스로 클릭하거나 Chrome DevTools에 포커스가 있는 상태에서 F5를 누르는 것은 사용자 상호작용으로 간주되지 않습니다 (Chrome 81 기준입니다).

같이 보기