web-dev-qa-db-ja.com

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

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

Onloadに似ているが、oncloseに近いものを考えていますか？ありがとう。

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

javascriptbrowser
90
Peter

わかりました、私はこれのための実用的なソリューションを見つけました、それはbeforeunloadイベントを使用し、次にハンドラーがnullを返すようにすることから成ります。これにより、確認ボックスがポップアップせずに目的のコードが実行されます。次のようになります。

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

お役に立てれば。

42
Peter

window.onbeforeunloadとwindow.onunloadの両方があり、ブラウザーによって使用方法が異なります。ウィンドウプロパティを関数に設定するか、.addEventListenerを使用することで、それらをアサートできます。

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

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

67
JCOC611

jQueryバージョン：

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

更新：jQuery 3：

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

ありがとう、ギャレット

13
Paras

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

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

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

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

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

sendBeacon()は サポート で：

  • エッジ14
  • Firefox 31
  • クローム39
  • Safari 11.1
  • オペラ26
  • iOS Safari 11.4

現在、以下ではサポートされていません。

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

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

8
Mike

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

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

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

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

6
davejoem

window.onbeforeunloadを使用できます。

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

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

3
Phssthpok