iframe va asosiy sahifa o'rtasida ma'lumot almashinuvi qanday amalga oshiriladi?

Ma'lumot almashish uchun bir nechta usullar mavjud:

1. PostMessage API:

   • Asosiy va xavfsiz usul.
   • Turli domenlardan oynalar (iframe/ota-onasi oynasi, turli oynalar/yorliqlar) o'rtasida xabar yuborishga imkon beradi.
   • XSS hujumlarini oldini olish uchun kutayotgan origin ni ko'rsatish muhim.

   // Ota oynadan iframe ga yuborish
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.postMessage('Salom ota!', 'https://trusted-domain.com');
   
   // Iframe da qabul qilish
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://parent-domain.com') {
           return; // yuboruvchini tekshirish
       }
       console.log('Iframe ichida qabul qilingan xabar:', event.data);
   });
   
   // Iframe dan ota oynaga yuborish
   window.parent.postMessage('Salom iframe!', 'https://parent-domain.com');
   
   // Ota oynada qabul qilish
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://iframe-domain.com') {
           return; // yuboruvchini tekshirish
       }
       console.log('Ota oynada qabul qilingan xabar:', event.data);
   });
   

2. window obyekti bilan to'g'ridan-to'g'ri kirish (faqat Same-Origin uchun):

   • Agar iframe va ota sahifa bir domenda bo'lsa (Same-Origin Policy), ular to'g'ridan-to'g'ri window ob'ektlariga kirishlari mumkin.

   // Ota oynada
   const iframeEl = document.getElementById('my-iframe');
   const iframeWindow = iframeEl.contentWindow;
   iframeWindow.someVariable = 'Ota dan qiymat';
   iframeWindow.someFunction();
   
   // Iframe da
   const parentWindow = window.parent;
   console.log(parentWindow.someVariable);
   parentWindow.someOtherFunction();
   

3. URL hash (#):

   • Oddiy, ammo cheklangan usul.
   • URL hash ni o'zgartirish orqali kichik ma'lumotlarni yuborish mumkin.
   • Hash o'zgarishlari sahifani yangilamaydi.
   • Hash o'zgarishlarini kuzatish kerak (masalan, hashchange hodimasi orqali).

   // Ota oynada iframe ning hash ni o'zgartirish
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.location.hash = 'data=some_value';
   
   // Iframe da hash ni o'qish
   window.addEventListener('hashchange', function() {
       const hash = window.location.hash;
       console.log('Hash o'zgardi:', hash);
       // Hash dan ma'lumotlarni tahlil qilish
   });
   

4. location.href ni o'zgartirish (kamroq tavsiya etiladi):

   • URL ni o'zgartirish orqali ma'lumot yuborish va sahifani qayta yuklash.
   • Tez-tez almashinuvi uchun mos emas.

5. Ulashilgan saqlash joylari (Same-Origin):

   • localStorage va sessionStorage.
   • Agar iframe va ota sahifa bir domenda bo'lsa, ular bir xil saqlash joylarini ishlatishlari mumkin.

   // Ota oynada
   localStorage.setItem('sharedData', JSON.stringify({ value: 'Misol' }));
   
   // Iframe da
   const data = JSON.parse(localStorage.getItem('sharedData'));
   console.log('localStorage dan ma'lumot:', data);
   

Usul tanlovi xavfsizlik siyosatiga (Same-Origin Policy) va uzatilayotgan ma'lumotlar hajmi/turiga bog'liq. PostMessage eng mos va xavfsiz yechim hisoblanadi, ayniqsa domenlararo almashinuvi uchun.