Jak używałeś elementu iframe w swoich projektach?

Używałem <iframe> do:

• Wyświetlania treści z innych domen: Osadzanie zewnętrznych widżetów (map, odtwarzaczy wideo), bloków reklamowych, integracji z usługami.
• Tworzenia odizolowanych środowisk: Uruchamiania zewnętrznego kodu JavaScript lub stylów bez ryzyka wpływu na główną stronę. Na przykład, do piaskownicy podczas przeglądania treści użytkownika lub uruchamiania edytorów kodu.
• Interakcji między domenami: Przesyłania danych między stroną nadrzędną a zawartością <iframe> za pomocą window.postMessage.
• Osadzania statycznych stron HTML: Wyświetlania części witryny lub dokumentu bez pełnej nawigacji.

Przykład użycia z window.postMessage:

Strona nadrzędna:

// Wysyłanie wiadomości do iframe
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('cześć z rodzica', 'https://trusted-domain.com');

// Odbieranie wiadomości z iframe
window.addEventListener('message', (event) => {
  // Sprawdzanie źródła wiadomości dla bezpieczeństwa
  if (event.origin === 'https://trusted-domain.com') {
    console.log('Wiadomość z iframe:', event.data);
  }
});

Strona wewnątrz iframe:

// Odbieranie wiadomości od strony nadrzędnej
window.addEventListener('message', (event) => {
  // Sprawdzanie źródła wiadomości dla bezpieczeństwa
  if (event.origin === 'https://parent-domain.com') {
    console.log('Wiadomość od rodzica:', event.data);

    // Wysyłanie odpowiedzi do strony nadrzędnej
    event.source.postMessage('cześć z iframe', event.origin);
  }
});

Przykład osadzania wideo:

<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>

Przy pracy z <iframe>, zawsze należy zwracać uwagę na bezpieczeństwo, szczególnie na atrybut sandbox i sprawdzanie event.origin podczas korzystania z window.postMessage. Należy również uwzględnić aspekty SEO, ponieważ zawartość <iframe> jest indeksowana przez wyszukiwarki.