Jak odbywa się wymiana danych między iframe a główną stroną?

Istnieje kilka sposobów wymiany danych:

1. API PostMessage:

   • Główny i bezpieczny sposób.
   • Pozwala na wysyłanie wiadomości między oknami (iframe/okno rodzica, różne okna/karty) z różnych domen.
   • Ważne jest określenie oczekiwanego origin, aby zapobiec atakom XSS.

   // Wysyłanie z okna rodzica do iframe
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.postMessage('Cześć z rodzica!', 'https://trusted-domain.com');
   
   // Odbiór w iframe
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://parent-domain.com') {
           return; // Sprawdzanie nadawcy
       }
       console.log('Odebrano wiadomość w iframe:', event.data);
   });
   
   // Wysyłanie z iframe do okna rodzica
   window.parent.postMessage('Cześć z iframe!', 'https://parent-domain.com');
   
   // Odbiór w oknie rodzica
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://iframe-domain.com') {
           return; // Sprawdzanie nadawcy
       }
       console.log('Odebrano wiadomość w rodzicu:', event.data);
   });
   

2. Dostęp do obiektu window (tylko dla Same-Origin):

   • Jeśli iframe i strona główna są na tej samej domenie (Polityka Same-Origin), mogą bezpośrednio uzyskać dostęp do obiektów window drugiego.

   // W oknie głównym
   const iframeEl = document.getElementById('my-iframe');
   const iframeWindow = iframeEl.contentWindow;
   iframeWindow.someVariable = 'Wartość z rodzica';
   iframeWindow.someFunction();
   
   // W iframe
   const parentWindow = window.parent;
   console.log(parentWindow.someVariable);
   parentWindow.someOtherFunction();
   

3. Hash URL (#):

   • Prosty, ale ograniczony sposób.
   • Można przesyłać niewielkie dane, zmieniając hash w URL iframe.
   • Zmiany hash nie odświeżają strony.
   • Wymaga śledzenia zmian hash (np. przez zdarzenie hashchange).

   // W oknie głównym, aby zmienić hash iframe
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.location.hash = 'data=some_value';
   
   // W iframe, aby odczytać hash
   window.addEventListener('hashchange', function() {
       const hash = window.location.hash;
       console.log('Hash się zmienił:', hash);
       // Parsowanie danych z hash
   });
   

4. Zmiana location.href (mniej zalecane):

   • Przesyłanie danych przez zmianę URL iframe i jego ponowne załadowanie.
   • Nie nadaje się do częstej wymiany.

5. Wspólne magazynki (Same-Origin):

   • localStorage i sessionStorage.
   • Jeśli iframe i strona główna są na tej samej domenie, mogą korzystać z tych samych magazynków.

   // W oknie głównym
   localStorage.setItem('sharedData', JSON.stringify({ value: 'Przykład' }));
   
   // W iframe
   const data = JSON.parse(localStorage.getItem('sharedData'));
   console.log('Dane z localStorage:', data);
   

Wybór metody zależy od polityki bezpieczeństwa (Same-Origin Policy) oraz od ilości/typu przesyłanych danych. PostMessage jest najbardziej elastycznym i bezpiecznym rozwiązaniem do wymiany między domenami.