Fancy Box: cómo actualizar la página principal al cerrar la ventana flotante iframe?

Question

Quiero que mi página principal se actualice cuando cierre un cuadro emergente de Fancy Box. Tengo una página de inicio de sesión dentro de la ventana emergente, por lo que necesito que la página principal se actualice para mostrar el nuevo estado de inicio de sesión cuando se cierra Fancy Box.

---

puedo conseguir que funcione sin el código iFrame:

<script type="text/javascript"> 
$(document).ready(function() { 
    $("a.iframeFancybox1").fancybox({ 
    'width': 800, 
    'height': 450, 
    'onClosed': function() { 
    parent.location.reload(true); 
    ;} 
    }); 
}); 
</script> 

---

Pero no puedo conseguir que funcione con el código iFrame:

<script type="text/javascript"> 
$(document).ready(function() { 
    $('a.iframeFancybox1').fancybox({ 
    'width': 800, 
    'height': 450, 
    'type' : 'iframe' 
    'onClosed': function() { 
    parent.location.reload(true); 
    ;} 
    }); 
}); 
</script> 

---

El problema es hacer con esta línea:

'type' : 'iframe'
 

Tan pronto como agregue esa línea, la ventana emergente deja de funcionar.

¿Alguien puede sugerir una solución sobre cómo puedo obtener un iframe para abrir una ventana emergente en Fancy Box, y todavía obtener la página principal para actualizar cuando se cierra el cuadro? Gracias!

Answer 1

Para mi próxima código funciona bien:

$("a.ic-edit").fancybox({ 
      'width'  : '65%', 
      'height' : '85%', 
      'autoScale'  : false, 
      'titleShow' : false, 
      'transitionIn' : 'no', 
      'transitionOut' : 'no', 
      'scrolling'  : 'no', 
      'type'   : 'iframe', 
      onCleanup : function() { 
       return window.location.reload(); 
      } 
     }); 

No puedo decir exactamente, pero tal vez la razón en el uso de "onCleanup" (en realidad no lo probé uso onClosed).

Answer 2

$(".fancybox").fancybox({ 
      'width'    : '75%', 
      'height'   : '65%', 
      'autoScale'   : false, 
      'transitionIn'  : 'none', 
      'transitionOut'  : 'none', 
      'type'    : 'iframe', 
      'hideOnOverlayClick': false, 
      'onClosed'   : function() { 
            parent.location.reload(true); 
            } 
     }); 

Answer 3

Al utilizar los ejemplos con 'location.reload' se obtiene una emergente del navegador que le permite saber que necesita para recargar la página. Disparé un clic de botón para actualizar la página y no aparece ninguna ventana emergente de advertencia.

$(".addDoc").colorbox({ 
    iframe: true, 
    width: "550px", 
    height: "230px", 
    'onClosed': function() { 
     $("#btnContSave").click(); 
    } 
}); 

Answer 4

$(".fancybox").fancybox({ 
    type: 'iframe', 
    afterClose: function() { // USE THIS IT IS YOUR ANSWER THE KEY WORD IS "afterClose" 
     parent.location.reload(true); 
    } 
}); 

alternativa:

ir a su jquery.fancybox.js archivo correspondiente y continúa la línea 1380 que se parece a esto y añadir parent.location.reload(true);

afterClose: function (opts) { 
    if (this.overlay) { 
     this.overlay.fadeOut(opts.speedOut || 0, function() { 
      $(this).remove(); 
      parent.location.reload(true); 
     }); 
    } 
    this.overlay = null; 
} 

Answer 5

'onClosed': function() { 
parent.location.reload(true); 
;} // <----is it ok if you have an extra ';' here? 

Answer 6

Un trabajo alrededor de t o evitar tener POSTDATA advertencia cuando se cierra el marco flotante

1) Por favor Crear formulario:

<form name="RefreshForm" method="post" action="" > 
<input name="Name1" value="Value1" type="hidden" /> 
<input name="DatafromPost1" value="ValuefromPOST1" type="hidden" /> 
<input name="DatafromPost2" value="ValuefromPOST2" type="hidden" /> 
</form> 

2) añadir estas líneas al final de su fantasía-Box:

Fantasía ver 2.xx

afterClose : function() { 
setTimeout('document.RefreshForm.submit()',1000); } 

Fantasía ver 1.3.x

 onClosed : function() { 
setTimeout('document.RefreshForm.submit()',1000); } 

1000 = 1 segundo.

Answer 7

de refresco de enlace:

jQuery(function($){ 
    $('#refresh').click(function() 
     {  
      parent.location.reload(); 
    }); 
}); 

<a href="#" id="refresh">refresh</a> 

le puede dar:

setTimeout(function() { 
      parent.location.reload(); 
     }, 1000); 

o condición, por ejemplo,

<script> 
if(formSend == true){ 
setTimeout(function() { 
       parent.location.reload(); 
      }, 1000); 
} 
</script> 

Answer 8

'onClosed': function() {parent.location. recargar (verdadero); }

Answer 9

Solo tiene que escribir dos líneas para cerrar la caja de fantasía y después de cerrar para volver a cargar la página principal en la que ha abierto su caja de fantasía.

Una cosa a estar comunicados es que si va a probar con window.opener no va a funcionar como FancyBox no se trata como una ventana secundaria de los padres cuando se trata de window.opener

Uno más Lo que pasa es que window.opener no funcionará para Windows Phone y también para IE, ya que IE ya es estúpido.

<script type="text/javascript"> 
parent.$.fancybox.close(); 
     parent.location.reload(true); 
</script> 

Answer 10

Además de la falta obvia, lo que usted dice que usted ha fijado la OMI esto no es un problema de FancyBox sino más bien una cuestión de actualización de los padres.

He encontrado que es un desafío hacer que un padre de un cuadro se vuelva a cargar ya que hay varias formas de lograrlo "teóricamente" pero "la mayoría" simplemente NO funciona en la práctica y peor aún no existe parece ser cualquier error planteado por los navegadores web que probé.

Aquí está el código que funciona bien para mí en Chrome, FF, IE:

afterClose: function(){ 
    parent.location.href = parent.location.href; 
}, 

Esto dice básicamente establece el href padres a lo que es actualmente la que en efecto resulta en una actualización de la página. Pruébalo y debería funcionar bien.

De hecho la línea:

parent.location.href = parent.location.href; 

se puede utilizar con marcos (de los padres, por supuesto) o sin marcos simplemente actualizar una página web. HTH.

Answer 11

Actualizar o vuelva a cargar sobre el cierre del formulario utilizando FancyBox en Shopify

que estaba usando esto en Shopify pero esto funcionará en otra también

jQuery(".add-device").fancybox({ 
    maxWidth : 970, 
    maxHeight : 700, 
    fitToView : false, 
    width  : '90%', 
    height : '90%', 
    autoSize : false, 
    closeClick : false, 
    openEffect : 'none', 
    closeEffect : 'none', 
    beforeClose: function() { 
     device_has_subs = false; 
     $("#mac_address").prop("readonly", false); 
    }, 
    afterClose : function() { 
     window.location.reload(true); 
     } 
    }); 

aquí solamente afterClose está jugando la tarea también podemos escribir padre en lugar de ventana

afterClose : function() { 
    parent.location.reload(true); 
    } 

Si Acaba de reajustar la forma en Shopify Entonces, en algún momento Shopify $ ("forma") [0].reset() no funciona tan usando iteración podemos vaciar el valor de forma

jQuery(".add-device").fancybox({ 
    maxWidth : 970, 
    maxHeight : 700, 
    fitToView : false, 
    width  : '90%', 
    height : '90%', 
    autoSize : false, 
    closeClick : false, 
    openEffect : 'none', 
    closeEffect : 'none', 
    beforeClose: function() { 
     device_has_subs = false; 
     $("#mac_address").prop("readonly", false); 

     var array_element = document.getElementById("form_id"); 
     if (array_element){ 

     for (i=0; i < array_element.length; i++){ 
      element = array_element[i].type.toLowerCase(); 
      switch(element){ 
       case "text": 
        array_element[i].value = ""; 
        break; 
       case "hidden": 
        array_element[i].value = ""; 
        break; 
       case "email": 
        array_element[i].value = ""; 
        break; 
       case "checkbox": 
        if(array_element[i].checked){ 
        array_element[i].checked = false; 
        } 
        break; 
       case "select-one": 
        array_element[i].selectedIndex = -1; 
        break; 
       case "select-multi": 
        array_element[i].selectedIndex = -1; 
        break; 
       default: 
        break; 
      } 

     } 

     } 

    }, 
    }); 

form_id es la forma Identificación