Ako prebieha výmena údajov medzi iframe a hlavnou stránkou?

Existuje niekoľko spôsobov výmeny údajov:

1. PostMessage API:

   • Hlavný a bezpečný spôsob.
   • Umožňuje odosielanie správ medzi oknami (iframe/rodič, rôzne domény).
   • Je dôležité uviesť očakávaný origin na prevenciu XSS útokov.

   // Odoslanie z rodičovského okna do iframe
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.postMessage('Ahoj od rodiča!', 'https://trusted-domain.com');
   
   // Príjem v iframe
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://parent-domain.com') {
           return; // Kontrola odosielateľa
       }
       console.log('Prijatá správa v iframe:', event.data);
   });
   
   // Odoslanie z iframe do rodičovského okna
   window.parent.postMessage('Ahoj z iframe!', 'https://parent-domain.com');
   
   // Príjem v rodičovskom okne
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://iframe-domain.com') {
           return; // Kontrola odosielateľa
       }
       console.log('Prijatá správa v rodičovi:', event.data);
   });
   

2. Prístup k objektu window (len pre Same-Origin):

   • Ak sú iframe a rodičovská stránka na rovnakom doméne (Same-Origin Policy), môžu priamo získať prístup k objektom window navzájom.

   // V rodičovskom okne
   const iframeEl = document.getElementById('my-iframe');
   const iframeWindow = iframeEl.contentWindow;
   iframeWindow.someVariable = 'Hodnota od rodiča';
   iframeWindow.someFunction();
   
   // V iframe
   const parentWindow = window.parent;
   console.log(parentWindow.someVariable);
   parentWindow.someOtherFunction();
   

3. URL hash (#):

   • Jednoduchý, ale obmedzený spôsob.
   • Môže prenášať malé množstvo dát zmenou hashu v URL iframe.
   • Zmeny hashu neobnovujú stránku.
   • Vyžaduje sledovanie zmeny hashu (napríklad cez udalosť hashchange).

   // V rodičovskom okne, na zmenu hashu iframe
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.location.hash = 'data=nejaka_hodnota';
   
   // V iframe, na čítanie hashu
   window.addEventListener('hashchange', function() {
       const hash = window.location.hash;
       console.log('Hash sa zmenil:', hash);
       // Parsovanie dát z hashu
   });
   

4. Zmena location.href (menej odporúčané):

   • Prenos dát zmenou URL iframe a jeho následným načítaním.
   • Nie je vhodné pre častú výmenu dát.

5. Zdieľané úložiská (Same-Origin):

   • localStorage a sessionStorage.
   • Ak sú iframe a rodič na rovnakom doméne, môžu používať rovnaké úložiská.

   // V rodičovskom okne
   localStorage.setItem('sharedData', JSON.stringify({ value: 'Príklad' }));
   
   // V iframe
   const data = JSON.parse(localStorage.getItem('sharedData'));
   console.log('Dáta z localStorage:', data);
   

Výber metódy závisí od bezpečnostnej politiky (Same-Origin Policy) a objemu/tipu prenášaných dát. PostMessage je najviac flexibilné a bezpečné riešenie pre cross-domain výmenu.