JavaScript(초정밀)_javascript 기술을 기반으로 브라우저가 닫혔는지 새로 고쳤는지 확인합니다.-JS 튜토리얼-php.cn

JavaScript(초정밀)_javascript 기술을 기반으로 브라우저가 닫혔는지 새로 고쳤는지 확인합니다.

WBOY

풀어 주다： 2016-05-16 15:16:52

원래의

2977명이 탐색했습니다.

이 글은 편집자가 정리한 핵심 내용입니다. 구체적인 내용은 아래를 참조해 주세요.

Onload는 페이지가 로드될 때만 실행됩니다.
페이지가 닫혀 있을 때만 onunload
를 실행하세요. 페이지가 새로 고쳐지면 onbeforeunload가 먼저 실행된 다음 onunload, 마지막으로 onload가 실행됩니다.

검증 후 내린 결론:

//IE, Google, 360의 경우:

//Onload는 페이지가 로드될 때만 실행됩니다
//페이지가 새로고침되면 새로고침 전에 onbeforeunload 이벤트가 실행되고, 이전 페이지가 새 페이지로 교체되려고 할 때 onunload 이벤트가 실행되고, 마지막으로 onload 이벤트가 실행됩니다.
//페이지가 닫히면 onbeforeunload 이벤트가 먼저 발생한 다음 onunload 이벤트가 발생합니다.

//Firefox의 경우:

//페이지가 새로고침되면 페이지가 닫힐 때 onunload만 실행되고 onbeforeunload 이벤트만 실행됩니다
그럼 주제로 돌아가서, 브라우저가 닫혔는지 아니면 새로 고쳐졌는지 확인하는 방법은 무엇입니까? 인터넷에 떠도는 다양한 의견에 따라 수백번 시도했지만 성공하지 못했습니다.

window.onbeforeunload = function() //author: meizz 
{ 
var n = window.event.screenX - window.screenLeft; 
var b = n > document.documentElement.scrollWidth-20; 
if(b && window.event.clientY < 0 || window.event.altKey) 
{ 
alert("是关闭而非刷新"); 
window.event.returnValue = ""; //这里可以放置你想做的操作代码 
}else
{ 
alert("是刷新而非关闭"); 
} 
} 
window.onbeforeunload = function() //author: meizz 
{ 
var n = window.event.screenX - window.screenLeft; 
var b = n > document.documentElement.scrollWidth-20; 
if(b && window.event.clientY < 0 || window.event.altKey) 
{ 
alert("是关闭而非刷新"); 
window.event.returnValue = ""; //这里可以放置你想做的操作代码 
}else
{ 
alert("是刷新而非关闭"); 
} 
}

로그인 후 복사

및

function CloseOpen(event) {
if(event.clientX<=0 && event.clientY<0) {
alert("关闭");
}
else
{
alert("刷新或离开");
}
}
</script>
<body onunload="CloseOpen(event)">

로그인 후 복사

............

이 방법들 중 어느 것도 효과가 없었지만 포기하지 않고 고민하고 또 고민했어요...

위의 내용을 토대로 저는 결론을 내렸습니다.

//IE, Google, 360의 경우:

//Firefox의 경우:

//페이지가 새로고침되면 페이지가 닫힐 때 onunload만 실행되고 onbeforeunload 이벤트만 실행됩니다
새로고침할 때 먼저 onbeforeunload를 수행한 후 서버 요청 데이터를 가져옵니다. 새 페이지가 이전 페이지를 대체하려고 하면 onunload 이벤트가 발생합니다. 페이지가 닫히면 onbeforeunload 이벤트가 먼저 발생하고 즉시 onunload 이벤트가 발생합니다. 그런 다음 새로 고칠 때 onbeforeunload와 onunload 사이의 시간은 닫을 때보다 확실히 더 길어지며 이는 실제로 테스트한 경우입니다.

게시된 테스트 코드:

var _beforeUnload_time = 0, _gap_time = 0;
var is_fireFox = navigator.userAgent.indexOf("Firefox")>-1;//是否是火狐浏览器
window.onunload = function (){
_gap_time = new Date().getTime() - _beforeUnload_time;
if(_gap_time <= 5) 
$.post(pathName+"/back/bi!aaaa.s2&#63;t="+_beforeUnload_time,{msg:"浏览器关闭",time:_gap_time},function(json){},"text");
else 
$.post(pathName+"/back/bi!aaaa.s2&#63;t="+_beforeUnload_time,{msg:"浏览器刷新",time:_gap_time},function(json){},"text");
}
window.onbeforeunload = function (){
_beforeUnload_time = new Date().getTime();
if(is_fireFox)//火狐关闭执行
$.post(pathName+"/back/bi!aaaa.s2&#63;t="+_beforeUnload_time,{msg:"火狐关闭"},function(json){},"text");
};

로그인 후 복사

서버 코드(SSH 구현):

public void aaaa(){
System.out.println(base.getParameter("msg")+"，间隔："+base.getParameter("time"));
}

로그인 후 복사

if(_gap_time <= 5)의 경우 여기의 5는 클라이언트 브라우저에 따라 달라지며 클라이언트의 컴퓨터 구성과도 관련되는 기본값입니다. 내 컴퓨터가 브라우저를 닫을 때 onbeforeunload 이벤트는 다음과 같습니다. onunload 이벤트의 데이터 간격은 2ms를 넘지 않으며, 서버에 접속해야 하므로 새로 고침 간격은 2ms보다 100% 더 큽니다. 내 테스트 결과는 다음과 같습니다.

다음은 청취 이벤트를 닫고 새로 고칠지 닫을지를 결정하는 브라우저를 소개합니다.

onunload 또는 onbeforeunload를 사용하면 브라우저 종료 이벤트를 모니터링할 수 있지만 닫기와 새로 고침을 구별하는 것은 불가능합니다. 다음 js 코드는 브라우저를 닫는 이벤트를 부분적으로 모니터링할 수 있습니다!

//鼠标相对于用户屏幕的水平位置 - 窗口左上角相对于屏幕左上角的水平位置 = 鼠标在当前窗口上的水平位置
var n = window.event.screenX - window.screenLeft;
//鼠标在当前窗口内时，n<m，b为false；鼠标在当前窗口外时，n>m，b为true。20这个值是指关闭按钮的宽度
var b = n > document.documentElement.scrollWidth-20;
//鼠标在客户区内时，window.event.clientY>0；鼠标在客户区外时，window.event.clientY<0
if(b && window.event.clientY < 0 || window.event.altKey || window.event.ctrlKey){
关闭浏览器时你想做的事
}else if(event.clientY > document.body.clientHeight || event.altKey){
关闭浏览器时你想做的事
}

로그인 후 복사

이 js 조각은 브라우저 닫기 버튼을 마우스로 클릭하는 것, 브라우저 상태 표시줄을 마우스 오른쪽 버튼으로 클릭하여 팝업 메뉴를 닫는 것, 다양한 단축키를 모니터링할 수 있습니다. 단, 브라우저 상단의 아이콘을 더블클릭하여 브라우저를 닫고 탭을 닫는 것은 모니터링할 수 없습니다.

위 내용은 이 글의 전체 내용입니다. 혹시 잘 작성되지 않았다면 소중한 의견 부탁드립니다.