Hogyan használtad az iframe elemet a projektjeidben…

Az alábbiakban a <iframe> használatát ismertetem:

Tartalom megjelenítése más domainekről: Külső widgetek (térképek, videolejátszók), reklámblokkok, szolgáltatásokkal való integrációk beágyazása.
Elkülönített környezetek létrehozása: Külső JavaScript-kód vagy stílusok futtatása anélkül, hogy hatással lenne a főoldalra. Például homokozó (sandbox) a felhasználói tartalom megtekintése vagy kód szerkesztők indítása esetén.
Domainek közötti kommunikáció: Adatok átadása a szülőoldal és az <iframe> tartalma között a window.postMessage segítségével.
Statikus HTML-oldalak beágyazása: Egy oldal vagy dokumentum egy részének megjelenítése teljes navigáció nélkül.

window.postMessage használatának példája:

Szülőoldal:

// Üzenet küldése az iframe-nek
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('helló a szülőtől', 'https://trusted-domain.com');

// Üzenet fogadása az iframe-től
window.addEventListener('message', (event) => {
  // Az üzenet forrásának ellenőrzése biztonság érdekében
  if (event.origin === 'https://trusted-domain.com') {
    console.log('Üzenet az iframe-től:', event.data);
  }
});

Az iframe belsejében lévő oldal:

// Üzenet fogadása a szülőoldaltól
window.addEventListener('message', (event) => {
  // Az üzenet forrásának ellenőrzése biztonság érdekében
  if (event.origin === 'https://parent-domain.com') {
    console.log('Üzenet a szülőtől:', event.data);

    // Válasz küldése a szülőoldalnak
    event.source.postMessage('helló az iframe-ből', event.origin);
  }
});

Videó beágyazási példa:

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

A <iframe>-mel való munka során mindig figyelni kell a biztonságra, különösen a sandbox attribútumra és az event.origin ellenőrzésére a window.postMessage használatakor. Emellett fontos figyelembe venni a SEO szempontokat is, mivel a <iframe> tartalma keresőmotorok által indexelhető.

Hogyan használtad az iframe elemet a projektjeidben?