Javascript Girl
  1. Javascript Girl
  3. Valeur de passe / variable de fancybox iframe to parent
Intereting Posts
Obtenir le div divisé de l'élément Chercher: Rejeter la promesse avec l'objet d'erreur JSON HTML Visualizateur audio? Une instruction javascript if avec plusieurs conditions les teste-t-elle toutes? Comment attraper l'événement de clic à partir de l'axe tiques jqplot, highcharts, flot En-tête Cookie dans PhoneGap: Refus de définir l'en-tête dangereux "Cookie" Conversion hexadécimale en flottant en javascript Quel modèle utiliser lors de la création de la classe javascript? JQuery: Désolidarisez jQuery 2.0 sur la méthode Comment obtenir IFRAME pour écouter les mêmes événements que les parents (et tirer les mêmes manipulateurs) Le tableau Javascript avec la boucle for, renvoie uniquement le dernier élément Existe-t-il une limite pour setTimeout? Obtenir le texte sélectionné dans un navigateur, multiplate-forme L'attribut de téléchargement sur la balise <a> ne fonctionne pas sur Chrome .push () plusieurs objets dans le tableau JavaScript renvoie 'indéfini'

Valeur de passe / variable de fancybox iframe to parent

J'essaie de transférer une variable / valeur de l'iframe fancybox à la fenêtre parent sans succès.

Fancybox est lancé à partir d'un lien avec 

class="fancybox fancybox.iframe"

Mon code dans fancybox.iframe est: 

 $(document).ready(function(){ $('.insert_single').click(function(){ var test = $('.members_body').find('{row.U_USERNAME}'); setTimeout(function(){ parent.$.fancybox.close();},300);return true; }); });

Où '{row.U_USERNAME}' est le nom d'utilisateur à trouver dans l'iframe.

Ensuite, dans le parent, il y a le code suivant: 

  $(document).ready(function(){ $('.fancybox').fancybox( { openEffect:'fade', openSpeed:500, afterClose: function(){ alert($(".fancybox-iframe").contents().find(test)); $('#form input[name=username]').val()(test);return false; } } ); });

Mais lorsque la fancybox est fermée, il n'y a pas d'alerte avec la variable "test", ni la variable n'apparaît comme valeur ou comme texte dans le champ de saisie du formulaire.

J'ai lu et essayé diverses solutions trouvées ici sur stackoverflow sans succès.

Merci d'avance pour votre aide

MODIFIER

Voici un exemple

    Lorsque la fancybox est fermée, l'iframe est retiré du document. Vous devez donc utiliser beforeClose événement beforeClose au lieu de afterClose 

     $(document).ready(function() { $('a.fancybox').fancybox({ openEffect:'fade', openSpeed:500, beforeClose: function() { // working var $iframe = $('.fancybox-iframe'); alert($('input', $iframe.contents()).val()); }, afterClose: function() { // not working var $iframe = $('.fancybox-iframe'); alert($('input', $iframe.contents()).val()); } }); });

    JSFiddle: http://jsfiddle.net/NXY7Y/1/

    MODIFIER:

    J'ai édité votre jsfiddle ( http://jsfiddle.net/NXY7Y/9/ ). La mise à jour est dans ce lien http://jsfiddle.net/NXY7Y/13/

    Page principale javscript: 

     $(document).ready(function() { $('a.fancybox').fancybox({ openEffect:'fade', openSpeed:500//, //beforeClose: function() { // // working // var $iframe = $('.fancybox-iframe'); // alert($('input', $iframe.contents()).val()); //}, //afterClose: function() { // // not working // var $iframe = $('.fancybox-iframe'); // alert($('input', $iframe.contents()).val()); //} }); }); function setSelectedUser(userText) { $('#username').val(userText); }

    Pas besoin d'utiliser après la afterClose ou beforeClose événements de beforeClose . Accédez simplement à la fonction parent setSelectedUser de l'iframe sur un événement de clic de lien comme ceci: 

     $(document).ready(function() { $('a.insert_single').click(function() { parent.setSelectedUser($(this).text()); parent.$.fancybox.close(); }); });

    Quelques éclaircissements:

    • Vous devez utiliser .find() pour trouver des éléments par sélecteur (vous essayez de trouver une variable .find(test) , qui n'est pas un format valide).
    • Vous devez utiliser .val() pour obtenir le contenu d'un champ de input ou .val(new_value) pour définir le contenu d'un champ de input
    • Vous devez utiliser .html() ou .text() pour obtenir le contenu d'un élément autre que l' input ,

    Exemple: avoir ce code html 

     <p class="test">hola</p>

    … et ce code jQuery 

     var temp = $(".test").html();

    … temp va revenir hola .

    D'autre part, si vous avez le contrôle sur la page iframed et qu'elle est dans le même domaine que la page parent, il se peut que vous ne deviez pas définir de jQuery dans la page enfant.

    Donc, avoir ce html dans la page enfant (iframed) par exemple 

     <div class="members_body"> <p>GOOGLE</p> <p>JSFIDDLE</p> <p>STACKOVERFLOW</p> </div>

    Vous pouvez définir ce jQuery dans votre page parent pour obtenir le contenu de tout élément cliqué dans votre page enfant: 

     var _tmpvar; // the var to use through the callbacks jQuery(document).ready(function ($) { $(".fancybox").fancybox({ type: "iframe", afterShow: function () { var $iframe = $('.fancybox-iframe'); $iframe.contents().find(".members_body p").each(function (i) { $(this).on("click", function () { _tmpvar = $('.members_body p:eq(' + i + ')', $iframe.contents()).html(); $.fancybox.close(); }); // on click }); // each }, afterClose: function () { $('#form input[name=username]').val(_tmpvar); } }); }); // ready

    Notez que nous avons déclaré le var _tmpvar globalement afin que nous puissions l'utiliser dans différents rappels.

    Voir JSFIDDLE