iframe və əsas səhifə arasında məlumat mübadiləsi necə həyata keçirilir?

Məlumatların mübadiləsi üçün bir neçə üsul mövcuddur:

1. PostMessage API:

   • Əsas və təhlükəsiz üsul.
   • Fərqli domenlərdən olan pəncərələr (iframe/ana pəncərə, müxtəlif pəncərələr/sekmeler) arasında mesaj göndərməyə imkan verir.
   • XSS hücumlarının qarşısını almaq üçün gözlənilən origin göstərmək vacibdir.

   // Ana pəncərədən iframe-ə göndərmə
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.postMessage('Salam ana!', 'https://trusted-domain.com');
   
   // Iframe-də qəbul
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://parent-domain.com') {
           return; // Göndərəni yoxlamaq
       }
       console.log('Iframe-də alınan mesaj:', event.data);
   });
   
   // Iframe-dən ana pəncərəyə göndər
   window.parent.postMessage('Salam iframe!', 'https://parent-domain.com');
   
   // Ana pəncərədə qəbul
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://iframe-domain.com') {
           return; // Göndərəni yoxlamaq
       }
       console.log('Ana pəncərədə alınan mesaj:', event.data);
   });
   

2. window obyektinə birbaşa giriş (yalnız Same-Origin üçün):

   • Əgər iframe və ana səhifə eyni domenə aiddirsə (Same-Origin Policy), onlar birbaşa window obyektlərinə giriş edə bilərlər.

   // Ana pəncərədə
   const iframeEl = document.getElementById('my-iframe');
   const iframeWindow = iframeEl.contentWindow;
   iframeWindow.someVariable = 'Valyuta ana pəncərədən';
   iframeWindow.someFunction();
   
   // Iframe-də
   const parentWindow = window.parent;
   console.log(parentWindow.someVariable);
   parentWindow.someOtherFunction();
   

3. URL hash (#):

   • Sadə, lakin məhduddur.
   • Kiçik məlumatlar göndərmək üçün iframe URL-də hash-i dəyişdirmək olar.
   • Hash dəyişiklikləri səhifəni yeniləməz.
   • Hash dəyişikliklərini izləmək lazımdır (məsələn, hashchange hadisəsi ilə).

   // Ana pəncərədə, iframe-in hash-ni dəyişdirmək
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.location.hash = 'data=some_value';
   
   // Iframe-də hash-i oxumaq
   window.addEventListener('hashchange', function() {
       const hash = window.location.hash;
       console.log('Hash dəyişdi:', hash);
       // Hash-dən məlumatların parsinqi
   });
   

4. location.href dəyişdirmək (daha az tövsiyə olunur):

   • URL-i dəyişdirərək məlumat göndərmək və yenidən yükləmək.
   • Tez-tez məlumat mübadiləsi üçün uyğun deyil.

5. Paylaşılan yaddaş (Same-Origin):

   • localStorage və sessionStorage.
   • Əgər iframe və ana səhifə eyni domenə aiddirsə, onlar eyni yaddaşı istifadə edə bilərlər.

   // Ana pəncərədə
   localStorage.setItem('sharedData', JSON.stringify({ value: 'Nümunə' }));
   
   // Iframe-də
   const data = JSON.parse(localStorage.getItem('sharedData'));
   console.log('localStorage-dan məlumat:', data);
   

Yöntəm seçimi təhlükəsizlik siyasətindən (Same-Origin Policy) və ötürülən məlumatların həcmi/tipi ilə bağlıdır. PostMessage ən çevik və təhlükəsiz həll yoludur.