Kako ste koristili element iframe u svojim projektima?

Koristio sam <iframe> za:

• Prikaz sadržaja sa drugih domena: Ugrađivanje eksternih vidžeta (karte, video plejeri), reklamnih blokova, integracija sa servisima.
• Kreiranje izolovanih okruženja: Pokretanje eksternog JavaScript koda ili stilova bez rizika od uticaja na glavnu stranicu. Na primer, za sandbox prilikom pregleda korisničkog sadržaja ili pokretanja uređivača koda.
• Međudomena interakcija: Prenos podataka između roditeljske stranice i sadržaja <iframe> koristeći window.postMessage.
• Ugrađivanje statičnih HTML stranica: Prikaz dela sajta ili dokumenta bez potpune navigacije.

Primer korišćenja sa window.postMessage:

Roditeljska stranica:

// Slanje poruke u iframe
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('zdravo od roditelja', 'https://trusted-domain.com');

// Primanje poruke iz iframe
window.addEventListener('message', (event) => {
  // Provera izvora poruke za sigurnost
  if (event.origin === 'https://trusted-domain.com') {
    console.log('Poruka iz iframe:', event.data);
  }
});

Stranica unutar iframe:

// Primanje poruke od roditeljske stranice
window.addEventListener('message', (event) => {
  // Provera izvora poruke za sigurnost
  if (event.origin === 'https://parent-domain.com') {
    console.log('Poruka od roditelja:', event.data);

    // Slanje odgovora roditeljskoj stranici
    event.source.postMessage('zdravo iz iframe', event.origin);
  }
});

Primer ugrađivanja 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>

Prilikom rada sa <iframe>, uvek je važno obratiti pažnju na sigurnost, posebno na atribut sandbox i proveru event.origin pri korišćenju window.postMessage. Takođe, treba razmotriti SEO aspekte, jer sadržaj <iframe>-a indeksiraju pretraživači.