Wie haben Sie das iframe-Element in Ihren Projekten…

Ich habe <iframe> verwendet für:

Anzeige von Inhalten aus anderen Domains: Einbindung externer Widgets (Karten, Videoplayer), Werbeblöcke, Integrationen mit Diensten.
Erstellung isolierter Umgebungen: Ausführen von externem JavaScript-Code oder Styles ohne Risiko, die Hauptseite zu beeinflussen. Zum Beispiel für Sandboxes beim Anzeigen von Nutzerinhalten oder beim Starten von Code-Editoren.
Domänenübergreifende Interaktion: Datenübertragung zwischen der Elternseite und dem <iframe>-Inhalt mittels window.postMessage.
Einbettung statischer HTML-Seiten: Anzeige eines Teils einer Website oder eines Dokuments ohne vollständige Navigation.

Beispiel für die Verwendung mit window.postMessage:

Elternseite:

// Nachricht an iframe senden
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('hallo vom parent', 'https://trusted-domain.com');

// Nachricht vom iframe empfangen
window.addEventListener('message', (event) => {
  // Sicherheitsüberprüfung der Nachrichtenquelle
  if (event.origin === 'https://trusted-domain.com') {
    console.log('Nachricht vom iframe:', event.data);
  }
});

Seite im iframe:

// Nachricht vom Elternteil empfangen
window.addEventListener('message', (event) => {
  // Sicherheitsüberprüfung der Nachrichtenquelle
  if (event.origin === 'https://parent-domain.com') {
    console.log('Nachricht vom parent:', event.data);

    // Antwort an die Elternseite senden
    event.source.postMessage('hallo vom iframe', event.origin);
  }
});

Beispiel für die Einbettung eines Videos:

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

Beim Arbeiten mit <iframe> ist stets auf Sicherheit zu achten, insbesondere bei Verwendung des sandbox-Attributs und bei der Überprüfung von event.origin bei window.postMessage. Zudem sind SEO-Aspekte zu berücksichtigen, da der Inhalt des <iframe> von Suchmaschinen indexiert wird.

Wie haben Sie das iframe-Element in Ihren Projekten verwendet?