JavaScript Çerçeve Nesnesi (Frame Object)

Eskiden birden fazla sayfayı tek ekranda göstermek için frameset/frame çok kullanılırdı. Ancak modern web’de bu yaklaşım önerilmez. Bunun yerine genellikle CSS layout (grid/flex) veya gerekiyorsa iframe kullanılır.

Güncel Not

<frameset> ve <frame> etiketleri modern HTML standartlarında “deprecated” kabul edilir. Yeni projelerde tercih etmeyin; mevcut eski projeleri anlamak için bilmek yeterli.

Eski Yöntem: frameset / frame (Sadece Tarihsel Bilgi)

Bir sayfayı sütunlara ayırıp iki ayrı HTML belgesini aynı anda göstermek için kullanılırdı. Aşağıdaki örnek, eski bir yaklaşımı gösterir.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Çerçeve Nesnesi (Eski)</title>
</head>

<frameset cols="20%,*">
  <frame src="index.htm"  name="cerceve1">
  <frame src="index2.htm" name="cerceve2">
</frameset>

<noframes>
  <body>
    Tarayıcınız frame desteklemiyor.
  </body>
</noframes>
</html>

Açıklama

cols="20%,*" sayfayı iki kolona böler: sol kolon %20, sağ kolon kalan alanı kaplar. name="cerceve1" ve name="cerceve2" ile çerçevelere isim verilir. Eski JS’te bu çerçevelere parent.frames[0] gibi erişilirdi.

Modern Alternatif: iframe ile Benzer Düzen

Eğer gerçekten ayrı bir sayfayı “gömme” ihtiyacınız varsa <iframe> kullanılır. Aşağıdaki örnek frameset’in modern bir benzeridir.

<div style="display:flex; gap:12px;">
  <iframe
    src="index.htm"
    title="Sol içerik"
    style="width:20%; height:360px; border:1px solid #ddd;">
  </iframe>

  <iframe
    src="index2.htm"
    title="Sağ içerik"
    style="flex:1; height:360px; border:1px solid #ddd;">
  </iframe>
</div>

Püf Nokta

iframe içeriği başka bir domainden geliyorsa (cross-origin) JavaScript ile içerideki DOM’a doğrudan erişemezsiniz. Böyle durumlarda postMessage kullanılır.

İnce İpucu: parent / frames Mantığı (Eski Projeleri Okurken)

Eski projelerde çerçeveler genellikle şöyle çağrılırdı:

// Eski frame düzeninde:
parent.frames[0]  // 1. çerçeve
parent.frames[1]  // 2. çerçeve

// İsim verilmişse:
parent.frames["cerceve1"]
parent.frames["cerceve2"]

Dikkat

Cross-origin kısıtı frame/iframe fark etmeksizin geçerlidir. Farklı domain içeriğine “script ile girip okumaya çalışmak” hata üretir.

Modern İletişim: postMessage (iframe ile güvenli haberleşme)

Farklı origin durumunda, parent ve iframe arasında mesajlaşma için standart yöntem budur.

// Parent sayfada:
const iframe = document.getElementById("myFrame");
iframe.contentWindow.postMessage({ type: "HELLO", payload: "Merhaba" }, "*");

window.addEventListener("message", (event) => {
  // Güvenlik için origin kontrolü önerilir:
  // if (event.origin !== "https://ornek.com") return;

  if (event.data?.type === "REPLY") {
    console.log("Iframe yanıt:", event.data.payload);
  }
});

// Iframe içindeki sayfada:
window.addEventListener("message", (event) => {
  if (event.data?.type === "HELLO") {
    event.source.postMessage({ type: "REPLY", payload: "Mesaj alındı ✅" }, event.origin);
  }
});

Özet

frameset/frame eski bir yöntemdir; yeni projelerde kullanmayın
Gerekirse iframe tercih edilir
Cross-origin erişim kısıtlıdır; iletişim için postMessage kullanılır

JS Kod Örnekleri Tüm Örnekler

Sonraki →
Form Elemanları