Hoe hebt u het iframe-element in uw projecten…

Ik heb <iframe> gebruikt voor:

Weergave van inhoud van andere domeinen: Het insluiten van externe widgets (kaarten, videospelers), advertentiebanners, integraties met diensten.
Creëren van geïsoleerde omgevingen: Het uitvoeren van externe JavaScript-code of stijlen zonder risico voor de hoofdpagina. Bijvoorbeeld voor sandboxing bij het bekijken van gebruikersinhoud of het starten van code-editors.
Domeinoverschrijdende interactie: Het overdragen van gegevens tussen de ouderpagina en de inhoud van <iframe> met behulp van window.postMessage.
Inbedden van statische HTML-pagina's: Het tonen van een deel van een website of document zonder volledige navigatie.

Voorbeeld van gebruik met window.postMessage:

Ouderpagina:

// Bericht sturen naar iframe
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('hallo van ouder', 'https://trusted-domain.com');

// Bericht ontvangen van iframe
window.addEventListener('message', (event) => {
  // Beveiligingscontrole van de bron
  if (event.origin === 'https://trusted-domain.com') {
    console.log('Bericht van iframe:', event.data);
  }
});

Pagina binnen iframe:

// Bericht ontvangen van ouder
window.addEventListener('message', (event) => {
  // Beveiligingscontrole van de bron
  if (event.origin === 'https://parent-domain.com') {
    console.log('Bericht van ouder:', event.data);

    // Antwoord sturen naar ouder
    event.source.postMessage('hallo van iframe', event.origin);
  }
});

Voorbeeld van het insluiten van een video:

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

Bij het werken met <iframe>, is het altijd belangrijk om aandacht te besteden aan veiligheid, vooral aan het sandbox-attribuut en het controleren van event.origin bij gebruik van window.postMessage. Ook moeten SEO-overwegingen worden meegenomen, aangezien de inhoud van <iframe> wordt geïndexeerd door zoekmachines.

Hoe hebt u het iframe-element in uw projecten gebruikt?