Jak jste ve svých projektech použili prvek iframe?

Použil jsem <iframe> pro:

• Zobrazení obsahu z jiných domén: Vkládání externích widgetů (mapy, videopřehrávače), reklamních bloků, integrací s službami.
• Vytváření izolovaných prostředí: Spouštění externího JavaScriptového kódu nebo stylů bez rizika ovlivnění hlavní stránky. Například pro sandbox při prohlížení uživatelského obsahu nebo spuštění editorů kódu.
• Mezidomenová komunikace: Přenos dat mezi rodičovskou stránkou a obsahem <iframe> pomocí window.postMessage.
• Vkládání statických HTML stránek: Zobrazení části webu nebo dokumentu bez úplné navigace.

Příklad použití s window.postMessage:

Rodičovská stránka:

// Odeslání zprávy do iframe
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('ahoj od rodiče', 'https://trusted-domain.com');

// Přijímání zprávy z iframe
window.addEventListener('message', (event) => {
  // Kontrola zdroje zprávy pro bezpečnost
  if (event.origin === 'https://trusted-domain.com') {
    console.log('Zpráva z iframe:', event.data);
  }
});

Stránka uvnitř iframe:

// Přijímání zprávy od rodičovské stránky
window.addEventListener('message', (event) => {
  // Kontrola zdroje zprávy pro bezpečnost
  if (event.origin === 'https://parent-domain.com') {
    console.log('Zpráva od rodiče:', event.data);

    // Odeslání odpovědi rodičovské stránce
    event.source.postMessage('ahoj z iframe', event.origin);
  }
});

Příklad vložení videa:

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

Při práci s <iframe> je vždy důležité dbát na bezpečnost, zejména na atribut sandbox a kontrolu event.origin při použití window.postMessage. Také je třeba vzít v úvahu SEO, protože obsah <iframe> je indexován vyhledávači.