Cum are loc schimbul de date între iframe și pagina principală?

Există mai multe modalități de schimb de date:

1. API PostMessage:

   • Principal și sigur mod de comunicare.
   • Permite trimiterea de mesaje între ferestre (iframe/fereastra părinte, ferestre/filtre diferite) din domenii diferite.
   • Este important să specificați origin așteptat pentru a preveni atacurile XSS.

   // Trimitere din fereastra părinte în iframe
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.postMessage('Salut din părinte!', 'https://trusted-domain.com');
   
   // Primire în iframe
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://parent-domain.com') {
           return; // Verificăm expeditorul
       }
       console.log('Mesaj primit în iframe:', event.data);
   });
   
   // Trimitere din iframe în fereastra părinte
   window.parent.postMessage('Salut din iframe!', 'https://parent-domain.com');
   
   // Primire în fereastra părinte
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://iframe-domain.com') {
           return; // Verificăm expeditorul
       }
       console.log('Mesaj primit în părinte:', event.data);
   });
   

2. Acces la obiectul window (doar pentru Same-Origin):

   • Dacă iframe și pagina părinte sunt pe același domeniu (Politica Same-Origin), pot accesa direct obiectele window ale celuilalt.

   // În fereastra părinte
   const iframeEl = document.getElementById('my-iframe');
   const iframeWindow = iframeEl.contentWindow;
   iframeWindow.someVariable = 'Valoare din părinte';
   iframeWindow.someFunction();
   
   // În iframe
   const parentWindow = window.parent;
   console.log(parentWindow.someVariable);
   parentWindow.someOtherFunction();
   

3. Hash URL (#):

   • Metodă simplă, dar limitată.
   • Se pot transmite date mici modificând hash-ul în URL-ul iframe.
   • Modificările hash-ului nu reîncarcă pagina.
   • Este necesar să monitorizați schimbările hash-ului (de exemplu, prin evenimentul hashchange).

   // În fereastra părinte, pentru a modifica hash-ul iframe
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.location.hash = 'data=some_value';
   
   // În iframe, pentru a citi hash-ul
   window.addEventListener('hashchange', function() {
       const hash = window.location.hash;
       console.log('Hash-ul s-a schimbat:', hash);
       // Parsarea datelor din hash
   });
   

4. Modificarea location.href (mai puțin recomandată):

   • Transmiterea datelor prin modificarea URL-ului iframe și reîncărcarea sa.
   • Nu este potrivit pentru schimburi frecvente.

5. Stocare partajată (Same-Origin):

   • localStorage și sessionStorage.
   • Dacă iframe și pagina părinte sunt pe același domeniu, pot folosi aceleași stocări.

   // În fereastra părinte
   localStorage.setItem('sharedData', JSON.stringify({ value: 'Exemplu' }));
   
   // În iframe
   const data = JSON.parse(localStorage.getItem('sharedData'));
   console.log('Date din localStorage:', data);
   

Alegerea metodei depinde de politica de securitate (Same-Origin Policy) și de volumul/tipul de date transmise. PostMessage este cea mai flexibilă și sigură soluție pentru schimbul între domenii diferite.