사용자가 웹 페이지를 떠 났는지 감지하는 가장 좋은 방법은 무엇입니까?
onunload자바 스크립트 이벤트 때마다 작동하지 않습니다 (HTTP 요청은 시간이 브라우저를 종료하는 데 필요한보다 오래 걸립니다).
하나를 생성하면 현재 브라우저에 의해 차단 될 수 있습니다.
답변
onbeforeunload이벤트를 보십시오 : 페이지가 언로드되기 직전에 시작됩니다. 또한 사용자가 실제로 떠나기를 원하는지 다시 물어볼 수 있습니다. 데모 onbeforeunload 데모를 참조하십시오 .
또는 Ajax가 떠날 때 요청을 보낼 수 있습니다 .
답변
모질라 개발자 네트워크는 onbeforeunload에 대한 좋은 설명과 예제를 가지고 있습니다.
페이지가 더러워진 경우 (예 : 사용자가 일부 데이터를 입력 한 경우) 페이지를 떠나기 전에 사용자에게 경고하려는 경우 :
window.addEventListener('beforeunload', function(e) {
var myPageIsDirty = ...; //you implement this logic...
if(myPageIsDirty) {
//following two lines will cause the browser to ask the user if they
//want to leave. The text of this dialog is controlled by the browser.
e.preventDefault(); //per the standard
e.returnValue = ''; //required for Chrome
}
//else: user is allowed to leave without a warning dialog
});답변
대체 솔루션은 다음과 같습니다. 대부분의 브라우저에서 탐색 컨트롤 (탐색 모음, 탭 등)이 페이지 내용 영역 위에 있으므로 마우스 포인터를 상단을 통해 페이지를 떠나는 것을 감지하고 ” 나가기 전에 ” 대화. 그것은 눈에 거슬리지 않으며 실제로 떠나기 위해 작업을 수행 하기 전에 사용자와 상호 작용할 수 있습니다 .
$(document).bind("mouseleave", function(e) {
if (e.pageY - $(window).scrollTop() <= 1) {
$('#BeforeYouLeaveDiv').show();
}
});단점은 물론 사용자가 실제로 떠나려고 하는 추측 이지만 대부분의 경우 정확합니다.
답변
이를 위해 다음을 사용하고 있습니다.
window.onbeforeunload = function (e) {
}페이지가 언로드되기 직전에 시작됩니다.
답변
이 질문에 대한 답변은 알고 있지만 페이지로드가 발생할 때뿐만 아니라 실제 브라우저가 닫힐 때만 트리거하려는 것이 있으면이 코드를 사용할 수 있습니다.
window.onbeforeunload = function (e) {
if ((window.event.clientY < 0)) {
//window.localStorage.clear();
//alert("Y coords: " + window.event.clientY)
}
};내 예에서는 브라우저가 닫혀있을 때만 로컬 저장소를 지우고 마우스와 y 좌표로 사용자에게 경고합니다. 프로그램 내 모든 페이지로드에서 무시됩니다.
답변
이를 수행하는 한 가지 (약간 해키) 방법은 서버 측에 대한 AJAX 호출로 사이트에서 벗어나는 링크를 대체하고 링크하는 것입니다. 사용자가 떠나고 있음을 나타내는 동일한 Javascript 블록을 사용하여 사용자를 외부 사이트로 이동시킵니다. 요청했습니다.
물론 사용자가 브라우저 창을 닫거나 새 URL을 입력하면 작동하지 않습니다.
이 문제를 해결하려면 페이지에서 Javascript의 setTimeout ()을 사용하여 몇 초마다 AJAX 호출을 수행해야합니다 (사용자가 떠 났는지 얼마나 빨리 알고 있는지에 따라 다름).
답변
Service Workers 덕분에 브라우저가 지원하는 경우 클라이언트 측에서 Adam 과 완전히 유사한 솔루션을 구현할 수 있습니다. 하트 비트 요청을 피하십시오.
// The delay should be longer than the heartbeat by a significant enough amount that there won't be false positives
const liveTimeoutDelay = 10000
let liveTimeout = null
global.self.addEventListener('fetch', event => {
clearTimeout(liveTimeout)
liveTimeout = setTimeout(() => {
console.log('User left page')
// handle page leave
}, liveTimeoutDelay)
// Forward any events except for hearbeat events
if (event.request.url.endsWith('/heartbeat')) {
event.respondWith(
new global.Response('Still here')
)
}
})