回答:
beforeunloadユーザーが何らかの理由であなたのページを離れる時はいつでもイベントが発生します。
たとえば、ユーザーがフォームを送信したり、リンクをクリックしたり、ウィンドウ（またはタブ）を閉じたり、アドレスバー、検索ボックス、またはブックマークを使用して新しいページに移動したりすると発生します。
次のコードを使用して、フォームの送信とハイパーリンク（他のフレームを除く）を除外できます。
var inFormOrLink;
$('a').on('click', function() { inFormOrLink = true; });
$('form').on('submit', function() { inFormOrLink = true; });
$(window).on("beforeunload", function() {
return inFormOrLink ? "Do you really want to close?" : null;
})1.7より古いjQueryバージョンの場合は、次のことを試してください。
var inFormOrLink;
$('a').live('click', function() { inFormOrLink = true; });
$('form').bind('submit', function() { inFormOrLink = true; });
$(window).bind("beforeunload", function() {
return inFormOrLink ? "Do you really want to close?" : null;
})このliveメソッドはsubmitイベントでは機能しないため、新しいフォームを追加する場合は、ハンドラーもフォームにバインドする必要があります。
別のイベントハンドラーが送信またはナビゲーションをキャンセルした場合、後でウィンドウが実際に閉じられると、確認プロンプトが失われることに注意してください。submitとclickイベントの時間を記録しbeforeunload、数秒後にそれが発生するかどうかを確認することで、これを修正できます。
Ctrl + r、F5、Ctrl + Shift + rおよびブラウザのURLを変更しますか？
.on()です。
おそらくbeforeunload、フォームのsubmitイベントハンドラー内でイベントハンドラーをアンバインドするだけです。
jQuery('form').submit(function() {
jQuery(window).unbind("beforeunload");
...
});onsubmit=...を各フォームに含める必要があります。（私は特定のwebappでページごとに多くのフォームを持っています）
クロスブラウザーソリューション（Chrome 21、IE9、FF15でテスト済み）の場合は、Slaksのコードを少し調整した次のコードの使用を検討してください。
var inFormOrLink;
$('a').live('click', function() { inFormOrLink = true; });
$('form').bind('submit', function() { inFormOrLink = true; });
$(window).bind('beforeunload', function(eventObject) {
var returnValue = undefined;
if (! inFormOrLink) {
returnValue = "Do you really want to close?";
}
eventObject.returnValue = returnValue;
return returnValue;
}); Firefox 4以降、「本当に終了しますか？」というメッセージに注意してください。は表示されません。FFは一般的なメッセージを表示するだけです。https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunloadのメモを参照してください
liveとbindの声明をonjQueryの最新レベルで素晴らしい作品これは、。ありがとう！
さまざまな理由でアンカータグを使用するTelerik（例：RadComboBox）やDevExpressなどのサードパーティコントロールでうまく機能するソリューションについては、次のコードを使用することを検討してください。ターゲットアンカータグ：
var inFormOrLink;
$('a[href]:not([target]), a[href][target=_self]').live('click', function() { inFormOrLink = true; });
$('form').bind('submit', function() { inFormOrLink = true; });
$(window).bind('beforeunload', function(eventObject) {
var returnValue = undefined;
if (! inFormOrLink) {
returnValue = "Do you really want to close?";
}
eventObject.returnValue = returnValue;
return returnValue;
});私の答えは、単純なベンチマークを提供することを目的としています。
@SLaksの回答を参照してください。
$(window).on("beforeunload", function() {
return inFormOrLink ? "Do you really want to close?" : null;
})ユーザーがページ（xボタンまたはCTRL+ W）を閉じるたびに、ブラウザは指定されたbeforeunloadコードを実行しますが、無期限ではありません。唯一の例外はreturn 'Do you really want to close?、ユーザーの応答を待つ確認ボックス（）です。
Chrome：2秒。
Firefox：∞（またはダブルクリック、または強制終了）
Edge：∞（またはダブルクリック）
Explorer 11：0秒。
サファリ：TODO
これをテストするために使用したもの：
ブラウザーがページをシャットダウンする前に（同期的に）できるだけ多くの要求を送信することです。
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function request() {
return $.ajax({
type: "GET",
url: "http://localhost:3030/" + Date.now(),
async: true
}).responseText;
}
window.onbeforeunload = () => {
while (true) {
request();
}
return null;
}
</script>
</body>
</html>Chrome出力：
GET /1480451321041 404 0.389 ms - 32
GET /1480451321052 404 0.219 ms - 32
...
GET /hello/1480451322998 404 0.328 ms - 32
1957ms ≈ 2 seconds // we assume it's 2 seconds since requests can take few milliseconds to be sent.Slaksの回答を使用しましたが、onbeforeunload returnValueが文字列として解析され、ブラウザーの確認ボックスに表示されるため、そのままでは機能しませんでした。そのため、「true」のように値trueが表示されました。
リターンを使うだけでうまくいきました。これが私のコードです
var preventUnloadPrompt;
var messageBeforeUnload = "my message here - Are you sure you want to leave this page?";
//var redirectAfterPrompt = "http://www.google.co.in";
$('a').live('click', function() { preventUnloadPrompt = true; });
$('form').live('submit', function() { preventUnloadPrompt = true; });
$(window).bind("beforeunload", function(e) {
var rval;
if(preventUnloadPrompt) {
return;
} else {
//location.replace(redirectAfterPrompt);
return messageBeforeUnload;
}
return rval;
})残念ながら、それがリロード、新しいページのリダイレクト、ブラウザのクローズのいずれであっても、イベントがトリガーされます。代わりの方法は、イベントをトリガーするIDをキャッチし、それがフォームである場合は関数をトリガーせず、フォームのIDでない場合は、ページが閉じたときに実行したいことを行います。それも直接可能で、退屈な作業かどうかはわかりません。
顧客がタブを閉じる前に、いくつかの小さなことができます。javascriptはブラウザのタブを閉じる/ブラウザを閉じるを検出しますが、アクションのリストが大きく、タブが終了する前に閉じる場合は無力です。あなたはそれを試すことができますが、私の経験ではそれに依存しません。
window.addEventListener("beforeunload", function (e) {
var confirmationMessage = "\o/";
/* Do you small action code here */
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Webkit, Safari, Chrome
});私の問題：「onbeforeunload」イベントは、送信（クリック）の数が奇数の場合にのみトリガーされます。私のソリューションを機能させるために、SOの同様のスレッドからのソリューションの組み合わせがありました。よく私のコードが話します。
<!--The definition of event and initializing the trigger flag--->
$(document).ready(function() {
updatefgallowPrompt(true);
window.onbeforeunload = WarnUser;
}
function WarnUser() {
var allowPrompt = getfgallowPrompt();
if(allowPrompt) {
saveIndexedDataAlert();
return null;
} else {
updatefgallowPrompt(true);
event.stopPropagation
}
}
<!--The method responsible for deciding weather the unload event is triggered from submit or not--->
function saveIndexedDataAlert() {
var allowPrompt = getfgallowPrompt();
var lenIndexedDocs = parseInt($('#sortable3 > li').size()) + parseInt($('#sortable3 > ul').size());
if(allowPrompt && $.trim(lenIndexedDocs) > 0) {
event.returnValue = "Your message";
} else {
event.returnValue = " ";
updatefgallowPrompt(true);
}
}
<!---Function responsible to reset the trigger flag---->
$(document).click(function(event) {
$('a').live('click', function() { updatefgallowPrompt(false); });
});
<!--getter and setter for the flag---->
function updatefgallowPrompt (allowPrompt){ //exit msg dfds
$('body').data('allowPrompt', allowPrompt);
}
function getfgallowPrompt(){
return $('body').data('allowPrompt');
}確認してください...
function wopen_close(){
var w = window.open($url, '_blank', 'width=600, height=400, scrollbars=no, status=no, resizable=no, screenx=0, screeny=0');
w.onunload = function(){
if (window.closed) {
alert("window closed");
}else{
alert("just refreshed");
}
}
}var validNavigation = false;
jQuery(document).ready(function () {
wireUpEvents();
});
function endSession() {
// Browser or broswer tab is closed
// Do sth here ...
alert("bye");
}
function wireUpEvents() {
/*
* For a list of events that triggers onbeforeunload on IE
* check http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx
*/
window.onbeforeunload = function () {
debugger
if (!validNavigation) {
endSession();
}
}
// Attach the event keypress to exclude the F5 refresh
$(document).bind('keypress', function (e) {
debugger
if (e.keyCode == 116) {
validNavigation = true;
}
});
// Attach the event click for all links in the page
$("a").bind("click", function () {
debugger
validNavigation = true;
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function () {
debugger
validNavigation = true;
});
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function () {
debugger
validNavigation = true;
});
}`enter code here`以下は私のために働いた。
$(window).unload(function(event) {
if(event.clientY < 0) {
//do whatever you want when closing the window..
}
});event.clientYあなたは、ブラウザのクローズボタンやタブを閉じる]ボタンをクリックすると、負です。ただし、キーボードショートカット（F5、Ctrl-R）を使用してページをリロードしたり、キーボードのショートカーソル（Alt-F4など）を使用してブラウザを閉じたりすると、この値は正になります。したがって、ページのリロードイベントとブラウザの閉じるイベントを区別するために、イベントの位置に依存することはできません。