[解決済み] ブラウザウィンドウのクローズイベントをキャプチャするには?
2022-04-26 06:47:57
質問
ブラウザのウィンドウやタブを閉じるイベントをキャプチャしたいのですが、どうすればよいですか? jQueryで以下を試しました。
jQuery(window).bind(
"beforeunload",
function() {
return confirm("Do you really want to close?")
}
)
しかし、それはフォームの送信時にも機能するので、私が望むものではありません。私は、ユーザーがウィンドウを閉じたときにのみトリガーされるイベントが欲しいのです。
どうすればいいですか?
その
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;
})
jQueryのバージョンが1.7より古い場合は、こちらをお試しください。
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
が数秒以上経ってから発生します。
関連
-
元のイベントが実行されなかった後に要素を追加するためのjQueryソリューション
-
Vueのクラススタイルの使い方の詳細
-
Vueのフォームイベントのデータバインディングの説明
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] セレクタの子を取得する方法は?
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] ブラウザウィンドウで現在のタブを閉じるには?
-
[解決済み] [Solved] ユーザーの入力が終わるまで、.keyup()ハンドラを遅延させる方法は?
-
[解決済み】未保存の変更を含むウェブページを離れる前にユーザーに警告を表示する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
vueにおけるv-forループオブジェクトのプロパティ
-
vueのプロジェクトでモックを使用する方法を知っていますか?
-
Vueのフォームイベントのデータバインディングの説明
-
[解決済み] Web API エラー - このリクエストはブロックされました; コンテンツは HTTPS で提供されなければなりません
-
[解決済み】React-Redux: アクションはプレーンオブジェクトでなければならない。非同期アクションにはカスタムミドルウェアを使用する
-
nullのプロパティinnerHTMLを読み取れません エラーメッセージ
-
JavaScriptのgetElementById()メソッド入門
-
[解決済み] jquery beforeunload ページを閉じる(離脱しない)とき?
-
[解決済み] ブラウザやタブの終了を検出する
-
[解決済み] ウィンドウを閉じたときやページを更新したときにJavaScriptのコードを実行しますか?