Kā notiek datu apmaiņa starp iframe un galveno lapu?

Ir vairākas datu apmaiņas metodes:

1. PostMessage API:

   • Galvenais un drošākais veids.
   • Atļauj sūtīt ziņojumus starp logiem (iframe/vecāku, dažādiem logiem/cilnēm) no dažādām domēniem.
   • Ir svarīgi norādīt sagaidāmo origin, lai novērstu XSS uzbrukumus.

   // Sūtīšana no vecāku loga uz iframe
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.postMessage('Sveiki no vecāka!', 'https://trusted-domain.com');
   
   // Saņemšana iframe
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://parent-domain.com') {
           return; // Pārbauda sūtītāju
       }
       console.log('Saņemts ziņojums iframe:', event.data);
   });
   
   // Sūtīšana no iframe uz vecāku logu
   window.parent.postMessage('Sveiki no iframe!', 'https://parent-domain.com');
   
   // Saņemšana vecāku logā
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://iframe-domain.com') {
           return; // Pārbauda sūtītāju
       }
       console.log('Saņemts ziņojums vecākā:', event.data);
   });
   

2. Pieeja window objektam (tikai Same-Origin):

   • Ja iframe un vecāku lapa atrodas tajā pašā domēnā (Same-Origin Policy), tie var tieši piekļūt viens otra window objektiem.

   // Vecāku logā
   const iframeEl = document.getElementById('my-iframe');
   const iframeWindow = iframeEl.contentWindow;
   iframeWindow.someVariable = 'Vērtība no vecāka';
   iframeWindow.someFunction();
   
   // Iframe
   const parentWindow = window.parent;
   console.log(parentWindow.someVariable);
   parentWindow.someOtherFunction();
   

3. URL haš (#):

   • Vienkāršs, bet ierobežots veids.
   • Var nodot nelielus datus, mainot hašu iframe URL.
   • Haša izmaiņas neuzlādē lapu.
   • Prasa uzraudzīt haša izmaiņas (piemēram, ar hashchange notikumu).

   // Vecāku logā, lai mainītu iframe hašu
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.location.hash = 'dati=kāds_vērtība';
   
   // Iframe, lai lasītu hašu
   window.addEventListener('hashchange', function() {
       const hash = window.location.hash;
       console.log('Hašs mainījās:', hash);
       // Datu parsēšana no haša
   });
   

4. Izmaiņas location.href (mazāk ieteicams):

   • Datu nodošana, mainot iframe URL un to atkārtoti ielādējot.
   • Nav piemērots biežai apmaiņai.

5. Koplietojamie glabātuvju (Same-Origin):

   • localStorage un sessionStorage.
   • Ja iframe un vecāks ir tajā pašā domēnā, tie var izmantot tās pašas glabātuvju.

   // Vecāku logā
   localStorage.setItem('koplietotsDati', JSON.stringify({ vērtība: 'Piemērs' }));
   
   // Iframe
   const dati = JSON.parse(localStorage.getItem('koplietotsDati'));
   console.log('Dati no localStorage:', dati);
   

Izvēle ir atkarīga no drošības politikas (Same-Origin Policy) un pārsūtāmo datu apjoma/veida. PostMessage ir visflexiblākais un drošākais risinājums starp domēniem.