JavaScript Çerçeve (Frame) ve Iframe Yönetimi

Eski web tasarımında sayfayı bölümlere ayırmak için kullanılan frameset ve frame yapıları artık yerini modern iframe (Inline Frame) bileşenlerine bırakmıştır. JavaScript ile bir çerçeve içindeki dökümana erişebilir veya pencereler arası veri aktarımı yapabilirsiniz.

Önemli Güvenlik Notu (Same-Origin Policy)

Tarayıcı güvenlik kuralları gereği, sadece sizinle aynı domainde (alan adında) olan çerçevelerin içeriğine doğrudan müdahale edebilirsiniz. Farklı bir siteden gelen iframe içeriğini (Örn: YouTube) JS ile okuyamazsınız.

1) Iframe İçeriğine Erişmek

Sayfadaki bir iframe'in içindeki HTML elemanlarına ulaşmak için contentWindow veya contentDocument özellikleri kullanılır.

// 1. Iframe elemanını seçelim
const cerceve = document.getElementById("myIframe");

// 2. Iframe içindeki bir elemanın rengini değiştirelim
// (Sadece aynı domainde çalışır!)
cerceve.contentWindow.document.body.style.backgroundColor = "lightblue";

// 3. Iframe içindeki bir fonksiyonu tetikleyelim
cerceve.contentWindow.sayfayiSelamla();

2) postMessage: Güvenli İletişim

Farklı domainlerdeki pencerelerin birbiriyle güvenli bir şekilde mesajlaşmasını sağlayan en modern yöntem postMessage API'sidir.

// Mesaj Gönderen (Ana Sayfa)
iframe.contentWindow.postMessage("Merhaba Iframe!", "https://hedef-site.com");

// Mesajı Alan (Iframe İçindeki Sayfa)
window.addEventListener("message", (event) => {
    if (event.origin !== "https://ana-site.com") return; // Güvenlik kontrolü
    console.log("Mesaj alındı: " + event.data);
});

Neden Frame Yerine CSS Kullanmalısınız?

SEO: Çerçeve içindeki içerikler arama motorları tarafından zor taranır.
Erişilebilirlik: Ekran okuyucular çerçeveler arasında gezinirken sorun yaşayabilir.
Responsive: Iframe'leri mobil cihazlara uyumlu hale getirmek (Flexbox veya Grid'e göre) çok daha zordur.

Özet

frameset ve frame artık "deprecated" (kullanımdan kalkmış) kabul edilir.
Gerektiğinde harici içerikler için iframe kullanılmalıdır.
Çerçeveler arası iletişimde güvenlik (Cross-Origin) her zaman önceliklidir.

← Önceki: Modal ve Dialoglar JS Kod Örnekleri

Sonraki Ders →
Form Elemanları ile Çalışmak