Ako ste vo svojich projektoch použili prvok iframe?

Uporabil som <iframe> na:

• Zobrazenie obsahu z iných domén: Vkladanie externých widgetov (mapy, prehrávače videí), reklamných blokov, integrácií s službami.
• Vytváranie izolovaných prostredí: Spúšťanie externého JavaScript kódu alebo štýlov bez rizika ovplyvnenia hlavnej stránky. Napríklad pre sandbox pri prezeraní používateľského obsahu alebo spustení editorov kódu.
• Medzi doménová komunikácia: Prenos dát medzi rodičovskou stránkou a obsahom <iframe> pomocou window.postMessage.
• Vkladanie statických HTML stránok: Zobrazenie časti stránky alebo dokumentu bez úplnej navigácie.

Príklad použitia s window.postMessage:

Rodičovská stránka:

// Odoslanie správy do iframe
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('ahoj od rodiča', 'https://trusted-domain.com');

// Prijímanie správy z iframe
window.addEventListener('message', (event) => {
  // Kontrola zdroja správy pre bezpečnosť
  if (event.origin === 'https://trusted-domain.com') {
    console.log('Správa z iframe:', event.data);
  }
});

Stránka v iframe:

// Prijímanie správy od rodičovskej stránky
window.addEventListener('message', (event) => {
  // Kontrola zdroja správy pre bezpečnosť
  if (event.origin === 'https://parent-domain.com') {
    console.log('Správa od rodiča:', event.data);

    // Odoslanie odpovede rodičovskej stránke
    event.source.postMessage('ahoj z iframe', event.origin);
  }
});

Príklad vloženia 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>

Pri práci s <iframe> je vždy dôležité venovať pozornosť bezpečnosti, najmä atribútu sandbox a kontrole event.origin pri používaní window.postMessage. Tiež je potrebné zvážiť SEO aspekty, pretože obsah <iframe> je indexovaný vyhľadávačmi.