Jak probíhá výměna dat mezi iframe a hlavní stránkou?

Existuje několik způsobů výměny dat:

1. PostMessage API:

   • Hlavní a bezpečný způsob.
   • Umožňuje odesílat zprávy mezi okny (iframe/rodičovské, různými doménami).
   • Je důležité uvádět očekávaný origin pro prevenci XSS útoků.

   // Odeslání z rodičovského okna do iframe
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.postMessage('Ahoj z rodiče!', 'https://trusted-domain.com');
   
   // Příjem v iframe
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://parent-domain.com') {
           return; // Kontrola odesílatele
       }
       console.log('Přijata zpráva v iframe:', event.data);
   });
   
   // Odeslání z iframe do rodičovského okna
   window.parent.postMessage('Ahoj z iframe!', 'https://parent-domain.com');
   
   // Příjem v rodičovském okně
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://iframe-domain.com') {
           return; // Kontrola odesílatele
       }
       console.log('Přijata zpráva v rodiči:', event.data);
   });
   

2. Přístup k objektu window (pouze pro Same-Origin):

   • Pokud jsou iframe a rodičovská stránka na stejném doméně (Same-Origin Policy), mohou přímo získat přístup k objektům window navzájem.

   // V rodičovském okně
   const iframeEl = document.getElementById('my-iframe');
   const iframeWindow = iframeEl.contentWindow;
   iframeWindow.someVariable = 'Hodnota od rodiče';
   iframeWindow.someFunction();
   
   // V iframe
   const parentWindow = window.parent;
   console.log(parentWindow.someVariable);
   parentWindow.someOtherFunction();
   

3. URL hash (#):

   • Jednoduchý, ale omezený způsob.
   • Umožňuje přenášet malé množství dat změnou hashe v URL iframe.
   • Změny hashe neobnovují stránku.
   • Vyžaduje sledování změny hashe (například přes událost hashchange).

   // V rodičovském okně, pro změnu hashe iframe
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.location.hash = 'data=nějaká_hodnota';
   
   // V iframe, pro čtení hashe
   window.addEventListener('hashchange', function() {
       const hash = window.location.hash;
       console.log('Hash se změnil:', hash);
       // Parsování dat z hashe
   });
   

4. Změna location.href (méně vhodné):

   • Přenos dat změnou URL iframe a jeho následným načtením.
   • Nevhodné pro častou výměnu dat.

5. Sdílené úložiště (Same-Origin):

   • localStorage a sessionStorage.
   • Pokud jsou iframe a rodičovská stránka na stejném doméně, mohou používat stejná úložiště.

   // V rodičovském okně
   localStorage.setItem('sharedData', JSON.stringify({ value: 'Příklad' }));
   
   // V iframe
   const data = JSON.parse(localStorage.getItem('sharedData'));
   console.log('Data z localStorage:', data);
   

Volba metody závisí na bezpečnostní politice (Same-Origin Policy) a objemu/tipu přenášených dat. PostMessage je nejflexibilnější a nejbezpečnější řešení pro kříždoménovou výměnu dat.