Жобаларыңызда iframe элементин кантип колдондуңуз…

Көбүрөөк <iframe> колдонуу:

Башка домендерден мазмун көрсөтүү: сырттан келген виджеттерди (карта, видеоплеер), жарнама блоктору, кызматтар менен интеграциялоо.
Изоляцияланган чөйрөлөр түзүү: сырттан келген JavaScript кодун же стилилерди иштетүү, негизги баракка таасир этүүнүн коркунучсуздугу менен. Мисалы, колдонуучу мазмунун көрүү же код редакторлорун иштетүү үчүн песочница.
Междомендик өз ара аракеттенүү: ата-энелик барак жана <iframe> мазмуну арасындагы маалымат алмашуу window.postMessage аркылуу.
Статикалык HTML барактарын киргизүү: сайттын бөлүгүн же документти толук навигациясыз көрсөтүү.

window.postMessage колдонуу мисалы:

Ата-энелик барак:

// iframeге билдирүү жөнөтүү
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('салам ата-энеден', 'https://trusted-domain.com');

// iframeден билдирүү алуу
window.addEventListener('message', (event) => {
  // коопсуздук үчүн булагын текшерүү
  if (event.origin === 'https://trusted-domain.com') {
    console.log('iframeден билдирүү:', event.data);
  }
});

iframe ичиндеги баракча:

// ата-энеден келген билдирүүнү кабыл алуу
window.addEventListener('message', (event) => {
  // булагын текшерүү
  if (event.origin === 'https://parent-domain.com') {
    console.log('ата-энеден билдирүү:', event.data);

    // жооп жөнөтүү
    event.source.postMessage('салам iframeден', event.origin);
  }
});

Видеону киргизүү мисалы:

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

<iframe> менен иштөөдө коопсуздук маселелерине көңүл буруу керек, өзгөчө sandbox атрибуту жана event.origin текшерүүсү window.postMessage колдонууда. Ошондой эле SEO аспекттерин эске алуу керек, анткени <iframe> мазмуну издөө системалары тарабынан өзүнчө индекстелет.

Жобаларыңызда iframe элементин кантип колдондуңуз?