Layihələrinizdə iframe elementindən necə istifadə etdiniz?

Mən <iframe> istifadə etmişəm:

• Başqa domenlərdən məzmunu göstərmək üçün: Xarici vidjetlərin (xəritələr, video pleyerlər), reklam bloklarının, xidmətlərlə inteqrasiyanın yerləşdirilməsi.
• İzolyasiya mühitlərinin yaradılması üçün: Əsas səhifəyə təsir etmədən xarici JavaScript kodu və ya üslubların işlədilməsi. Məsələn, istifadəçi məzmununu baxarkən və ya kod redaktorlarını işə salarkən sandbox üçün.
• Domenlərarası qarşılıqlı əlaqə: window.postMessage istifadə edərək ana səhifə və <iframe> məzmunu arasında məlumatların ötürülməsi.
• Statik HTML səhifələrinin yerləşdirilməsi: Sayt və ya sənədin bir hissəsini tam naviqasiyasız göstərmək.

window.postMessage ilə istifadə nümunəsi:

Valideyn səhifə:

// iframe-ə mesaj göndərmək
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('salam valideyn', 'https://trusted-domain.com');

// iframe-dən mesaj almaq
window.addEventListener('message', (event) => {
  // Mesaj mənbəyini təhlükəsizlik üçün yoxlamaq
  if (event.origin === 'https://trusted-domain.com') {
    console.log('iframe-dən mesaj:', event.data);
  }
});

iframe içindəki səhifə:

// valideyn səhifədən mesaj almaq
window.addEventListener('message', (event) => {
  // Mesaj mənbəyini təhlükəsizlik üçün yoxlamaq
  if (event.origin === 'https://parent-domain.com') {
    console.log('valideyn:', event.data);

    // cavab göndərmək
    event.source.postMessage('salam iframe-dən', event.origin);
  }
});

Video yerləşdirmə nümunəsi:

<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> ilə işləyərkən, təhlükəsizlik məsələlərinə diqqət yetirmək, xüsusən sandbox atributu və event.origin yoxlamasına diqqət yetirmək vacibdir. Həmçinin, SEO aspektləri də nəzərə alınmalıdır, çünki <iframe>-in məzmunu axtarış motorları tərəfindən indeksləşdirilir.