다운코드 편집기는 JavaScript 모니터링 페이지 새로 고침 이벤트에 대한 자세한 설명을 제공합니다. 페이지 새로 고침 이벤트 모니터링은 웹 개발에서 개발자가 페이지를 새로 고치거나 닫을 때 사용자 데이터 저장, 요청 전송 등과 같은 몇 가지 필요한 작업을 수행하는 데 도움이 될 수 있습니다. 그러나 브라우저의 보안 제한으로 인해 페이지 새로 고침과 닫기 이벤트를 정확하게 구분하는 것은 쉽지 않습니다. 이 기사에서는 몇 가지 일반적인 방법을 심층적으로 살펴보고 각 방법의 장점과 단점을 분석하여 가장 적합한 옵션을 선택하는 데 도움을 줄 것입니다.
JavaScript는 여러 가지 방법으로 페이지 새로 고침 이벤트를 모니터링할 수 있습니다. 가장 일반적인 방법은 beforeunload 및 unload 이벤트 리스너를 사용하는 것입니다. 그러나 닫기 이벤트를 모니터링하지 않고 페이지 새로 고침만 모니터링하는 것은 기술적으로 어렵다는 점에 유의해야 합니다. 브라우저 보안 제한으로 인해 이 두 이벤트는 일반적으로 동시에 실행됩니다. 그러나 몇 가지 트릭을 사용하면 이러한 두 이벤트를 구별할 수 있습니다. 예를 들어 쿠키를 설정하거나 sessionStorage를 사용하여 상태를 기록하고 사용자가 페이지를 다시 로드할 때 이러한 상태를 확인하여 페이지가 로드되었는지 여부를 확인합니다. 새로 고치거나 닫습니다.
사용자가 페이지를 새로 고치려고 하면 beforeunload 이벤트를 통해 일정 수준의 모니터링을 수행할 수 있습니다.
window.addEventListener('beforeunload', function (e) {
//새로 고침 시 표시할 경고 메시지 설정
var 확인 메시지 = '페이지를 새로 고치시겠습니까? ';
(e || window.event).returnValue =confirmationMessage;
확인 메시지 반환;
});
이 코드는 사용자가 페이지를 새로 고칠 때 확인 대화 상자를 표시합니다. 그러나 사용자가 페이지를 닫으려고 할 때도 실행됩니다. 따라서 이는 새로 고침과 종료를 구별하는 정확한 방법이 아닙니다.
세션 중 사용자의 상태 정보는 sessionStorage를 통해 기록될 수 있습니다. 탭이 닫히면 sessionStorage에 저장된 데이터가 삭제됩니다.
//페이지가 로드될 때 실행됨
window.onload = 함수() {
if (sessionStorage.getItem(is_reloaded)) {
console.log(페이지가 새로 고쳐졌습니다);
}
sessionStorage.setItem(is_reloaded, true);
};
window.addEventListener('beforeunload', function (e) {
if (!window.closed) {
sessionStorage.removeItem(is_reloaded);
}
});
이 예에서는 페이지가 로드될 때 sessionStorage에 is_reloaded 항목을 설정합니다. 페이지가 새로고침될 때 해당 항목은 여전히 존재하므로 is_reloaded를 확인하여 페이지가 새로고침되었는지 여부를 알 수 있습니다. 이 방법 역시 새로고침과 닫기를 정확하게 구분할 수는 없지만, 사용자 행동 패턴 분석과 결합하면 어느 정도 구분이 가능합니다.
페이지 가시성 API는 페이지가 사용자에게 표시되는지 여부를 감지하는 기능을 제공하며 사용자 행동을 간접적으로 결정하는 데에도 사용할 수 있습니다.
document.addEventListener('visibilitychange', function() {
if (document.visibilityState === '숨김') {
// 사용자가 현재 페이지를 떠났습니다. 아마도 닫거나 점프하여 페이지를 떠났을 수도 있습니다.
}
if (document.visibilityState === '표시됨') {
// 페이지를 열거나 새로 고치거나 다른 탭에서 다시 전환하면 페이지가 표시됩니다.
}
});
이 API를 통해 사용자가 페이지를 떠날 때 일부 처리를 수행한 다음 사용자가 페이지로 돌아올 때 판단을 내릴 수 있습니다. 그러나 새로 고침 이벤트만 정확하게 모니터링하지는 않습니다.
JavaScript로 쿠키를 설정하고 쿠키에 짧은 만료 시간을 부여하고, 사용자가 새로 고칠 때 쿠키가 존재하는지 확인하고, 타임스탬프를 기준으로 판단할 수 있습니다.
//쿠키 설정
function setCookie(이름, 값, 초) {
var 만료 = new Date(Date.now() + 초 * 1000);
document.cookie = 이름 + = + 값 + ;expires= +expires.toUTCString();
}
// 쿠키 가져오기
함수 getCookie(이름) {
var keyValue = document.cookie.match('(^|;) ?' + 이름 + '=([^;]*)(;|$)');
키값 반환 ? 키값[2] : null;
}
// 모니터 새로 고침
window.addEventListener('load', function() {
var lastTime = getCookie('last_refresh_time');
var currentTime = Date.now();
if (lastTime && currentTime -parseInt(lastTime) < 1000) {
// 두 타임스탬프의 차이가 1초 미만이면 새로 고침 이벤트로 간주됩니다.
console.log(페이지가 새로 고쳐졌습니다);
}
setCookie('last_refresh_time', currentTime, 1);
});
쿠키의 존재 여부와 현재 시간과의 차이를 설정하고 확인함으로써 페이지가 새로 고쳐졌는지 아니면 방금 열렸는지 유추할 수 있습니다. 그러나 쿠키는 창과 탭에 걸쳐 있을 수 있으므로 이는 여전히 완벽한 솔루션은 아닙니다.
1. JavaScript를 통해 페이지 새로 고침 이벤트를 모니터링하는 방법은 무엇입니까?
JavaScript를 통해 페이지 새로 고침 이벤트를 모니터링하여 관련 작업을 수행할 수 있습니다. 한 가지 방법은 beforeunload 이벤트를 사용하는 것입니다.
window.addEventListener('beforeunload', function(event) { // 페이지가 새로 고쳐지기 전에 실행되는 코드 // 예를 들어 요청 보내기, 데이터 저장 등 });2. JavaScript에서 페이지 새로 고침 이벤트만 모니터링하고 페이지 닫기 이벤트는 모니터링하지 않는 방법은 무엇입니까?
페이지 새로 고침 이벤트만 모니터링하고 페이지 닫기 이벤트는 모니터링하지 않으려면 beforeunload 및 unload 이벤트를 조합하여 사용할 수 있습니다.
window.addEventListener('beforeunload', function(event) { // 페이지가 새로 고쳐지기 전에 실행되는 코드 // 예를 들어 요청 보내기, 데이터 저장 등 }); { // 페이지가 닫힐 때 실행되는 코드 // 예를 들어 리소스 정리, 종료 시간 저장 등 });이런 방식으로 사용자가 페이지를 새로 고치면 beforeunload 이벤트가 트리거되고, 사용자가 페이지를 닫으면 beforeunload 및 unload 이벤트가 모두 트리거됩니다.
3. 다른 탐색 방법의 모니터링을 제외하고 JavaScript에서 웹 페이지의 새로 고침 이벤트만 모니터링하는 방법은 무엇입니까?
웹 페이지의 새로 고침 이벤트만 모니터링하고 다른 탐색 방법(예: 링크 클릭 또는 앞으로/뒤로 버튼 클릭)은 모니터링하지 않으려는 경우 PerformanceNavigation 인터페이스와 함께 beforeunload 이벤트를 사용할 수 있습니다.
window.addEventListener('beforeunload', function(event) { // 웹페이지 새로고침 이벤트인지 판단 if (performance.navigation.type ===performance.navigation.TYPE_RELOAD) { //페이지가 새로고침되기 전에 실행되는 코드 // 예를 들어 요청 보내기, 데이터 저장 및 기타 작업}});Performance.navigation.type을 사용하여 탐색 유형을 결정하세요. TYPE_RELOAD인 경우 페이지가 새로고침 작업에 의해 트리거됨을 의미합니다. 이런 방식으로 해당 코드는 웹 페이지 새로 고침 이벤트에서만 실행됩니다.
위 내용이 JavaScript 페이지 새로 고침 이벤트 모니터링 방법을 더 잘 이해하는 데 도움이 되기를 바랍니다. 다운코드 편집기는 실제 응용 프로그램에서 특정 요구 사항에 따라 적절한 방법을 선택하고 호환성을 처리해야 함을 상기시켜줍니다.