jquery에서 창을 닫을지 여부를 결정하는 방법

PHPz
풀어 주다: 2023-04-07 14:29:35
원래의
908명이 탐색했습니다.

일부 웹사이트에서는 웹페이지를 닫을 때 사용자에게 데이터 저장을 상기시키거나 웹페이지에서 사용자의 특정 작업을 기록하는 등 일부 작업을 수행해야 하는 경우가 있습니다. 이러한 작업은 사용자가 웹 페이지를 닫을 때 자동으로 트리거되어야 하며 jquery는 창 닫기 이벤트를 결정하는 여러 가지 방법을 제공합니다.

1. beforeunload 이벤트

beforeunload 이벤트는 창, 문서 또는 프레임이 언로드되거나 닫힐 때 발생하는 이벤트입니다. 이 이벤트는 실제 제거 또는 종료 전에 트리거되며 이 이벤트에서 사용자에게 데이터 또는 기타 작업을 저장하라는 메시지를 표시할 수 있습니다.

코드는 다음과 같습니다:

$(window).on('beforeunload', function() {
   return 'Are you sure you want to leave?';
});
로그인 후 복사

이 코드에서는 beforeunload 이벤트가 window 객체에 바인딩됩니다. 사용자가 페이지를 닫거나 떠날 때 사용자에게 떠날 것인지 묻는 프롬프트 상자가 나타납니다. 사용자는 창을 그대로 유지하거나 닫을 수 있습니다.

2. 언로드 이벤트

언로드 이벤트는 창, 문서, 프레임이 언로드되거나 닫힐 때 발생하는 이벤트입니다. 이 이벤트는 웹페이지가 언로드되거나 닫힌 후에 트리거됩니다. 이 이벤트에서는 웹페이지 등에서 사용자의 특정 작업이 기록될 수 있습니다.

코드는 다음과 같습니다:

$(window).on('unload', function() {
   // 记录用户离开时间
   var leaveTime = new Date();
   localStorage.setItem('leaveTime', leaveTime.getTime());
});
로그인 후 복사

이 코드에서는 언로드 이벤트가 창 개체에 바인딩됩니다. 사용자가 페이지를 닫거나 떠날 때, 사용자가 페이지를 떠난 시간이 기록되어 localStorage에 저장됩니다.

3. beforeunload 이벤트와 unload 이벤트를 동시에 사용할 수 있습니다.

코드는 다음과 같습니다.

$(window).on('beforeunload', function() {
   // 提醒用户保存数据
   return 'Are you sure you want to leave?';
});
$(window).on('unload', function() {
   // 记录用户离开时间
   var leaveTime = new Date();
   localStorage.setItem('leaveTime', leaveTime.getTime());
});
로그인 후 복사

이 코드에서는 beforeunload 이벤트와 unload 이벤트가 동시에 바인딩됩니다. 사용자가 페이지를 닫거나 떠날 때 사용자에게 떠날 것인지 묻는 프롬프트 상자가 나타납니다. 사용자는 창을 그대로 두거나 닫을 수 있으며, 사용자가 페이지를 떠나는 시간이 기록되어 localStorage에 저장됩니다.

요약

사용자가 페이지를 닫거나 페이지를 떠날 때 웹 페이지에서 일부 작업을 수행해야 하는 경우 beforeunload 및 unload 이벤트를 사용할 수 있습니다. 그중 beforeunload 이벤트는 웹 페이지가 실제로 닫히기 전에 발생하며, 이 이벤트에서 프롬프트 상자가 팝업될 수 있으며, 웹 페이지가 닫힌 후에 unload 이벤트가 발생하며 이 이벤트에 사용자의 작업이 기록될 수 있습니다. 동시에 이 두 이벤트를 동시에 사용하여 여러 작업을 수행할 수 있습니다.

위 내용은 jquery에서 창을 닫을지 여부를 결정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿