Chrome 154'te duyarlı iFrame'ler

Sebastian Benz
Bramus

Yayınlanma tarihi: 16 Eylül 2026

Chrome 154, duyarlı boyutlandırılmış iframe'ler için destek ekleyerek bir <iframe> öğesinin yerleştirilmiş dokümanının doğal boyutuna göre kendi boyutunu belirlemesine olanak tanır. Bu özellik, üçüncü taraf yorum widget'larını, farklı yüksekliklerdeki sosyal medya yerleştirmelerini veya <iframe> kullanan diğer yerleştirme türlerini sorunsuz bir şekilde yerleştirmek için idealdir.

Browser Support

  • Chrome: behind a flag.
  • Edge: behind a flag.
  • Firefox: not supported.
  • Safari: not supported.

Source

Duyarlı boyutlandırılmış iframe'ler, geliştiricilerin iframe içeriğini manuel olarak ölçtüğü, boyutları postMessage() ile gönderdiği ve yerleştirme sayfasındaki iframe boyutunu manuel olarak güncellediği yaygın bir kalıbın yerini alır.

Bu kayıtta, bir iFrame kullanılarak sayfaya yerleştirilmiş bir yorum formu gösterilmektedir. Kullanıcı yorumunu eklediğinde, yerleştirme sayfasındaki iFrame'in yüksekliği dinamik olarak güncellenir ve kaydırma çubukları olmadan sorunsuz bir görsel deneyim oluşturulur.

iFrame'i içeriğine göre boyutlandırma

Varsayılan olarak, bir iframe'in kendi görüntü alanı vardır. Yerleştirilmiş doküman bu görünüm alanından daha uzunsa kullanıcılar ek bir kaydırma çubuğu görebilir. Duyarlı iframe boyutlandırma sayesinde, yerleştirme sayfası bunun yerine içeriğe dayalı boyutlandırma kullanabilir:

.embed {
  width: 100%;
  frame-sizing: content-height;
}

Yerleştirilen doküman etkinleştirilmelidir:

<meta name="responsive-embedded-sizing" content="allow-origins=*">

Aşağıda tam bir örnek verilmiştir:

<style>
  .embed {
    width: 100%;
    frame-sizing: content-height;
  }
</style>
<iframe class="embed" src="/comments.html" title="Comments">
</iframe>

/comments.html içinde:

<!doctype html>
<html>
  <head>
    <meta name="responsive-embedded-sizing" content="allow-origins=*">
  </head>
  <body>
    ...
  </body>
</html>

Iframe artık sabit yükseklikteki bir görüntü alanı gibi davranmak yerine yerleştirilmiş dokümanın içerik yüksekliğini kullanabilir.

frame-sizing hareketini kullanın

Yeni frame-sizing özelliği, iframe'in içeriğinden hangi boyutun türetileceğini kontrol eder.

Desteklenen değerler:

frame-sizing: auto;
frame-sizing: content-width;
frame-sizing: content-height;
frame-sizing: content-inline-size;
frame-sizing: content-block-size;

auto mevcut iframe boyutlandırma davranışını korur.

Çoğu yatay yazma modunda, dikey olarak genişleyen yerleştirmeler için en kullanışlı değerler content-height ve content-block-size'dir.

frame-sizing kısıtlamasını diğer CSS kısıtlamalarıyla da birleştirebilirsiniz:

.embed {
  width: 100%;
  max-height: 80vh;
  frame-sizing: content-height;
}

Dinamik içerik değişikliklerinden sonra yeniden boyutlandırma

Tarayıcı, yerleştirilmiş dokümandaki her düzen değişikliğini sürekli olarak gözlemlemez.

Iframe'in içeriği ilk düzenden sonra değişirse (ör. daha fazla yorum yüklendikten veya bir panel genişletildikten sonra) yerleştirilmiş doküman, window.requestResize() ile yeni bir boyut hesaplaması isteyebilir.

async function loadMore() {
  const items = await fetchMoreItems();
  renderItems(items);
  window.requestResize();
}

window.requestResize() işlevini, dokümanda tüm değişiklikler yapıldıktan sonra, düzenlemeden önce çağırmanız en iyisidir. Bu açık güncelleme modeli, iFrame boyutunun değiştirilmesiyle görüntü alanının değiştiği, içeriğin değiştiği ve boyutun tekrar değiştiği yeniden boyutlandırma döngülerinin önlenmesine yardımcı olur.

Çapraz kaynak yerleştirmeleri

Duyarlı boyutlandırma, çapraz kaynak iFrame'lerle de kullanılabilir. Yerleştirilmiş doküman, hangi kaynaklara izin verileceğini kısıtlayabilir:

<meta
  name="responsive-embedded-sizing"
  content="allow-origins=https://publisher.example">

Bu, duyarlı boyutlandırmayı yalnızca https://publisher.example ile sınırlar. Birden fazla kaynak boşlukla ayrılır: content="allow-origins=https://publisher1.example https://publisher2.example".

Üçüncü taraf widget'ları için erişimi, ihtiyacı olan kaynaklarla kısıtlayın. Bu mekanizma, hangi sitelerin bir sayfayı yerleştirebileceğini kontrol eden içerik güvenliği politikasının frame-ancestors yönergesi gibi mevcut iFrame güvenlik denetimlerini tamamlar.

Progresif geliştirme

frame-sizing özelliğini desteklemeyen tarayıcılar için mevcut bir geri dönüşü korumak amacıyla özellik sorgularını kullanabilirsiniz:

.widget {
  width: 100%;
  height: 500px;
}

@supports (frame-sizing: content-height) {
  .widget {
    height: auto;
    frame-sizing: content-height;
  }
}

Yerleştirilmiş doküman dinamik olarak güncelleniyorsa requestResize() özelliğini de algılayabilirsiniz:

if ("requestResize" in window) {
  window.requestResize();
}

Bu nedenle, destek genişletilirken mevcut iframe boyutlandırma kodu yedek olarak kalabilir.

Dene

Aşağıdaki demoda duyarlı iFrame boyutlandırmayı deneyin: