JavaScript に基づいてブラウザが閉じられているか更新されているかを判断する (非常に正確)

JavaScript に基づいてブラウザが閉じられているか更新されているかを判断する (非常に正確)_javascript スキル

WBOY

リリース： 2016-05-16 15:16:52

オリジナル

2945 人が閲覧しました

この記事は編集者が個人的に参考になると考えてまとめた核心的な内容です。具体的な内容については以下をご覧ください。

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 イベントのデータ間隔は 2 ミリ秒を超えませんが、サーバーにアクセスする必要があるため、更新中の間隔は 100% 2 ミリ秒より大きくなります。私のテスト結果は以下に掲載されています:

以下では、リスニングイベントを閉じ、更新するか閉じるかを決定するブラウザを紹介します

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 部分は、ブラウザーの閉じるボタンのマウスクリック、ブラウザーのステータスバーでのマウスの右クリックによるポップアップメニューの閉じ、およびさまざまなショートカットキーを監視できます。ただし、ブラウザ上隅のアイコンをダブルクリックしてブラウザを閉じ、タブを閉じた場合は監視できません。

以上がこの記事の全内容です、文章が下手でしたら貴重なご意見をお聞かせください。