Kaip naudojote iframe elementą savo projektuose…

Naudojau <iframe>:

Turinio rodymui iš kitų domenų: trečiųjų šalių widget'ų (žemėlapių, vaizdo grotuvų), reklamos blokų, integracijų įgyvendinimui.
Atskirų aplinkų kūrimui: trečiųjų šalių JavaScript kodo ar stilių paleidimui be rizikos paveikti pagrindinį puslapį. Pavyzdžiui, naudotojo turinio peržiūrai ar redaktorių paleidimui.
Tarpdomeninio sąveikavimo: duomenų perdavimui tarp tėvinio puslapio ir <iframe> turinio naudojant window.postMessage.
Statinių HTML puslapių įterpimui: dalies svetainės ar dokumento rodymui be pilnos navigacijos.

Pavyzdys naudojant window.postMessage:

Tėvinis puslapis:

// Pranešimo siuntimas iframe
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('labas iš tėvo', 'https://trusted-domain.com');

// Pranešimo priėmimas iš iframe
window.addEventListener('message', (event) => {
  // Saugumo patikrinimas
  if (event.origin === 'https://trusted-domain.com') {
    console.log('Pranešimas iš iframe:', event.data);
  }
});

Iframe viduje:

// Priimti pranešimą iš tėvinio puslapio
window.addEventListener('message', (event) => {
  // Saugumo patikrinimas
  if (event.origin === 'https://parent-domain.com') {
    console.log('Pranešimas iš tėvo:', event.data);

    // Atsakymo siuntimas tėvui
    event.source.postMessage('labas iš iframe', event.origin);
  }
});

Vaizdo įterpimo pavyzdys:

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

Dirbant su <iframe> visada atkreipiau dėmesį į saugumo klausimus, ypač sandbox atributą ir event.origin patikrinimą naudojant window.postMessage. Taip pat atsižvelgdavau į SEO aspektus, nes <iframe> turinys atskirai indeksuojamas paieškos sistemų.

Kaip naudojote iframe elementą savo projektuose?