Kuidas kasutasite iframe elementi oma projektides?

Ma kasutas <iframe>:

• Sisu kuvamine teistest domeenidest: väliste vidinate (kaardid, videopleierid), reklaamblokid, integratsioonide kasutuselevõtt.
• Eraldatud keskkondade loomine: kolmanda osapoole JavaScripti koodi või stiilide käivitamine ilma peamise lehe mõjutamise riskita. Näiteks liivakasti kasutamine kasutajasisu vaatamiseks või redaktorite käivitamiseks.
• Tõketevaheline suhtlus: andmete edastamine vanemlehe ja <iframe> sisu vahel kasutades window.postMessage.
• Statiliste HTML-lehtede sisestamine: osa saidist või dokumendist kuvamine ilma täieliku navigeerimiseta.

Näide window.postMessage kasutamisest:

Vanemleht:

// Sõnumi saatmine iframe'ile
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('tere vanemalt', 'https://trusted-domain.com');

// Sõnumi vastuvõtt iframe'ist
window.addEventListener('message', (event) => {
  // Turvalisuse tagamiseks kontrollime allikat
  if (event.origin === 'https://trusted-domain.com') {
    console.log('Sõnum iframe'ist:', event.data);
  }
});

Iframe sees:

// Sõnumi vastuvõtt vanemlehelt
window.addEventListener('message', (event) => {
  // Allika kontroll
  if (event.origin === 'https://parent-domain.com') {
    console.log('Vanemalt:', event.data);

    // Vastuse saatmine vanemale
    event.source.postMessage('tere iframe' , event.origin);
  }
});

Video sisestamise näide:

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

Töötades <iframe>-ga pöörasin alati tähelepanu turvalisusele, eriti sandbox atribuudi ja event.origin kontrollimisele window.postMessage kasutamisel. Samuti arvestasin SEO aspektidega, kuna <iframe> sisu indekseeritakse eraldi otsingumootorite poolt.