ポップアップを開き、ポップアップを閉じるときに親ページを更新する


93

JavaScriptでwindow.openによってポップアップウィンドウを開きました。このポップアップウィンドウを閉じるときに親ページを更新したいのですが(oncloseイベント?)、どうすればよいですか?

window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");

1
これを確認してください:stackoverflow.com/questions/18321323/…誰かを助けるかもしれません
NoNaMe

回答:


230

' window.opener ' を使用して親ウィンドウにアクセスできるので、子ウィンドウに次のように記述します。

<script>
    window.onunload = refreshParent;
    function refreshParent() {
        window.opener.location.reload();
    }
</script>

私はwindow.openerを知りませんでした、ありがとう!私は常に子ウィンドウのcontentWindowの変数に呼び出し元ウィンドウを配置します。:-/
わかりました-SEは悪です

3
子ページでJavaScriptを制御しない場合(OAuthフローなど)、@ ZuulのソリューションでlikeをpopupWindow.closed使用して確認する必要がありますsetInterval
jchook 2016年

34

ポップアップウィンドウには、リッスンできるcloseイベントはありません。

一方、ウィンドウが閉じられたときにtrueに設定されるclosedプロパティがあります。

タイマーを設定して、その閉じたプロパティをチェックし、次のようにすることができます。

var win = window.open('foo.html', 'windowName',"width=200,height=200,scrollbars=no");   
var timer = setInterval(function() {   
    if(win.closed) {  
        clearInterval(timer);  
        alert('closed');  
    }  
}, 1000); 

この実用的なフィドルの例を見てください!


1
タイマーは使いたくない!他のアイデア?
ArMaN 2012年

1
ややハックですが、タイマーを使用するとすべてのブラウザーで最適に動作すると思います。
わかりました-SEは

ユーザーが最初のページから移動した後にのみonunloadイベントがトリガーされるので、ポップアップが閉じる前に複数のページがある場合にも、これは最良のソリューションです。
AntonChanning 2016年

14

あなたの子ページに、これらを入れてください:

<script type="text/javascript">
    function refreshAndClose() {
        window.opener.location.reload(true);
        window.close();
    }
</script>

そして

<body onbeforeunload="refreshAndClose();">

しかし、優れたUIデザインとして、buttonユーザーフレンドリーであるため、Closeを使用する必要があります。以下のコードを参照してください。

<script type="text/javascript">
    $(document).ready(function () {
        $('#btn').click(function () {
            window.opener.location.reload(true);
            window.close();
        });
    });
</script>

<input type='button' id='btn' value='Close' />

ユーザーがボタンをクリックしてページを更新してポップアップウィンドウを閉じたときではなく、ポップアップウィンドウを閉じたとき
gengkev

@gengkev、私はOPがウィンドウを閉じるためにイベントをアタッチしたいと思っていましたが、ボタンを使用する方がUIデザインが優れていると思います。ただし、両方のコードを含めました。お知らせ下さい。
Ray Cheng

<body onbeforeunload = "refreshAndClose();"> <script type = "text / javascript"> function refreshAndClose(){window.opener.location.reload(true);を使用しました。} self.close(); </ script>
steve0nz 2013

3

私はこれを使います:

<script language='javascript'>
var t;
function doLoad() {
t = setTimeout("window.close()",1000);
}

</script>
<script type="text/javascript">
function refreshAndClose() {
    window.opener.location.reload(true);
    window.close();
}
</script>
<body onbeforeunload="refreshAndClose();" onLoad='doLoad()''>

ウィンドウを閉じると、親ウィンドウが更新されます。


2

window.openは、開かれたURLがSame Origin Policyに準拠している場合、新しく作成されたウィンドウへの参照を返します。

これはうまくいくはずです:

function windowClose() {
    window.location.reload();
}

var foo = window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");
foo.onbeforeunload= windowClose;​

ユーザーが開いているウィンドウのリンクをたどることができる場合は機能しません。そして、暗黙的にabout:blankのままにしておくと、ターゲットURLが最初にロードされる前にアンロードイベントがスローされると確信しています。(SOPについて言及する場合は+1)
承知-SEは

2

私の場合、親ページのリンクボタンをクリックしてポップアップウィンドウを開きました。を使用して子を閉じるときに親を更新するには

window.opener.location.reload();

子ウィンドウで子ウィンドウを再度開きました(おそらくビューステートが原因である可能性があります。間違っている場合は修正してください)。そこで、親のページをリロードせず、同じURLを割り当ててページを再度ロードすることにしました。

ポップアップウィンドウを閉じた後にポップアップが再び開かないようにするには、これが役立つ場合があります。

window.onunload = function(){
    window.opener.location = window.opener.location;};

1

アプリがHTML5対応のブラウザで実行されている場合。postMessageを使用できます。与えられた例はあなたのものと非常に似ています。


「それ以外の場合、異なるウィンドウ間で通信することはできません。」間違っている。テクニックはまだ可能ですが、@ Mosesからの回答をお勧めします
gengkev

-1削除されました。小さな例を挙げれば、+ 1も得られます;-)
わかりました-SEは

気にしないで。しかし、IEではwindow.openerは問題ないと思います。やってみます。
Chris Li

1
@ OK、IE7、8でうまく動作します。とてもいいです。以前は知りませんでした。モーセの+1。
Chris Li

1
@ArMaN:jsfiddle.net/8c2e4/10、window.openerを使用します。これを使用して、環境をテストできます。
Chris Li、

1

これを試して

        self.opener.location.reload(); 

現在のウィンドウの親を開き、場所を再読み込みします。


0

あなたはすべてを作ることができるステップの後に親コマンド(親はウィンドウです)でメインページに到達できます...

    function funcx() {
        var result = confirm('bla bla bla.!');
        if(result)
            //parent.location.assign("http://localhost:58250/Ekocc/" + document.getElementById('hdnLink').value + "");
            parent.location.assign("http://blabla.com/" + document.getElementById('hdnLink').value + "");
    } 

0

親ページで以下のコードを使用できます。

<script>
    window.onunload = refreshParent;
    function refreshParent() {
      window.opener.location.reload();
    }
</script>

0

次のコードは、親ウィンドウのポストを更新して管理します:

function ManageQB_PopUp() {
            $(document).ready(function () {
                window.close();
            });
            window.onunload = function () {
                var win = window.opener;
                if (!win.closed) {
                    window.opener.location.reload();
                }
            };
        }
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.