Abrir ventana emergente y actualizar la página principal al cerrar la ventana emergente

94

Abrí una ventana emergente por window.open en JavaScript, quiero actualizar la página principal cuando cierro esta ventana emergente. (¿Evento de cierre?) ¿Cómo puedo hacer eso?

window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");
javascript html javascript-events ARMA
fuente
1
Compruebe esto: stackoverflow.com/questions/18321323/… podría ayudar a alguien
NoNaMe

Respuestas:

231

Puede acceder a la ventana principal usando ' window.opener ', por lo tanto, escriba algo como lo siguiente en la ventana secundaria:

<script>
    window.onunload = refreshParent;
    function refreshParent() {
        window.opener.location.reload();
    }
</script>
Morrison Cole
fuente
No conocía window.opener, ¡gracias! Siempre coloco la ventana de la persona que llama en una variable en la ventana de contenido del niño. : - /
kay
3
Si no controla JavaScript en la página secundaria (por ejemplo, el flujo de OAuth), deberá verificar popupWindow.closedusando setIntervalcomo en la solución de @ Zuul.
jchook
34

La ventana emergente no tiene ningún evento de cierre que pueda escuchar.

Por otro lado, hay una propiedad cerrada que se establece en verdadera cuando se cierra la ventana.

Puede configurar un temporizador para verificar esa propiedad cerrada y hacerlo así:

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

¡Vea este ejemplo funcional de Fiddle !

Zuul
fuente
1
¡No quiero usar el temporizador! alguna otra idea?
ARMAN
1
Algo pirateado, pero creo que usar un temporizador funcionará mejor en todos los navegadores.
kay
Esta también es la mejor solución si la ventana emergente tiene varias páginas antes de cerrarse, ya que el evento onunload se activa solo después de que el usuario navega fuera de la primera página.
AntonChanning
14

en la página de su hijo, ponga estos:

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

y

<body onbeforeunload="refreshAndClose();">

pero como un buen diseño de interfaz de usuario, debe usar un cierre buttonporque es más fácil de usar. ver código a continuación.

<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' />
Ray Cheng
fuente
cuando la ventana emergente está cerrada, no cuando el usuario hace clic en un botón para actualizar la página y cerrar la ventana emergente
gengkev
@gengkev, sabía que OP quería adjuntar el evento al cierre de la ventana, pero creo que usar un botón es un mejor diseño de interfaz de usuario. sin embargo, incluí código para ambos. por favor avise.
Ray Cheng
Usé <body onbeforeunload = "refreshAndClose ();"> <script type = "text / javascript"> función refreshAndClose () {window.opener.location.reload (true); } self.close (); </script>
steve0nz
3

Yo uso esto: 

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

cuando la ventana se cierra, actualiza la ventana principal.

Patrick Kershner
fuente
2

window.open devolverá una referencia a la ventana recién creada, siempre que la URL abierta cumpla con la Política del mismo origen .

Esto debería funcionar:

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

var foo = window.open("foo.html","windowName", "width=200,height=200,scrollbars=no");
foo.onbeforeunload= windowClose;​
cranz
fuente
No funcionará si el usuario podrá seguir los enlaces en la ventana abierta. Y estoy bastante seguro de que se lanza un evento de descarga antes de que se cargue por primera vez la URL de destino, ya que implícitamente deja about: en blanco. (+1 por mencionar SOP)
kay
2

En mi caso, abrí una ventana emergente al hacer clic en el botón de enlace en la página principal. Para actualizar a los padres sobre el cierre del niño usando

window.opener.location.reload();

en la ventana secundaria provocó que se volviera a abrir la ventana secundaria (podría ser debido al estado de vista, supongo. Corrígeme si me equivoco). Así que decidí no volver a cargar la página en el padre y cargar la página nuevamente asignándole la misma URL.

Para evitar que la ventana emergente se abra nuevamente después de cerrar la ventana emergente, esto podría ayudar,

window.onunload = function(){
    window.opener.location = window.opener.location;};
Jitendra Sawant
fuente
1

Si su aplicación se ejecuta en un navegador compatible con HTML5. Puede utilizar postMessage . El ejemplo que se da allí es bastante similar al suyo.

Chris Li
fuente
"De lo contrario, no podrá comunicarse entre distintas ventanas". Está Mal. La técnica aún es posible, aunque recomendaría la respuesta de @Moses
gengkev
-1 eliminado. Si das un pequeño ejemplo, incluso obtendrás un +1 ;-)
kay
No importa. Pero no creo que window.opener esté bien para IE. Lo intentaré.
Chris Li
1
@kay, funciona muy bien en IE7, 8. Muy bien, no lo sabía antes. +1 para Moisés.
Chris Li
1
@ArMaN: jsfiddle.net/8c2e4/10 , use window.opener. Puede usar esto para probar su entorno.
Chris Li
1

Prueba esto

        self.opener.location.reload();

Abra el padre de una ventana actual y vuelva a cargar la ubicación.

nmkyuppie
fuente
0

Puede acceder a la página principal con el comando principal (el padre es la ventana) después del paso, puede hacer todo ...

    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 + "");
    }
Hamit YILDIRIM
fuente
0

Puede utilizar el siguiente código en la página principal.

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

El siguiente código logrará actualizar el cierre de la publicación de la ventana principal:

function ManageQB_PopUp() {
            $(document).ready(function () {
                window.close();
            });
            window.onunload = function () {
                var win = window.opener;
                if (!win.closed) {
                    window.opener.location.reload();
                }
            };
        }
UJS
fuente