Scambiare dati tra pagina web e iframe con JavaScript

Uno dei più avanzati strumenti HTML che possiamo utilizzare per i nostri progetti è senza ombra di dubbio l’iframe. L’iframe, come sicuramente saprai, è uno “oggetto” HTML che consente di elaborare e visualizzare informazioni provenienti da un’altra sorgente, pagina o sito web.

Tuttavia esistono altri modi di utilizzare questo elemento, e uno di questi comprende la comunicazione tra una pagina web incorporata in un’altra attraverso l’iframe, del medesimo sito.

Questo metodo è usato prevalentemente per utenti esperti o con una buona conoscenza di JavaScript, soprattutto quando si ha a che fare con una gran quantità di dati e informazioni di diverso genere. In questo articolo però, cercherò di spiegarlo in maniera semplice in modo che sia di facile comprensione per tutti, anche neofiti in questo campo.

Nel caso avessi dubbi o perplessità, lascia un commento!

Scambio di dati tra window e iframe

Cosa sto cerando di spiegare?

Detto in parole povere, l’intento di questa guida è spiegare come far “comunicare” due pagine web dello stesso sito web con JavaScript, attraverso l’elemento HTML iframe incorporato in una delle due pagine.

Lo scopo è quello di far scambiare dati, valori, informazione e quant’altro tra le due sorgenti, e mantenerle attive e pronte all’uso per i nostri progetti.

Un esempio: generare dei valori numerici nell’iframe, e trasferirli in un array nella pagina principale (chiamata window), così da poter essere utilizzati (iframe to window)

E viceversa, scambiare dati da window e iframe (window to iframe), utilizzando lo stesso principio di scambio di dati.

Le applicazioni di questa guida possono variare in base ai progetti.

Come fare

Per prima cosa, ribadisco, la guida si può applicare alle pagine dello stesso sito web, ospitato sullo stesso server; scambiare sati tra pagine di siti differenti con gli iframe non è possibile.

Per provare la procedura dovrai necessariamente avere un sito ospitato su un hosting , oppure creare un webserver locale sul tuo computer (es. usando XAMPP).

Per iniziare, crea due nuove pagine HTML; Nella prima (che ad esempio chiameremo “primary.html“) crea un iframe con un selettore id o name a tua scelta, con l’attributo src mirato alla seconda pagina web (“secondary.html“). In ognuna di queste andrà inserito una funzione specifica per scambiare di dati sito iframe con JavaScript.

Qui sotto il codice suddiviso per le due pagine:

“primary.html“

<html>
  <head>
    <script>
      var arr = [];   

//la funzione chiamata dal frame  
      function Acquisisci(data) {  
         // salva il valore nell'array "arr[]"
         arr.push(data);   

//esegue la funzione Trasferisci() sull'iframe     
         var frame = window.frames['mio-frame'];   
         frame.Trasferisci('Ciao Ciao, testo dalla pagina principale'); 

         document.getElementsByTagName('h1')[0].innerHTML = arr[0]; 
        } 
    </script>
  </head>
  <body>
    <h1>La mia pagina web</h1>
     <iframe name="mio-frame" src="secondary.html"></iframe>
  </body>
</html>

“secondary.html” (iframe source)

<html>
  <head>
   <script>
//al caricamento del frame esegue la funzione Acquisisci() della pagina primaria
         document.onload = window.parent.Acquisisci("Nuovo Titolo dall'Iframe");
//il frame acquisisce il valore fornito dalla pagina
         function Trasferisci(data) { document.write(data);}
   </script>
  </head>
  <body>
       <h1>Io sono l'iframe</h1>
  </body>
</html>

Dopo aver creato questi documenti HTML, salvali ed esegui la pagina primaria con il tuo browser web. Visivamente, l’effetto dello script risulterà come le immagini in basso:

window e iframe prima del caricamento — Prima del caricamento della pagina

window e iframe dopo il caricamento — Prima del caricamento della pagina

Ma cosa è successo? e Come funzionano questi script?

Tra le due immagini si può chiaramente notare una differenza di contenuto. Quello che succede al completamento del caricamento della pagina primaria l’esecuzione delle funzioni “Acquisisci()” e “Trasferisci()“, chiamate così per semplificarne la comprensione.

Acquisisci() è una funzione dichiarata nella pagina primaria, che riceve dati dall’iframe al caricamento completo del documento, e che a sua volta chiama la funzione JavaScript Trasferisci() dichiarata nell’iframe, per mostrare un determinato contenuto nella pagina (es. “Ciao Ciao…“).

Come puoi ben capire dunque, risulta uno scambio di valori tra i due documenti.

Inoltre ho volutamente dichiarato un array (var arr = []) per dimostrare che è possibile trasferire dati e salvarli in questo elemento, così da restare “salvati” all’interno della pagina “padre”. Così facendo, anche nel caso in cui si dovesse ricaricare o cambiare la sorgente dell’iframe, questi valori resterebbero inalterati.

I metodi JavaScript

Ricapitolando:

Il metodo JavaScript scambiare dati dal sito/pagina all’iframe (window to frame) è:

 window.frames['frame-name'].FunzioneFrame();

Il metodo inverso, per scambiare dati dall’iframe alla pagina primaria (frame to window) invece è:

window.parent.FunzioneParent();

Esistono altri metodi per scambiare dati tra i documenti in questione, ma questo metodo, attraverso l’uso di funzioni specifiche, lo trovo uno dei più semplici ed efficaci per operazioni comuni e scambio di valori.

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!

Articoli recenti:

Scambiare dati tra pagina web e iframe con JavaScript

Scambio di dati tra window e iframe

Come fare

I metodi JavaScript

AUTORE

Simone Bernardo

Lascia un commento Annulla risposta