Çalıştırılabilir HTML Dokümanları: HTML iframe

Q: HTML'de iframe nedir?

Bir (inline frame, satır içi çerçeve), geçerli sayfanın içinde ayrı bir web sayfası gösteren bir kutudur. Kendi belgesi, stilleri ve script'leri vardır; videolar, haritalar, reklamlar ve kod önizlemeleri gibi gömülü içerikler için kullanılmasının nedeni budur.

Q: Bir iframe'in kenarlığını nasıl kaldırırım?

CSS'te border: 0 ayarla. Eski frameborder="0" özelliği artık kullanılmıyor, ama kopyalanan birçok yerleştirme kodu hâlâ onu içerir.

Q: Bir iframe'i nasıl responsive yaparım?

CSS'te ona width: 100% ve bir aspect-ratio ver, örneğin video için aspect-ratio: 16 / 9, ve sabit bir yükseklik yazma. iframe böylece kapsayıcısıyla birlikte ölçeklenir ve şeklini korur.

Q: sandbox özelliği bir iframe'de ne yapar?

Boş bir sandbox özelliği çerçevenin içinde script'leri, form gönderimini, açılır pencereleri ve daha fazlasını engeller ve içeriği benzersiz bir origin'den geliyormuş gibi ele alır. Sonra allow-scripts ya da allow-forms gibi anahtar kelimelerle yalnızca gömülü içeriğin ihtiyaç duyduğu şeylere izin verirsin.

iframe nasıl kullanılır

Bir <iframe> seninkinin içinde başka bir sayfa gösterir. Ona src içinde sayfanın adresini, onu tarif eden bir title ve bir boyut ver:

<iframe src="https://example.com/" title="Example site" width="600" height="400"></iframe>

Çerçeve sayfayı kendi stilleri ve script'leri olan ayrı bir belge olarak yükler. Bu sayfadaki örnekler src yerine, çerçevenin HTML'ini doğrudan özelliğin içine koyan srcdoc kullanır, bu yüzden başka bir site yüklemeden çalışırlar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    p { color: #2563eb; font-weight: 600; }
  </style>
</head>
<body>
  <p>This paragraph is in the outer page.</p>
  <iframe title="Inner page" width="320" height="120"
    srcdoc="<h1 style='font: 20px system-ui'>Hello from inside the frame</h1><p>The outer page's CSS does not reach me.</p>">
  </iframe>
</body>
</html>

Dıştaki paragraf mavi ve kalın; çerçevenin içindeki paragraf ise, aynı p kuralı sayfada olmasına rağmen, öyle değil. Stiller çerçeve sınırını hiçbir yönde geçmez. Varsayılan kenarlık ve 300×150 varsayılan boyut tarayıcıdan gelir; width ve height özellikleri boyutu geçersiz kılar.

YouTube videosu ya da harita yerleştirmek

Video siteleri ve harita hizmetleri sana hazır iframe kodu verir. YouTube'da Paylaş'a, sonra Yerleştir'e bas:

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

Google Maps için yeri aç, Paylaş'a, sonra Harita yerleştir'e bas ve iframe'i aynı şekilde kopyala. title değerini koru (ekran okuyucular çerçeveye girerken onu duyurur) ve sabit boyutları aşağıdaki responsive CSS ile değiştir. allow özelliği çerçeveye, gömülü sayfalarda varsayılan olarak kapalı olan otomatik oynatma ya da tam ekran gibi özellikler verir.

Boyut, kenarlık ve responsive iframe'ler

Kopyalanan yerleştirme kodları telefonlarda taşan sabit piksel boyutları kullanır. width: 100% ile birlikte aspect-ratio, çerçevenin kapsayıcısını doldurmasını ve şeklini korumasını sağlar; border: 0 da varsayılan inset kenarlığı kaldırır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Responsive iframe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .embed {
      width: 100%;
      aspect-ratio: 16 / 9;
      border: 0;
      border-radius: 8px;
      background: #111827;
    }
    .wrap { max-width: 480px; }
  </style>
</head>
<body>
  <div class="wrap">
    <iframe class="embed" title="Video placeholder"
      srcdoc="<body style='margin:0;height:100vh;display:grid;place-items:center;color:#fff;font:16px system-ui'>16:9 frame">
    </iframe>
  </div>
</body>
</html>

max-width: 480px değerini başka bir değerle değiştir, çerçeve her genişlikte 16:9 şeklini korur. Tarayıcının varsayılan kenarlığını görmek için border: 0 satırını kaldır. Eski frameborder, scrolling ve marginheight özellikleri artık kullanılmıyor; CSS kullan.

sandbox: çerçevenin yapabileceklerini sınırla

Bir çerçeve, her sayfa gibi script çalıştırabilir, form gönderebilir ve açılır pencere açabilir. sandbox özelliği bu yetkileri elinden alır; boş bir sandbox neredeyse her şeyi engeller ve her anahtar kelime birini geri verir. Aşağıdaki iki çerçeve de küçük bir script içeren aynı HTML'i alır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>sandbox</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { width: 240px; height: 70px; border: 2px solid #e5e7eb; border-radius: 6px; }
    code { display: block; margin: 8px 0 4px; }
  </style>
</head>
<body>
  <code>sandbox=""</code>
  <iframe id="a" sandbox="" title="Sandboxed frame"></iframe>
  <code>sandbox="allow-scripts"</code>
  <iframe id="b" sandbox="allow-scripts" title="Frame with scripts allowed"></iframe>
  <script>
    const html = '<p id="s" style="font: 15px system-ui">Scripts are blocked</p>' +
      '<script>document.getElementById("s").textContent = "JavaScript ran";<\/script>';
    document.getElementById('a').srcdoc = html;
    document.getElementById('b').srcdoc = html;
  </script>
</body>
</html>

İlk çerçeve yer tutucu metnini korur, çünkü script'i hiç çalışmaz (Chrome'un konsolu bunun için bir "Blocked script execution" mesajı yazar). Kullanıcının yazdığı HTML gibi tamamen güvenmediğin içerikleri çerçeve içine aldığında her zaman sandbox kullan ve yalnızca ihtiyaç duyduğu anahtar kelimeleri ekle:

Anahtar kelime	İzin verir
`allow-scripts`	JavaScript çalıştırmaya
`allow-forms`	Form göndermeye
`allow-popups`	`window.open` ve `target="_blank"` linklerine
`allow-modals`	`alert()`, `confirm()` ve `prompt()` çağrılarına
`allow-same-origin`	İçeriğin gerçek origin'i olarak ele alınmasına (çerezler, depolama)
`allow-top-navigation`	Bütün sekmenin senin sayfandan başka yere götürülmesine

Kendi origin'inden gelen içerik için allow-scripts ile allow-same-origin değerlerini asla birleştirme: çerçevedeki script bu durumda kendi sandbox'ını kaldırabilir.

Bir çerçeveyle konuşmak: postMessage

Dış sayfa ve çerçeve ayrı belgelerdir. Origin'leri farklı olduğunda birbirlerinin DOM'una dokunamazlar, ama mesaj gönderebilirler. Bir mesaj yaz ve onu çerçevenin içine gönder:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>postMessage</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    iframe { display: block; width: 280px; height: 80px; margin-top: 10px; border: 2px solid #2563eb; border-radius: 6px; }
  </style>
</head>
<body>
  <input id="msg" value="Hello, frame">
  <button id="send">Send</button>
  <iframe id="frame" title="Message receiver" srcdoc="
    <p style='font: 15px system-ui' id='got'>Waiting for a message</p>
    <script>
      addEventListener('message', (e) => {
        document.getElementById('got').textContent = 'Received: ' + e.data;
      });
    </script>">
  </iframe>
  <script>
    document.getElementById('send').onclick = () => {
      const frame = document.getElementById('frame');
      frame.contentWindow.postMessage(document.getElementById('msg').value, '*');
    };
  </script>
</body>
</html>

Gerçek kodda '*' yerine çerçevenin tam origin'ini ('https://maps.example.com' gibi) ver ve alıcıda e.origin değerini kontrol et, böylece mesajlar yalnızca beklediğin siteye gider ve yalnızca oradan gelir.

Performans ve bir site reddettiğinde

Lazy loading. Sayfanın aşağısındaki çerçevelere loading="lazy" ekle; tarayıcı onları ancak okur yakınlarına kaydırdığında yükler. Her iframe tam bir sayfa yüklemesidir, bu yüzden çok sayıda gömülü içerik barındıran bir sayfa bu olmadan yavaşlar.
"Bağlanmayı reddetti". Birçok site (bankalar, çoğu sosyal ağ, Google arama), çerçeve içine alınmayı yasaklayan bir X-Frame-Options ya da frame-ancestors header'ı gönderir ve tarayıcı çerçevede bir hata gösterir. Sayfan bunu geçersiz kılamaz. Sitenin resmi yerleştirme URL'sini ya da bir link kullan.
Erişilebilirlik. Her zaman title ayarla. Bir ekran okuyucunun çerçeveyi adlandırmasının yolu budur; başlıksız birkaç çerçevesi olan bir sayfada gezinmek zordur.

Sık yapılan hatalar

Eksik bir title. Ekran okuyucular çerçeveyi adsız olarak duyurur.
Kopyalanan yerleştirme kodundaki sabit genişlikler. Onları width: 100% ve aspect-ratio ile değiştir.
Normal bir video dosyasını çerçeve içine almak. Kendi .mp4 dosyan için video elementini kullan; iframe'ler sayfalar içindir.
Çerçevedeki içeriğe güvenmek. Senin yazmadığın her şey için sandbox ekle.
Dıştaki CSS'in çerçeveye stil vermesini beklemek. Çerçevedeki sayfaya onun içinden stil ver.

Sıkça Sorulan Sorular

HTML'de iframe nedir?

Bir <iframe> (inline frame, satır içi çerçeve), geçerli sayfanın içinde ayrı bir web sayfası gösteren bir kutudur. Kendi belgesi, stilleri ve script'leri vardır; videolar, haritalar, reklamlar ve kod önizlemeleri gibi gömülü içerikler için kullanılmasının nedeni budur.

Bir YouTube videosunu iframe ile nasıl yerleştiririm?

YouTube'da Paylaş'ı, sonra Yerleştir'i seç ve kodu kopyala. Bu, src değeri https://www.youtube.com/embed/ ve video id'si olan bir iframe'dir. title ve allowfullscreen özelliklerini koru, responsive yapmak için de width: 100% ile CSS aspect-ratio: 16 / 9 kullan.

iframe'im neden sitenin bağlanmayı reddettiğini söylüyor?

Site, başka sitelerin onu çerçeve içine almasını yasaklayan bir X-Frame-Options ya da Content-Security-Policy: frame-ancestors header'ı gönderiyor. Birçok site bunu clickjacking'i önlemek için yapar. Kendi sayfandan bunu geçersiz kılamazsın; varsa sitenin resmi yerleştirme URL'sini kullan.

Bir iframe'in kenarlığını nasıl kaldırırım?

CSS'te border: 0 ayarla. Eski frameborder="0" özelliği artık kullanılmıyor, ama kopyalanan birçok yerleştirme kodu hâlâ onu içerir.

Bir iframe'i nasıl responsive yaparım?

CSS'te ona width: 100% ve bir aspect-ratio ver, örneğin video için aspect-ratio: 16 / 9, ve sabit bir yükseklik yazma. iframe böylece kapsayıcısıyla birlikte ölçeklenir ve şeklini korur.

sandbox özelliği bir iframe'de ne yapar?

Boş bir sandbox özelliği çerçevenin içinde script'leri, form gönderimini, açılır pencereleri ve daha fazlasını engeller ve içeriği benzersiz bir origin'den geliyormuş gibi ele alır. Sonra allow-scripts ya da allow-forms gibi anahtar kelimelerle yalnızca gömülü içeriğin ihtiyaç duyduğu şeylere izin verirsin.

İlgili kavramlar