Как сте използвали елемента iframe в проектите си…

Използвах <iframe> за:

Показване на съдържание от други домейни: Вграждане на външни джаджи (карти, видео плейъри), рекламни блокове, интеграции с услуги.
Създаване на изолирани среди: Стартиране на външен JavaScript код или стилове без риск да повлияе на основната страница. Например, за пясъчници при преглед на потребителско съдържание или стартиране на редактори на код.
Междоменна комуникация: Прехвърляне на данни между родителската страница и съдържанието на <iframe> чрез window.postMessage.
Вграждане на статични HTML страници: Показване на част от сайт или документ без пълна навигация.

Пример за използване с window.postMessage:

Родителска страница:

// Изпращане на съобщение към iframe
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('здравей от родителя', 'https://trusted-domain.com');

// Получаване на съобщение от iframe
window.addEventListener('message', (event) => {
  // Проверка на източника на съобщението за сигурност
  if (event.origin === 'https://trusted-domain.com') {
    console.log('Съобщение от iframe:', event.data);
  }
});

Страница вътре в iframe:

// Получаване на съобщение от родителската страница
window.addEventListener('message', (event) => {
  // Проверка на източника на съобщението за сигурност
  if (event.origin === 'https://parent-domain.com') {
    console.log('Съобщение от родителя:', event.data);

    // Изпращане на отговор към родителската страница
    event.source.postMessage('здравей от iframe', event.origin);
  }
});

Пример за вграждане на видео:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  width="560"
  height="315"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

При работа с <iframe> винаги е важно да се обръща внимание на сигурността, особено на атрибута sandbox и проверката на event.origin при използване на window.postMessage. Също така трябва да се вземат предвид SEO аспектите, тъй като съдържанието на <iframe> се индексира от търсачките.

Как сте използвали елемента iframe в проектите си?