web-dev-qa-db-ja.com

javascriptでポップアップを開き、ユーザーがそれを閉じたときに検出することは可能ですか？

問題はほとんどタイトルにあります。

Javascriptでポップアップを開き、ユーザーがいつ閉じたかを検出することは可能ですか？

私はプロジェクト内でjqueryを使用しているので、jqueryソリューションが良いでしょう。乾杯！

javascriptjquerypopup
63
Pablo

ポップアップの内容を制御できる場合は、そこでウィンドウの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);
88
Tim Down

問題に対する非常に簡単な解決策があります。

まず、次のようなポップを開く新しいオブジェクトを作成します。

var winObj = window.open('http://www.google.com','google','width=800,height=600,status=0,toolbar=0');

このポップアップウィンドウがいつ閉じられるかを知るには、次のようなループでこれをチェックし続ける必要があります。

var loop = setInterval(function() {   
    if(winObj.closed) {  
        clearInterval(loop);  
        alert('closed');  
    }  
}, 1000);

これで、アラートを任意のJavaScriptコードに置き換えることができます。

楽しむ！ :)

6
Kshitij Mittal

unload および beforeunload ウィンドウイベントを調べてみてください。これらを監視すると、次のような方法でウィンドウが閉じられたときにDOMがアンロードされたときにコールバックする機会が与えられます。

var newWin = window.open('/some/url');
newWin.onunload = function(){
  // DOM unloaded, so the window is likely closed.
}
6
ajm

jQuery UIダイアログ を使用できる場合、実際にはcloseイベントがあります。

6
eje211

新しいウィンドウ呼び出しを開くには：

var wnd = window.open("file.html", "youruniqueid", "width=400, height=300");

そのウィンドウがいつ閉じるかを知りたい場合は、onunloadを使用します。

wnd.onunload = function(){
    // do something
};

を閉じる前にユーザーからの確認が必要な場合は、onbeforeunloadを使用します。

wnd.onbeforeunload = function(){
    return "are you sure?";
};
3
jAndy

仕事中の私のプロジェクトの1つでこれを行います。

トリックは、ポップアップが閉じられたときに呼び出す予定の親ページにJS関数を追加し、ポップアップでアンロードイベントをフックすることです。

window.openerプロパティは、このポップアップを生成したページを参照します。

たとえば、元のページでcallingPageFunctionという名前の関数を作成した場合、次のようにポップアップから呼び出します。

$(window).unload(function() {
    window.opener.callingPageFunction()
});

2つのメモ：

  1. これは、準備完了関数でラップする必要があります。
  2. 他のロジックが必要になる可能性があるため、匿名関数があります
3
Powerlord

私が現時点で考えることができる唯一の方法は、10秒後に自分自身を呼び出すタイムアウトを含む親ページに関数を作成することです。関数では、Cookieの値をチェックして、それがtrueかfalseかを確認することもできます。ポップアップウィンドウが閉じたら、Cookieをtrueに設定します。

お役に立てれば。

0
Ash Burlaczenko

はい、ポップアップウィンドウのonbeforeUnloadイベントを処理してから、次を使用して親ウィンドウで関数を呼び出します。

window.opener.myFunction()
0
TimS