Kako se vrši razmena podataka između iframe i glavne stranice?

Postoji nekoliko načina za razmenu podataka:

1. PostMessage API:

   • Glavni i siguran način.
   • Omogućava slanje poruka između prozora (iframe/roditelj, različite domene).
   • Važno je navesti očekivani origin za sprečavanje XSS napada.

   // Slanje iz roditeljskog prozora u iframe
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.postMessage('Zdravo od roditelja!', 'https://trusted-domain.com');
   
   // Prijem u iframe
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://parent-domain.com') {
           return; // Provera pošiljaoca
       }
       console.log('Primljena poruka u iframe:', event.data);
   });
   
   // Slanje iz iframe u roditeljski prozor
   window.parent.postMessage('Zdravo iz iframe!', 'https://parent-domain.com');
   
   // Prijem u roditeljskom prozoru
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://iframe-domain.com') {
           return; // Provera pošiljaoca
       }
       console.log('Primljena poruka u roditelju:', event.data);
   });
   

2. Pristup objektu window (samo za Same-Origin):

   • Ako su iframe i roditeljska stranica na istoj domeni (Same-Origin Policy), mogu direktno pristupiti window objektima jedan drugom.

   // U roditeljskom prozoru
   const iframeEl = document.getElementById('my-iframe');
   const iframeWindow = iframeEl.contentWindow;
   iframeWindow.someVariable = 'Vrednost od roditelja';
   iframeWindow.someFunction();
   
   // U iframe
   const parentWindow = window.parent;
   console.log(parentWindow.someVariable);
   parentWindow.someOtherFunction();
   

3. URL hash (#):

   • Jednostavan, ali ograničen način.
   • Može prenositi male količine podataka promenom hasha u URL iframe.
   • Promene hasha ne osvežavaju stranicu.
   • Zahteva praćenje promene hasha (npr. putem događaja hashchange).

   // U roditeljskom prozoru, za promenu hasha iframe
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.location.hash = 'data=neka_vrednost';
   
   // U iframe
   window.addEventListener('hashchange', function() {
       const hash = window.location.hash;
       console.log('Hash se promenio:', hash);
       // Parsiranje podataka iz hasha
   });
   

4. Promena location.href (manje preporučljivo):

   • Prenos podataka promenom URL iframe i njegovim ponovnim učitavanjem.
   • Nije pogodno za čestu razmenu.

5. Deljena skladišta (Same-Origin):

   • localStorage i sessionStorage.
   • Ako su iframe i roditelj na istoj domeni, mogu koristiti ista skladišta.

   // U roditeljskom prozoru
   localStorage.setItem('sharedData', JSON.stringify({ value: 'Primer' }));
   
   // U iframe
   const data = JSON.parse(localStorage.getItem('sharedData'));
   console.log('Podaci iz localStorage:', data);
   

Izbor metode zavisi od sigurnosne politike (Same-Origin Policy) i obima/tipa prenesenih podataka. PostMessage je najfleksibilnije i najsigurnije rešenje za razmenu podataka između domena.