Kā jūs izmantojāt iframe elementu savos projektos?

Es izmantoju <iframe>:

• Satura attēlošanai no citiem domēniem: trešo pušu widgetu (kartes, video atskaņotāji), reklāmas blokku, integrāciju ieviešanai.
• Izolētu vidi veidošanai: trešo pušu JavaScript koda vai stilu palaišanai bez riska ietekmēt galveno lapu. Piemēram, smilškastes izmantošanai lietotāja satura skatīšanai vai redaktoru palaišanai.
• Tarpdomēnu mijiedarbībai: datu pārraidīšanai starp vecāku lapu un <iframe> saturu, izmantojot window.postMessage.
• Statisku HTML lapu iekļaušanai: daļas parādīšanai no vietnes vai dokumenta bez pilnas navigācijas.

Piemērs ar window.postMessage:

Vecāku lapa:

// Ziņojuma nosūtīšana iframe
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('sveiki no vecāka', 'https://trusted-domain.com');

// Ziņojuma saņemšana no iframe
window.addEventListener('message', (event) => {
  // Drošības nolūkos pārbauda avotu
  if (event.origin === 'https://trusted-domain.com') {
    console.log('Ziņojums no iframe:', event.data);
  }
});

Iekš iframe lapas:

// Ziņojuma saņemšana no vecāku lapas
window.addEventListener('message', (event) => {
  // Drošības pārbaude
  if (event.origin === 'https://parent-domain.com') {
    console.log('No vecāka:', event.data);

    // Atbildes nosūtīšana vecākam
    event.source.postMessage('sveiki no iframe', event.origin);
  }
});

Video iekļaušanas piemērs:

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

Ar <iframe> darbā vienmēr pievēršu uzmanību drošības jautājumiem, īpaši sandbox atribūtam un event.origin pārbaudei, izmantojot window.postMessage. Tāpat ņemu vērā SEO aspektus, jo <iframe> saturs tiek atsevišķi indeksēts meklētājprogrammās.