Fancybox (jQuery) – Trasmissione delle informazioni da padre a iframe e iframe al padre

Sto cercando di aprire un iframe di fancybox sulla mia pagina. Passa sopra alcune informazioni di base all’iframe. Quindi voglio fare in modo che l’iframe rimandi al suo genitore.

Sto passando nameid-1 in tutto staticamente, anche se mi piacerebbe davvero avere questo come variabile come var nameid=$(this).attr('nameid')

Non so come eseguire tutto correttamente perché sono nuovo per Ajax / Javascript e sono alle prese con la logica.

Base.html

JS:

  //  

HTML:

  

Replacement Name:

https://stackoverflow.com/questions/26426934/fancybox-jquery-passing-information-from-parent-to-iframe-and-iframe-back-to/iframe.html

JS:

  //  

HTML

 

The old name: $originalname;

The id for this column is: $nameid

Please select a new name:

La tua domanda può essere divisa in due parti:

  1. Come passare i dati (memorizzati in variabili) dalla pagina padre a un iframe (aperto in fancybox)
  2. Come manipolare i dati (e / o archiviare tali dati in variabili) all’interno dell’iframe e quindi passare quei valori alla pagina padre quando fancybox viene chiuso.

1). Passa i dati dalla pagina padre all’iframe (fancybox)

Penso che la tua scelta migliore sia quella di archiviare tutti i tuoi dati in un singolo object javascript come:

 var parentData = {}; 

… quindi puoi passare un singolo object all’iframe anziché a più variabili. Quindi puoi aggiungere proprietà e valori diversi a quell’object come:

 parentData.nameid = "1"; parentData.originalname = "Mary Poppins"; 

… o più se ne hai bisogno.

Potresti comunque voler passare queste informazioni staticamente tramite attributi di data (HTML5) come:

 Mary Poppins 

… e spingere i valori dei parentData nell’object parentData all’interno della fancybox beforeLoad callback del beforeLoad come:

 beforeLoad : function () { parentData.nameid = $(this.element).data("nameid"); parentData.originalname = $(this.element).data("originalname"); } 

… che ti darebbe molta più flessibilità IMHO.

Ora, l’unica cosa che devi fare nella pagina iframed è fare riferimento a quelle proprietà come parent.parentData.nameid e parent.parentData.originalname ogni volta che ne hai bisogno, ad es.

avendo questo html (https://stackoverflow.com/questions/26426934/fancybox-jquery-passing-information-from-parent-to-iframe-and-iframe-back-to/iframe.html)

 

The old name:

The id for this column is:

… puoi usare questo script per scrivere i valori dell’object genitore come:

 $("#nameid").text(parent.parentData.nameid); $("#originalname").text(parent.parentData.originalname); 

Nota che non puoi fare (come in php)

 

The old name: $originalname;

… quindi abbiamo usato i tag per scrivere il loro contenuto tramite javascript.


2). Passa i dati dalla pagina iframed alla pagina padre.

La prima cosa che devi fare è dichiarare nella tua pagina padre, un object per memorizzare i dati dall’iframe e una funzione per elaborarlo come:

 var iframeData = {}; function setInformation(data) { return iframeData = data; }; 

Quindi nella pagina iframed, puoi scrivere proprietà / valori iframeData sull’object iframeData ed eseguire la funzione setInformation() (nella pagina padre) dall’iframe per passare i valori alla pagina padre come:

 $(".doupdate").on("click", function (e) { e.preventDefault(); iframeData.newname = $(this).find("span").text(); // set object property/value parent.setInformation(iframeData); // pass it to parent page parent.$.fancybox.close(); }); 

Il codice sopra suppone che tu abbia un simile html simile

 Display new married name : Mary Smith 

avviso ho avvolto il nome che voglio passare in un tag span . Opzionalmente puoi separarlo in 2 spans come:

 MarySmith 

… e scriverli in valori separati come:

 iframeData.fname = $(this).find("span.fname").text(); iframeData.lname = $(this).find("span.lname").text(); 

Per il pulsante di cancellazione, vorrei solo reinizializzare la variabile e chiudere fancybox come

 $('a.closeremove').on("click", function (e) { e.preventDefault(); iframeData = {}; // reset variable parent.setInformation(iframeData); // pass it to parent page parent.$.fancybox.close(); }); 

… ed esegui la manipolazione della pagina padre dalla pagina madre stessa usando il callback fancybox afterClose come:

 afterClose : function () { if ( objLength(iframeData) > 0 ) { $('#displayfield-nameid-1').html(iframeData.newname); $('#showhide-nameid-1').show(); } else { $("#displayfield-nameid-1").empty(); $('#showhide-nameid-1').hide(); } } 

notate che mostrerò solo il selettore #showhide-nameid-1 se la iframeData dell’object iframeData è maggiore di 0 . Perché, ho bisogno di una funzione per convalidare la length dell’object :

In base a questa risposta, puoi fare:

 function objLength(iframeData) { // ref https://stackoverflow.com/a/5533226/1055987 var count = 0, i; for (i in iframeData) { if (iframeData.hasOwnProperty(i)) { count++; } } return count; }; 

… che restituirà la length dell’object .

Ultima nota :

Poiché la pagina iframed si riferisce alla pagina padre utilizzando il prefisso parent , restituirà errori js se è aperta all’esterno di un iframe. Puoi prima convalidare se la pagina iframed è effettivamente contenuta in un iframe prima di tentare di accedere ai dati da e verso la pagina padre come:

 if (window.self !== window.top) { // the page is inside an iframe } 

Guarda DEMO e sentiti libero di esplorare il codice sorgente di entrambe le pagine.