Kaip vyksta duomenų keitimasis tarp iframe ir pagrindinio puslapio?

Yra keletas būdų keistis duomenimis:

1. PostMessage API:

   • Pagrindinis ir saugus būdas.
   • Leidžia siųsti žinutes tarp langų (iframe/tėvas, skirtingos domenos).
   • Svarbu nurodyti tikėtiną origin, kad būtų išvengta XSS atakų.

   // Siuntimas iš tėvinio lango į iframe
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.postMessage('Sveiki iš tėvo!', 'https://trusted-domain.com');
   
   // Priėmimas iframe
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://parent-domain.com') {
           return; // Patikriname siuntėją
       }
       console.log('Gauta žinutė iframe:', event.data);
   });
   
   // Siuntimas iš iframe į tėvinį langą
   window.parent.postMessage('Sveiki iš iframe!', 'https://parent-domain.com');
   
   // Priėmimas tėviniame lange
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://iframe-domain.com') {
           return; // Patikriname siuntėją
       }
       console.log('Gauta žinutė tėvame:', event.data);
   });
   

2. Prieiga prie window objekto (tik Same-Origin):

   • Jei iframe ir tėvinis puslapis yra toje pačioje domeno politikoje (Same-Origin Policy), jie gali tiesiogiai pasiekti vienas kito window objektus.

   // Tėvinio lango
   const iframeEl = document.getElementById('my-iframe');
   const iframeWindow = iframeEl.contentWindow;
   iframeWindow.someVariable = 'Reikšmė iš tėvo';
   iframeWindow.someFunction();
   
   // Iframe
   const parentWindow = window.parent;
   console.log(parentWindow.someVariable);
   parentWindow.someOtherFunction();
   

3. URL hash (#):

   • Paprastas, bet ribotas būdas.
   • Gali perduoti mažus duomenis, keisdami hash URL iframe.
   • Hash keitimai neperkrauna puslapio.
   • Reikia stebėti hash keitimus (pvz., per hashchange įvykį).

   // Tėvinio lango, keisti iframe hash
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.location.hash = 'duomenys=kažkokiavertė';
   
   // Iframe, skaityti hash
   window.addEventListener('hashchange', function() {
       const hash = window.location.hash;
       console.log('Hash pasikeitė:', hash);
       // Duomenų analizė iš hash
   });
   

4. location.href keitimas (mažiau rekomenduojama):

   • Duomenų perdavimas keičiant URL iframe ir jį perkraunant.
   • Nerekomenduojama dažnai naudoti.

5. Bendri saugyklos (Same-Origin):

   • localStorage ir sessionStorage.
   • Jei iframe ir tėvas yra toje pačioje domeno politikoje, jie gali naudoti tas pačias saugyklas.

   // Tėvinio lango
   localStorage.setItem('bendrasDuomenys', JSON.stringify({ reikšmė: 'Pavyzdys' }));
   
   // Iframe
   const duomenys = JSON.parse(localStorage.getItem('bendrasDuomenys'));
   console.log('Duomenys iš localStorage:', duomenys);
   

Pasirinktas metodas priklauso nuo saugumo politikos (Same-Origin Policy) ir perduodamų duomenų kiekio/tipo. PostMessage yra lankstiausias ir saugiausias sprendimas tarp domenų duomenų keitimu.