ウィンドウを閉じるとき、またはページを更新するときにJavaScriptコードを実行しますか？

110

ユーザーがブラウザーウィンドウを閉じたとき、またはページを更新したときに、最終的なJavaScriptコードを実行する方法はありますか？

onloadに似ていますが、oncloseのようなものを考えていますか？ありがとう。

onbeforeunloadメソッドは好きではありません。これは常に確認ボックスがポップアップ表示される（ページを離れる/ mozillaにとどまる）または（リロード/ chromeにリロードしない）です。コードを静かに実行する方法はありますか？

javascript browser

— ピーター
ソース

1

可能な重複：stackoverflow.com/questions/805463/...

— 1.44メガバイト

重複の可能性：stackoverflow.com/questions/1631959/browser-window-close-event

— Horen

18

待ってください-これは実際には重複していません...ユーザーへのプロンプトなしで何かを実行する方法を知りたいのです

— Phildo

84

そこの両方であるwindow.onbeforeunloadとwindow.onunloadブラウザに応じて異なる使用されています、。ウィンドウのプロパティを関数に設定するか、次のように使用して、それらを割り当てることができます.addEventListener。

window.onbeforeunload = function(){
   // Do something
}
// OR
window.addEventListener("beforeunload", function(e){
   // Do something
}, false);

通常、onbeforeunloadユーザーがページを離れることを停止する必要がある場合に使用されます（たとえば、ユーザーは保存されていないデータで作業しているため、離れる前に保存する必要があります）。私の知る限り、はOperaでonunloadサポートされていませんが、いつでも両方を設定できます。

— JCOC611
ソース

これは私にとってうまくいきました：Firefox（69.0.2）とChrome（77.0.3865.90）

— FelipeCaparelli

51

さて、私はこれのための実用的な解決策を見つけました、それはbeforeunloadイベントを使用してからハンドラーをreturnにすることで構成されていnullます。これにより、確認ボックスがポップアップすることなく、必要なコードが実行されます。それはこのようなものになります：

window.onbeforeunload = closingCode;
function closingCode(){
   // do something...
   return null;
}

お役に立てれば。

— ピーター
ソース

10

これは、ナビゲート時やリフレッシュ時（F5）にも発生しませんか？もしそうなら、それは本当に問題を解決しません...

— Jago

1

テストされていませんが、私return false;は同じことをする（つまり、デフォルトの動作を妨げる）と思い、より意味的に正しいです。

— collimarco 2013

1

falseを返すと、ページを離れるかどうかを尋ねるダイアログボックスがポップアップします。アンカーでテストしました。nullを返すとダイアログはポップアップしませんでしたが、それでもconsole.logは表示されました

— Ricky Stam

20

ユーザーがページを離れたことをサーバーに知らせたい場合があります。これは、たとえば、サーバーに一時的に保存されている未保存の画像をクリーンアップしたり、そのユーザーを「オフライン」としてマークしたり、セッションが終了したときにログを記録したりするのに役立ちます。

beforeunloadこれまでは、関数でAJAXリクエストを送信していましたが、これには2つの問題があります。非同期リクエストを送信した場合、リクエストが正しく実行される保証はありません。同期リクエストを送信すると、信頼性は向上しますが、リクエストが完了するまでブラウザはハングします。これが遅い要求である場合、これはユーザーにとって非常に不便です。

幸いなことに、私たちは今持っていnavigator.sendBeacon()ます。このsendBeacon()メソッドを使用することにより、ユーザーエージェントがアンロードを遅延したり、次のナビゲーションのパフォーマンスに影響を与えたりする機会がある場合、データは非同期でWebサーバーに送信されます。これにより、分析データの送信に関するすべての問題が解決されます。データは確実に送信され、非同期に送信され、次のページの読み込みに影響を与えません。以下にその使用例を示します。

window.addEventListener("unload", logData, false);

function logData() {
  navigator.sendBeacon("/log.php", analyticsData);
}

sendBeacon()でサポートされています：

エッジ14
Firefox 31
Chrome 39
Safari 11.1
オペラ26
iOS Safari 11.4

それは現在サポートされていません：

インターネットエクスプローラ
Opera Miniは

サポートされていないブラウザのサポートを追加する必要がある場合のsendBeacon（）のポリフィルは次のとおりです。ブラウザでメソッドが使用できない場合、代わりに同期AJAXリクエストが送信されます。

— マイク
ソース

この質問は、「サーバーにリクエストを送信する」ケースの範囲内でした。アイデアは、ユーザーごとに開いているタブにタブを保持し、タブが閉じられたときにバックエンドでクリーンアップできるようにすることでした。

— ピーター

@Peter完全を期すために含めていましたが、削除しました。

— Mike

@マイク、あなたの答えを削除しないでください。選択したベストアンサー（それはあなたのものであるはずです）を完了するだけでなく、ウィンドウの終了または終了をキャッチするために使用されるイベントも提示します

— Alex8752

@ Alex8752私は自分の回答を削除しませんでした。質問とは関係のない部分を編集しました。ここで確認できます。

— Mike

1

@AshokKumarあなたはあなたがサーバーに送るものを制御しています。GETで送信したい場合、GETにhttp://example.com/script.php?token=something&var1=val1&var2=val2値を入れるなど、リクエストを送信できないようなものはありません。

— マイク

14

jQueryバージョン：

$(window).unload(function(){
    // Do Something
});

更新：jQuery 3：

$(window).on("unload", function(e) {
    // Do Something
});

おかげでギャレット

— パラス
ソース

8

ここのドキュメントでは、onbeforeunloadイベントをリッスンすることや、ウィンドウにイベントリスナーを追加することを推奨しています。

window.addEventListener('beforeunload', function(event) {
  //do something here
}, false);

また、ウィンドウの.onunloadプロパティまたは.onbeforeunloadプロパティに関数または関数参照を設定することもできます。

動作はブラウザー間で標準化されていませんが、関数は、ページを離れるかどうかを確認するときにブラウザーが表示する値を返す場合があります。

— Davejoem
ソース

7

使用できますwindow.onbeforeunload。

window.onbeforeunload = confirmExit;
function confirmExit(){
    alert("confirm exit is being called");
    return false;
}

— ガープリット・シン
ソース

3

イベントはと呼ばれるbeforeunloadので、に関数を割り当てることができますwindow.onbeforeunload。

— Phssthpok
ソース

-2

あなたはこのようなことを試すことができます：

<SCRIPT language="JavaScript">
<!--
function loadOut()
{
window.location="http://www.google.com";
}
//-->
</SCRIPT>

<body onBeforeUnload="loadOut()">

— デーンバリア
ソース

23

注意してください、これを古代ではなく読んでいる人たち-これは古代のJSとHTMLであり、ここでの他の提案ははるかに優れています。

— RAnders00