İframe Etiketi web sayfasına diğer kökenleri (diğer siteler) gelen embed içerik olanağı sunar.

Teknik olarak, bir iframe yeni bir yuvalanmış gözatma bağlamı oluşturur. Bu, iframe'deki herhangi bir şeyin üst sayfaya müdahale etmediği ve bunun tersi olduğu anlamına gelir. JavaScript ve CSS, iframe'lere / iframe'lerden "sızma" yapmaz.

Birçok site, çeşitli şeyler gerçekleştirmek için iç çerçeveler kullanır. Codepen, Glitch veya sayfanın bir bölümünde kod yazmanıza izin veren diğer sitelere aşina olabilirsiniz ve sonucu bir kutu içinde görürsünüz. Bu bir iframe.

Şu şekilde bir tane yapabilirsiniz:

<iframe src="page.html"></iframe>

Bir URL de yükleyebilirsiniz:

<iframe src="https://site.com/page.html"></iframe>

Bir dizi genişlik ve yükseklik parametresi ayarlayabilir (veya bunları CSS kullanarak ayarlayabilirsiniz) aksi takdirde, iframe varsayılanlar olan 300x150 piksellik bir kutu kullanır:

<iframe src="page.html" width="800" height="400"></iframe>

Srcdoc

Srcdoc Nitelik bazı satır içi HTML göstermek için belirlemenizi sağlar. Bu bir alternatif src, ancak yeni ve Edge 18 ve daha düşük sürümlerde ve IE'de desteklenmiyor:

<iframe srcdoc="<p>My dog is a good dog</p>"></iframe>

Kum havuzu

Bu sandbox özellik, iframe'lerde izin verilen işlemleri sınırlamamıza olanak tanır.

Atlarsak, her şeye izin verilir:

<iframe src="page.html"></iframe>

"" Olarak ayarlarsak hiçbir şeye izin verilmez:

<iframe src="page.html" sandbox=""></iframe>

sandbox Özniteliğe seçenekler ekleyerek neye izin vereceğimizi seçebiliriz . Aralarına boşluk ekleyerek birden fazla olana izin verebilirsiniz. 

Kullanabileceğiniz seçeneklerin eksik bir listesi:

  • allow-forms: formların gönderilmesine izin ver
  • allow-modalsalert()JavaScript'te çağırma dahil, modal pencereleri açmaya izin ver
  • allow-orientation-lock ekran yönünü kilitlemeye izin ver
  • allow-popupspop-up'lara, kullanmaya window.open()ve target="_blank"bağlantılara izin ver
  • allow-same-origin yüklenen kaynağı aynı kaynak olarak değerlendir
  • allow-scripts yüklenen iframe'in komut dosyalarını çalıştırmasına izin verir (ancak pop-up'lar oluşturmaz).
  • allow-top-navigation iframe'e en üst düzey göz atma bağlamına erişim sağlar

Şu anda deneyseldir ve yalnızca Chromium tabanlı tarayıcılar tarafından desteklenmektedir; bu, üst pencere ile iç çerçeve arasındaki kaynak paylaşımının geleceğidir.

Bu sandboxözniteliğe benzer , ancak aşağıdakiler dahil belirli özelliklere izin vermemize izin verir:

  • accelerometer Sensors API Accelerometer arayüzüne erişim sağlar
  • ambient-light-sensor Sensors API AmbientLightSensor arayüzüne erişim sağlar
  • autoplay video ve ses dosyalarını otomatik oynatmaya izin verir
  • cameragetUserMedia API'sindenkameraya erişmeye izin verir
  • display-capture getDisplayMedia API kullanılarak ekran içeriğine erişilmesine izin verir
  • fullscreen tam ekran moduna erişime izin verir
  • geolocation Geolocation API 'ye erişime izin verir
  • gyroscope Sensors API Jiroskop arayüzüne erişim sağlar
  • magnetometer Sensors API Magnetometer arayüzüne erişim sağlar
  • microphone getUserMedia API'sini kullanarak cihaz mikrofonuna erişim sağlar
  • midi Web MIDI API'ye erişime izin verir
  • payment Ödeme İsteği API'sine erişim sağlar
  • speaker cihaz hoparlörlerinden ses çalmaya erişim sağlar
  • usb WebUSB API'ye erişim sağlar.
  • vibrate Titreşim API'sine erişim sağlar
  • vr WebVR API'ye erişim sağlar

Yönlendiren

Bir iframe yüklerken, tarayıcı onu Refererüstbilgiye kimin yüklediği hakkında önemli bilgiler gönderir (single'a dikkat edin r, birlikte yaşamamız gereken bir yazım hatası).

Yönlendirenin yanlış yazımı, bilgisayar bilimcisi Phillip Hallam-Baker'ın alanı HTTP spesifikasyonuna dahil etme önerisinden kaynaklandı. Yazım yanlışı, RFC 1945 Yorum Talebi standartlarına dahil edildiği sırada değiştirildi.

Bu referrerpolicyözellik, yönlendireni yüklerken iframe'e gönderecek şekilde ayarlamamızı sağlar. Yönlendiren, sayfanın kimin yüklediğini bilmesini sağlayan bir HTTP başlığıdır. İzin verilen değerler şunlardır:

  • no-referrer-when-downgrade bu varsayılandır ve geçerli sayfa HTTPS üzerinden yüklendiğinde ve iframe HTTP protokolüne yüklendiğinde yönlendireni gönderir
  • no-referrer yönlendiren başlığını göndermez
  • origin yönlendiren gönderilir ve varsayılan olan kaynak + yolu değil, yalnızca kaynağı (bağlantı noktası, protokol, etki alanı) içerir
  • origin-when-cross-originiframe'de aynı kaynaktan (bağlantı noktası, protokol, etki alanı) yükleme yapılırken, yönlendiren tam biçiminde (kaynak + yol) gönderilir. Aksi takdirde sadece menşe gönderilir
  • same-origin yönlendiren yalnızca iframe'de aynı kaynaktan (bağlantı noktası, protokol, etki alanı) yüklenirken gönderilir
  • strict-originGeçerli sayfa HTTPS üzerinden yüklüyse ve iframe HTTPS protokolünü de yüklüyse kaynağı yönlendiren olarak gönderir. İframe HTTP üzerinden yüklenirse hiçbir şey göndermez
  • strict-origin-when-cross-originorijini + yolu aynı orijin üzerinde çalışırken yönlendiren olarak gönderir. Geçerli sayfa HTTPS üzerinden yüklüyse ve iframe HTTPS protokolüne de yüklüyse kaynağı yönlendiren olarak gönderir. İframe HTTP üzerinden yüklenirse hiçbir şey göndermez
  • unsafe-url: Kaynaklar HTTP'den yüklenirken ve geçerli sayfa HTTPS üzerinden yüklendiğinde bile kaynak + yolu yönlendiren olarak gönderir