Как происходит обмен данными между 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 хеш (#):

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

   // В родительском окне, для изменения хеша iframe
   const iframeEl = document.getElementById('my-iframe');
   iframeEl.contentWindow.location.hash = 'data=some_value';
   
   // В 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 является наиболее гибким и безопасным решением для кросс-доменного обмена.