Projelerinde iframe öğesini nasıl kullandınız…

<iframe> kullanımıyla:

Diğer alan adlarından içerik gösterimi: Harici widget'ların gömülmesi (haritalar, video oynatıcılar), reklam blokları, hizmetlerle entegrasyonlar.
İzolasyon ortamları oluşturma: Ana sayfayı etkilemeden harici JavaScript kodu veya stiller çalıştırma. Örneğin, kullanıcı içeriği görüntüleme sırasında sandbox veya kod düzenleyicileri başlatmak.
Alanlar arası etkileşim: window.postMessage kullanarak ana sayfa ile <iframe> içeriği arasında veri aktarımı.
Statik HTML sayfalarının gömülmesi: Bir sitenin veya belgenin bir bölümünü tam gezinme olmadan gösterme.

window.postMessage ile kullanım örneği:

Ana sayfa:

// iframe'e mesaj gönder
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('merhaba ana sayfadan', 'https://trusted-domain.com');

// iframe'den mesaj al
window.addEventListener('message', (event) => {
  // Güvenlik için mesaj kaynağını kontrol et
  if (event.origin === 'https://trusted-domain.com') {
    console.log('iframe'den mesaj:', event.data);
  }
});

iframe içindeki sayfa:

// ana sayfadan mesaj al
window.addEventListener('message', (event) => {
  // Güvenlik için mesaj kaynağını kontrol et
  if (event.origin === 'https://parent-domain.com') {
    console.log('ana sayfadan:', event.data);

    // ana sayfaya cevap gönder
    event.source.postMessage('iframe’dan merhaba', event.origin);
  }
});

Video gömme örneği:

<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> ile çalışırken, özellikle sandbox özniteliği ve window.postMessage kullanırken event.origin doğrulamasına dikkat edilmelidir. Ayrıca, içeriğin arama motorları tarafından indekslenmesi nedeniyle SEO açısından da dikkate alınmalıdır.

Projelerinde iframe öğesini nasıl kullandınız?