Öffnen Sie das Popup und aktualisieren Sie die übergeordnete Seite beim Schließen des Popups


93

Ich habe ein Popup-Fenster für Fenster geöffnet. Öffnen Sie in JavaScript. Ich möchte die übergeordnete Seite aktualisieren, wenn ich dieses Popup-Fenster schließe. (Ereignis schließen?) Wie kann ich das tun?

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

1
Bitte überprüfen Sie dies: stackoverflow.com/questions/18321323/… könnte jemandem helfen
NoNaMe

Antworten:


230

Sie können mit ' window.opener ' auf das übergeordnete Fenster zugreifen . Schreiben Sie also Folgendes in das untergeordnete Fenster:

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

Ich kannte window.opener nicht, danke! Ich habe das Aufruferfenster immer in eine Variable im contentWindow des Kindes eingefügt. : - /
kay - SE ist böse

3
Wenn Sie JavaScript auf der untergeordneten Seite nicht steuern (z. B. OAuth-Flow), müssen Sie die popupWindow.closedVerwendung von setIntervallike in @ Zuuls Lösung überprüfen .
Jchook

34

Das Popup-Fenster enthält kein Abschlussereignis, das Sie anhören können.

Andererseits gibt es eine geschlossene Eigenschaft, die beim Schließen des Fensters auf true gesetzt wird.

Sie können einen Timer einstellen, um diese geschlossene Eigenschaft zu überprüfen und folgendermaßen vorzugehen:

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); 

Sehen Sie sich dieses funktionierende Geigenbeispiel an !


1
Ich möchte keinen Timer verwenden! irgendeine andere Idee?
ArMaN

1
Etwas hackisch, aber ich denke, dass die Verwendung eines Timers in allen Browsern am besten funktioniert.
Kay - SE ist böse

Dies ist auch die beste Lösung, wenn das Popup vor dem Schließen mehrere Seiten enthält, da das Ereignis onunload erst ausgelöst wird, nachdem der Benutzer von der ersten Seite weg navigiert.
AntonChanning

14

Fügen Sie auf Ihrer Kinderseite Folgendes ein:

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

und

<body onbeforeunload="refreshAndClose();">

Als gutes UI-Design sollten Sie jedoch Close verwenden, buttonda es benutzerfreundlicher ist. siehe Code unten.

<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' />

wenn das Popup-Fenster geschlossen ist, nicht wenn der Benutzer auf eine Schaltfläche klickt, um die Seite zu
aktualisieren

@gengkev, ich wusste, dass OP das Ereignis an das Schließen des Fensters anhängen wollte, aber ich glaube, dass die Verwendung einer Schaltfläche ein besseres UI-Design ist. Ich habe jedoch Code für beide eingefügt. Bitte beraten.
Ray Cheng

Ich habe die Funktion <body onbeforeunload = "refreshAndClose ();"> <script type = "text / javascript"> refreshAndClose () {window.opener.location.reload (true) verwendet. } self.close (); </ script>
steve0nz

3

Ich benutze das:

<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()''>

Wenn das Fenster geschlossen wird, wird das übergeordnete Fenster aktualisiert.


2

window.open gibt einen Verweis auf das neu erstellte Fenster zurück, sofern die geöffnete URL der Richtlinie für denselben Ursprung entspricht .

Das sollte funktionieren:

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

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

Funktioniert nicht, wenn der Benutzer Links im geöffneten Fenster folgen kann. Und ich bin mir ziemlich sicher, dass ein Entladeereignis ausgelöst wird, bevor die Ziel-URL zum ersten Mal geladen wird, da Sie implizit ungefähr: leer lassen. (+1 für die Erwähnung von SOP)
Kay - SE ist böse

2

In meinem Fall habe ich ein Popup-Fenster geöffnet, indem ich auf der übergeordneten Seite auf den Linkbutton geklickt habe. Zum Aktualisieren des übergeordneten Elements beim Schließen des untergeordneten Elements mit

window.opener.location.reload();

im untergeordneten Fenster verursacht erneutes Öffnen des untergeordneten Fensters (Möglicherweise aufgrund des Ansichtsstatus, denke ich. Korrigieren Sie mich, wenn ich falsch liege). Daher habe ich beschlossen, die Seite nicht übergeordnet zu laden und die Seite erneut zu laden und ihr dieselbe URL zuzuweisen.

Um zu verhindern, dass das Popup nach dem Schließen des Popup-Fensters erneut geöffnet wird, kann dies hilfreich sein:

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

1

Wenn Ihre App in einem HTML5-fähigen Browser ausgeführt wird. Sie können postMessage verwenden . Das dort angegebene Beispiel ist Ihrem sehr ähnlich.


"Andernfalls können Sie nicht zwischen verschiedenen Fenstern kommunizieren." ist falsch. Die Technik ist immer noch möglich, obwohl ich die Antwort von @Moses
gengkev

-1 entfernt. Wenn Sie ein kleines Beispiel geben, erhalten Sie sogar eine +1 ;-)
kay - SE ist böse

Keine Ursache. Aber ich denke nicht, dass window.opener für IE in Ordnung ist. Ich werde es versuchen.
Chris Li

1
@ Kay, funktioniert super in IE7, 8. Sehr schön, ich wusste es vorher nicht. +1 für Moses.
Chris Li

1
@ArMaN: jsfiddle.net/8c2e4/10 , benutze window.opener. Sie können dies verwenden, um Ihre Umgebung zu testen.
Chris Li

1

Versuche dies

        self.opener.location.reload(); 

Öffnen Sie das übergeordnete Element eines aktuellen Fensters und laden Sie den Speicherort neu.


0

Sie können die Hauptseite mit dem übergeordneten Befehl erreichen (übergeordnet ist das Fenster), nachdem Sie alles gemacht haben ...

    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

Sie können den folgenden Code auf der übergeordneten Seite verwenden.

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

0

Der folgende Code kann das Schließen des übergeordneten Fensters aktualisieren:

function ManageQB_PopUp() {
            $(document).ready(function () {
                window.close();
            });
            window.onunload = function () {
                var win = window.opener;
                if (!win.closed) {
                    window.opener.location.reload();
                }
            };
        }
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.