web-dev-qa-db-fra.com

Fancy Box - comment actualiser la page parent à la fermeture du iframe popup?

Je souhaite que ma page parente s'actualise lorsque je ferme un cadre contextuel Fancy Box. J'ai une page de connexion dans la fenêtre contextuelle, j'ai donc besoin que la page parent soit actualisée pour afficher le nouvel état de connexion à la fermeture de la Fancy Box.

Je peux le faire fonctionner sans le code iFrame:

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

Mais je ne peux pas le faire fonctionner avec le code iFrame:

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

Le problème est lié à cette ligne:

'type' : 'iframe'


Dès que j'ajoute cette ligne, le popup cesse de fonctionner.

Quelqu'un peut-il suggérer une solution pour que je puisse obtenir une variable iframe dans Fancy Box, tout en obtenant l'actualisation de la page parent à la fermeture de la boîte? Merci!

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

Alternativement:

Accédez à votre jquery.fancybox.js fichier et allez à la ligne 1380 il ressemble à ceci et ajoutez 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;
}
29
Kemal Can ÖZÇELİK
$(".fancybox").fancybox({
            'width'             : '75%',
            'height'            : '65%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe',
            'hideOnOverlayClick': false,
            'onClosed'          : function() {
                                  parent.location.reload(true);
                                  }
        });
10
adil

Outre les manquants évidents, que vous dites avoir résolus dans IMO, il ne s'agit pas d'un problème de boîte fantaisie, mais d'un problème d'actualisation parent.

J’ai trouvé difficile de recharger un parent d’un cadre car il existe de nombreuses façons de le "théoriquement" atteindre, mais "la plupart" ne fonctionnent tout simplement PAS dans la pratique et, pire encore, il ne semble vraiment erreur soulevée par les navigateurs Web avec lesquels j'ai testé.

Voici le code qui fonctionne bien pour moi sur Chrome, FF, IE:

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

En gros, cela signifie que vous définissez le parent href sur ce qui correspond actuellement à l'actualisation de la page. Essayez-le et ça devrait bien fonctionner.

En fait la ligne:

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

peut être utilisé avec des cadres (du parent bien sûr) ou sans cadres pour actualiser simplement une page Web. HTH.

2
nikolaosinlight

Pour moi, le code suivant fonctionne 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();
            }
       });

Je ne peux pas dire exactement, mais peut-être que la raison d'utiliser "onCleanup" (en fait je n'ai pas essayé d'utiliser onClosed).

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

Il vous suffit d'écrire deux lignes pour fermer la boîte fantaisie et, après, de recharger la page parent sur laquelle vous avez ouvert votre boîte fantaisie.

Une chose à noter, c'est que si vous voulez l'essayer avec window.opener, il ne fonctionnera pas car fancybox n'est pas traité comme une fenêtre enfant du parent lorsqu'il s'agit de window.opener 

Une autre chose est que window.opener ne fonctionnera pas pour Windows Phone ni avec IE, car IE est déjà stupide.

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

actualisation du lien:

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

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

tu peux donner:

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

ou condition, par exemple,

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

Contournement pour éviter d’avoir POSTDATA Warning lorsque vous fermez l’iFrame

1) S'il vous plaît créer un formulaire:

<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) ajoutez ces lignes à la fin de votre Fancy-Box:

Fantaisie ver 2.x.x

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

Fantaisie ver 1.3.x

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

1000 = 1 seconde.

1
LLukaso

Lorsque vous utilisez les exemples avec 'location.reload', vous obtenez une fenêtre contextuelle du navigateur qui vous indique qu'il faut recharger la page. J'ai cliqué sur un bouton pour actualiser la page et aucun avertissement contextuel.

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

Actualiser ou recharger à la fermeture du formulaire à l'aide de fancybox dans Shopify

J'utilisais ceci sur Shopify mais cela fonctionnera sur d'autres également

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

ici seulement après que Close joue la tâche nous pouvons aussi écrire parent au lieu de window

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

Si vous ne faites que réinitialiser le formulaire dans shopify, alors, dans shopify parfois $ ("formulaire") [0] .reset () ne fonctionne pas, vous pouvez donc utiliser une itération pour vider la valeur du formulaire 

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

        }

      }

    },
  });

iD_formulaire est l'ID du formulaire 

0
Vinay Kumar