Чӣ гуна мубодилаи маълумот байни iframe ва саҳифаи асосӣ сурат мегирад?

Дуорандозии чанд роҳ барои мубодилаи маълумот вуҷуд дорад:

1. PostMessage API:

   • роҳи асосӣ ва бехатар.
   • имкон медиҳад паёмҳоро байни тирезаҳо (iframe/падар, доменҳои гуногун) фиристодан.
   • муҳим аст, ки origin интизоршавандаро нишон диҳед, то аз ҳамлаҳои XSS пешгирӣ кунед.

   // Фиристодан аз тирезаи падар ба iframe
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.postMessage('Салом аз падар!', 'https://trusted-domain.com');
   
   // Гирифтани дар iframe
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://parent-domain.com') {
           return; // Санҷиши фиристанда
       }
       console.log('Паёми дар iframe гирифта шуд:', event.data);
   });
   
   // Фиристодан аз iframe ба тирезаи падар
   window.parent.postMessage('Салом аз iframe!', 'https://parent-domain.com');
   
   // Гирифтани дар тирезаи падар
   window.addEventListener('message', function(event) {
       if (event.origin !== 'https://iframe-domain.com') {
           return; // Санҷиши фиристанда
       }
       console.log('Паёми дар падар гирифта шуд:', event.data);
   });
   

2. Дастрасӣ ба объекти window (танҳо барои Same-Origin):

   • Агар iframe ва саҳифаи падар дар як домен бошанд (Same-Origin Policy), онҳо метавонанд мустақиман ба объектҳои window дастрасӣ пайдо кунанд.

   // Дар тирезаи падар
   const iframeEl = document.getElementById('my-iframe');
   const iframeWindow = iframeEl.contentWindow;
   iframeWindow.someVariable = 'Арзиши аз падар';
   iframeWindow.someFunction();
   
   // Дар iframe
   const parentWindow = window.parent;
   console.log(parentWindow.someVariable);
   parentWindow.someOtherFunction();
   

3. URL hash (#):

   • роҳи содда ва маҳдуд.
   • метавонад маълумоти хурдро тавассути тағйир додани hash дар URL-и iframe интиқол диҳад.
   • тағйиротҳои hash сайтро нав намекунад.
   • ниёз ба пайгирии тағйироти hash (масалан, тавассути ҳодисаи hashchange).

   // Дар тирезаи падар барои тағйир додани hash-и iframe
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.location.hash = 'data=қимати_моддӣ';
   
   // Дар iframe барои хондани hash
   window.addEventListener('hashchange', function() {
       const hash = window.location.hash;
       console.log('Hash тағйир ёфт:', hash);
       // Таҳлили маълумот аз hash
   });
   

4. Таҳрири location.href (камтар тавсия дода мешавад):

   • Маълумотро тавассути тағйир додани URL-и iframe ва навсозии он интиқол додан.
   • Барои мубодилаи зуд мувофиқ нест.

5. Ҳосил кардани захираҳои умумӣ (Same-Origin):

   • localStorage ва sessionStorage.
   • Агар iframe ва падар дар як домен бошанд, метавонанд истифодаи ҳамон захираҳоро кунанд.

   // Дар тирезаи падар
   localStorage.setItem('sharedData', JSON.stringify({ value: 'Масалан' }));
   
   // Дар iframe
   const data = JSON.parse(localStorage.getItem('sharedData'));
   console.log('Маълумот аз localStorage:', data);
   

Интихоби усул вобаста ба сиёсати бехатарӣ (Same-Origin Policy) ва ҳаҷм/навъи маълумоти интиқолшуда мебошад. PostMessage беҳтарин ва бехатартарин роҳи мубодилаи маълумот дар доменҳои гуногун мебошад.