iframe ile ana sayfa arasında veri alışverişi nasıl gerçekleşir?

Veri alışverişi için birkaç yöntem vardır:

1. PostMessage API:

   • Ana ve güvenli yöntem.
   • Farklı alan adlarından pencereler (iframe/ana pencere, farklı pencereler/sekmeler) arasında mesaj göndermeye olanak tanır.
   • XSS saldırılarını önlemek için beklenen origin belirtmek önemlidir.

   // Ana pencereden iframe'e gönderme
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.postMessage('Merhaba ana pencereden!', 'https://trusted-domain.com');
   
   // iframe'de alma
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://parent-domain.com') {
           return; // Göndereni kontrol et
       }
       console.log('Iframe içinde alınan mesaj:', event.data);
   });
   
   // iframe'den ana pencereye gönderme
   window.parent.postMessage('Merhaba iframe!', 'https://parent-domain.com');
   
   // ana pencerede alma
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://iframe-domain.com') {
           return; // Göndereni kontrol et
       }
       console.log('Ana pencerede alınan mesaj:', event.data);
   });
   

2. window nesnesine erişim (Sadece Same-Origin için):

   • Eğer iframe ve ana sayfa aynı alan adında ise (Same-Origin Policy), doğrudan window nesnelerine erişebilirler.

   // Ana pencerede
   const iframeEl = document.getElementById('my-iframe');
   const iframeWindow = iframeEl.contentWindow;
   iframeWindow.someVariable = 'Ana pencereden değer';
   iframeWindow.someFunction();
   
   // iframe'de
   const parentWindow = window.parent;
   console.log(parentWindow.someVariable);
   parentWindow.someOtherFunction();
   

3. URL hash (#):

   • Basit ama sınırlı yöntem.
   • URL'deki hash'i değiştirerek küçük veriler iletebilir.
   • Hash değişiklikleri sayfayı yeniden yüklemez.
   • Hash değişikliklerini izlemek gerekir (örneğin, hashchange olayıyla).

   // Ana pencerede iframe'in hash'ini değiştirme
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.location.hash = 'data=some_value';
   
   // iframe'de hash'i okuma
   window.addEventListener('hashchange', function() {
       const hash = window.location.hash;
       console.log('Hash değişti:', hash);
       // Hash'ten veri ayrıştırma
   });
   

4. location.href değişikliği (daha az tercih edilir):

   • URL'yi değiştirerek veri iletmek ve sayfayı yeniden yüklemek.
   • Sık sık veri alışverişi için uygun değildir.

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

   • localStorage ve sessionStorage.
   • Eğer iframe ve ana sayfa aynı alan adında ise, aynı depolamayı kullanabilirler.

   // Ana pencerede
   localStorage.setItem('sharedData', JSON.stringify({ value: 'Örnek' }));
   
   // iframe'de
   const data = JSON.parse(localStorage.getItem('sharedData'));
   console.log('localStorage verisi:', data);
   

Yöntem seçimi, güvenlik politikası (Same-Origin Policy) ve iletilen veri miktarına/türüne bağlıdır. PostMessage, çapraz alan adı alışverişleri için en esnek ve güvenli çözümdür.