iframe nedir?

Bir <iframe> (satır içi çerçeve), başka bir web sayfasını veya belgesini geçerli sayfa içine gömüp kullanan bir HTML öğesidir. Sayfanın dikdörtgen bir bölgesinde ayrı bir tarama bağlamı oluşturarak, harita, video veya üçüncü taraf widget gibi farklı bir URL'den gelen içeriğin, kullanıcı sayfadan ayrılmadan görüntülenmesini sağlar.

İframeler yaygın olarak YouTube videoları, Google Haritalar, ödeme formları, sosyal medya widget'ları ve reklam afişlerini gömmek için kullanılır. Gömülü içerik kendi bağlamında çalıştığından, sandbox ve allow gibi öznitelikler geliştiricilerin gömülü sayfanın ne yapabileceğini sıkı bir şekilde kontrol etmesini sağlar.

Araç açıklaması

Bu araç, basit bir formdan yapıştırmaya hazır <iframe> HTML kodu oluşturur. Kaynak URL'sini, boyutları, kaydırma davranışını, yükleme stratejisini, izinleri ve sandbox kısıtlamalarını yapılandırın ve araç anında karşılık gelen etiketi çıktı olarak verir. Manuel öznitelik yazması veya sandbox bayrağı sözdizimini ezberlemesi gerekmez.

Örnekler

Minimal iframe:

<iframe
  src="https://example.com"
  width="600"
  height="400"
  allowfullscreen
  style="border: none;"
></iframe>

Tembel yüklenen iframe sandbox ile:

<iframe
  src="https://example.com"
  width="800"
  height="500"
  loading="lazy"
  allowfullscreen
  style="border: none;"
  sandbox="allow-scripts allow-same-origin"
></iframe>

Kamera ve mikrofon izinleri olan iframe:

<iframe
  src="https://meet.example.com"
  width="960"
  height="540"
  allowfullscreen
  style="border: none;"
  allow="camera; microphone; display-capture"
></iframe>

Özellikler

  • Görsel bir formdan geçerli <iframe> kodu oluşturur — HTML bilgisi gerekmez
  • İzinler (allow) ve sandbox kısıtlamaları üzerinde tam kontrol
  • Herhangi bir seçeneği değiştirirken canlı önizleme güncellemeleri

Seçenekler açıklaması

Seçenek Açıklama
URL src özniteliği — gömülecek sayfanın adresi
Genişlik / Yükseklik iframe'in piksel cinsinden boyutları
Başlık Erişilebilir etiket (title özniteliği) ekran okuyucuları için
Ad name özniteliği, bağlantı hedefi olarak kullanılır
Kaydırma Kaydırma çubuğunu kontrol eder: otomatik, her zaman açık veya her zaman kapalı
Yükleme eager hemen yükler; lazy görünüm alanına yaklaşana kadar erteler
Tam ekran izni Gömülü içeriğin tam ekrana geçebilmesi için allowfullscreen ekler
Kenarlık İşaretlenmediğinde, varsayılan kenarlığı kaldırmak için style="border: none;" ekler
İzin verilen özellikler Gömülü sayfaya belirli tarayıcı API izinleri verir
Sandbox bayrakları Gömülü sayfanın yapabileceklerini kısıtlar; her bayrak belirli bir yeteneği yeniden etkinleştirir

İpuçları

  • Erişilebilirlik için her zaman title özniteliği sağlayın — ekran okuyucuları iframe'e odaklanırken bunu duyurur.
  • Sayfanın alt kısmındaki iframeler için loading="lazy" kullanarak sayfa yükleme performansını iyileştirin.
  • sandbox özniteliğini hiçbir bayrak olmadan eklemek içeriği tamamen kilitler; yalnızca gerçekten ihtiyaç duyduğunuz bayrakları ekleyin.