javascriptでポップアップを開き、ユーザーがそれを閉じたときに検出することは可能ですか?
2023-09-04 02:43:49
質問
質問はタイトルにかなり込められています。
javascriptでポップアップを開き、ユーザーがそれを閉じたときに検出することは可能でしょうか(そしてどのように)?
私はプロジェクト内でjqueryを使用しているので、jqueryのソリューションが良いだろう。乾杯!
どのように解決するのですか?
ポップアップの内容を制御できるのであれば、ウィンドウの
unload
イベントを処理し、元のウィンドウには
opener
プロパティを介して元のウィンドウに通知し、オープナーが閉じられたかどうかを最初にチェックします。これはOperaで常に動作するとは限らないことに注意してください。
window.onunload = function() {
var win = window.opener;
if (!win.closed) {
win.someFunctionToCallWhenPopUpCloses();
}
};
というのは
unload
イベントは、ウィンドウが閉じられたときだけでなく、ユーザがポップアップのページから移動するたびに発生するので、ポップアップが実際に閉じたかどうかを
someFunctionToCallWhenPopUpCloses
:
var popUp = window.open("popup.html", "thePopUp", "");
function someFunctionToCallWhenPopUpCloses() {
window.setTimeout(function() {
if (popUp.closed) {
alert("Pop-up definitely closed");
}
}, 1);
}
ポップアップの内容を制御できない場合、またはターゲットとなるブラウザのいずれかが
unload
イベントをサポートしていない場合は、メインウィンドウで何らかのポーリングソリューションを使用することになります。適切な間隔に調整します。
var win = window.open("popup.html", "thePopUp", "");
var pollTimer = window.setInterval(function() {
if (win.closed !== false) { // !== is required for compatibility with Opera
window.clearInterval(pollTimer);
someFunctionToCallWhenPopUpCloses();
}
}, 200);
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptのオブジェクトをループスルーまたは列挙するにはどうすればよいですか?
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] JavaScriptで二重引用符と単一引用符はいつ使うべきですか?
-
[解決済み] HTMLマークアップのどこに<script>タグを記述すればよいですか?
-
[解決済み] jQuery Ajax呼び出し後のリダイレクトリクエストを管理する方法
-
[解決済み] jQueryでJavaScriptオブジェクトから選択する際に、オプションを追加する最も良い方法は何ですか?
-
[解決済み] セレクトボックスのオプションをすべて削除してから、オプションを1つ追加して、jQueryで選択するにはどうすればよいですか?
-
[解決済み] JavaScriptでURLの#hashを確認する方法は?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] Node.jsでbase64エンコードされた画像をAmazon S3へアップロードする
-
[解決済み] javascript の関数から `undefined` と `null` のどちらを返すのが良いのでしょうか?
-
[解決済み] Reactコンポーネントでthis.setStateを複数回使用するとどうなりますか?
-
[解決済み] Javascript 空の配列の削減
-
[解決済み] CORS: 認証モードは 'include' です。
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
-
[解決済み] これは純関数ですか?
-
[解決済み] リダイレクトされずにHTMLフォームを送信する方法