Как се осъществява обменът на данни между 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 (#):

   • Прост, но ограничен начин.
   • Може да пренася малки данни, като променя хеша в URL на iframe.
   • Промените в хеша не презареждат страницата.
   • Изисква проследяване на промяната на хеша (например чрез събитието hashchange).

   // В родителския прозорец, за промяна на хеша на iframe
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.location.hash = 'data=някаква_стойност';
   
   // В iframe, за четене на хеша
   window.addEventListener('hashchange', function() {
       const hash = window.location.hash;
       console.log('Хешът се промени:', 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 е най-гъвкавото и безопасно решение за крос-домейн обмен.