JavaScript를 사용하여 사용자가 페이지를 떠날 때를 쉽게 감지하는 3가지 방법

이 문서는 원래 webinuse.com에 게시되었습니다.

사용자가 웹 페이지를 떠나거나 링크를 클릭할 때 감지해야 하는 경우가 있습니다. 때때로 우리는 이 데이터를 사용하여 웹 사이트에서 무언가를 변경하고, 때로는 분석을 전송하고, 때로는 다른 이유로 인해 이 데이터를 알아야 합니다.

이 기사에서는 사용자가 페이지를 떠날 때 감지할 수 있는 가장 쉬운 방법 3가지를 다룰 것입니다. 불행하게도 이러한 모든 방법에는 약간의 결함이 있지만 일부 상황에 적용할 수도 있습니다.

1. 페이지 언로드 시작 전에 종료 감지

MDN에 따라: beforeunload 이벤트는 창, 문서 및 해당 리소스가 언로드되려고 할 때 시작됩니다. 문서는 계속 표시되며 이벤트는 여전히 이 시점에서 취소할 수 있습니다.

즉, 링크를 클릭하거나 탭, 브라우저 또는 브라우저에서 현재 링크를 제거하는 모든 것을 닫으려는 경우 브라우저가 해당 작업을 시작하기 한 순간 전에 이벤트가 발생합니다beforeunload.

링크를 클릭했다고 가정해 보겠습니다. 브라우저가 이 새 링크를 열기 시작하기 한 순간 전에 이벤트가 시작됩니다.

이 이벤트는 일부 데이터를 백 엔드로 보내거나 localStorage에서 무언가를 변경하는 등 필요한 모든 작업에 사용할 수 있습니다.

const beforeUnloadListener = (event) => {
    //Send something to back end
    fetch('uri')
};

window.addEventListener("beforeunload", beforeUnloadListener);

이 이벤트가 안정적으로 실행되지는 않지만 염두에 두어야 합니다. 몇 가지 문제가 있습니다. 특히 모바일 장치에서 사용자가 웹 페이지를 떠날 때를 항상 감지하지는 않습니다. 문제 및 기타 데이터에 대한 자세한 내용은 MDN을 참조하십시오.

2. pagehide 이벤트를 사용하여 사용자가 웹 페이지를 떠날 때 감지

beforeunload 이벤트와 유사하게 pagehide는 사용자가 현재 페이지를 떠날 때 발생합니다. 뒤로 버튼을 클릭합니다. 그러나 MDN에 따르면 beforeunload와 마찬가지로 pagehide 이벤트가 항상 안정적으로 실행되는 것은 아닙니다.

const pageHideListener = (event) => {
    //Send something to back end
    fetch('uri')
};

window.addEventListener("pagehide", pageHideListener);

3. 가시성 변경 이벤트

사용자가 웹 페이지를 떠날 때를 감지하는 가장 신뢰할 수 있는 방법은 visiblitychange 이벤트를 사용하는 것입니다. 이 이벤트는 탭 변경, 브라우저 최소화, 모바일에서 브라우저에서 다른 앱으로 전환 등과 같은 사소한 변경에도 발생합니다. 이 이벤트에 대한 자세한 내용은 MDN 에서 확인할 수 있습니다.

이것은 백엔드로 일부 분석을 보내는 훌륭한 방법이며 아래 예에 나와 있습니다.

document.onvisibilitychange = function() {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/log', analyticsData);
  }
};

참고: 이 이벤트는 분석 및 유사한 데이터를 백 엔드로 보내는 데 탁월하지만 사용자가 여전히 특정 페이지를 연 경우 정보를 보내려면 처음 두 이벤트를 사용하거나 몇 번마다 사용자를 ping해야 합니다. 초.

질문이나 궁금한 사항이 있는 경우 내 에서 나를 찾거나 Everything we need to know about CSS Borders과 같은 내 다른 기사를 읽을 수 있습니다.