Iframe responsif di Chrome 154

Sebastian Benz
Bramus

Dipublikasikan: 16 September 2026

Chrome 154 menambahkan dukungan untuk iframe berukuran responsif, sehingga <iframe> dapat menyesuaikan ukurannya berdasarkan ukuran intrinsik dokumen yang disematkannya. Hal ini sangat cocok untuk menyematkan widget komentar pihak ketiga dengan lancar, sematan media sosial dengan tinggi yang bervariasi, atau jenis sematan lainnya yang menggunakan <iframe>.

Browser Support

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

Source

Iframe berukuran responsif menggantikan pola umum saat developer mengukur konten iframe secara manual, mengirimkan dimensi dengan postMessage(), dan memperbarui ukuran iframe secara manual di halaman penyematan.

Rekaman ini menampilkan formulir komentar yang disematkan di halaman menggunakan iframe. Saat pengguna menambahkan komentar, tinggi iframe di dalam halaman penyematan akan diperbarui secara dinamis, sehingga menciptakan pengalaman visual yang lancar tanpa scrollbar.

Mengatur ukuran iframe agar sesuai dengan kontennya

Secara default, iframe memiliki area tampilan sendiri. Jika dokumen sematan lebih tinggi dari area pandang tersebut, pengguna mungkin mendapatkan scrollbar tambahan. Dengan ukuran iframe responsif, halaman penyematan dapat menggunakan ukuran berbasis konten:

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

Dokumen sematan harus mengizinkan:

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

Berikut contoh lengkapnya:

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

Dan di /comments.html:

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

Sekarang iframe dapat menggunakan tinggi konten dokumen yang disematkan, bukan berperilaku seperti area pandang dengan tinggi tetap.

Gunakan frame-sizing

Properti frame-sizing yang baru mengontrol dimensi mana yang berasal dari konten iframe.

Nilai yang didukung meliputi:

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

auto mempertahankan perilaku pengubahan ukuran iframe yang ada.

Untuk sebagian besar mode penulisan horizontal, content-height dan content-block-size adalah nilai yang paling berguna untuk memperluas sematan secara vertikal.

Anda juga dapat menggabungkan frame-sizing dengan batasan CSS lainnya:

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

Mengubah ukuran setelah konten dinamis berubah

Browser tidak terus-menerus mengamati setiap perubahan tata letak di dalam dokumen sematan.

Jika konten iframe berubah setelah tata letak awal, misalnya setelah memuat lebih banyak komentar atau meluaskan panel, dokumen yang disematkan dapat meminta penghitungan ukuran baru dengan window.requestResize().

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

Sebaiknya panggil window.requestResize() sebelum tata letak, setelah semua perubahan pada dokumen dilakukan. Model update eksplisit ini membantu menghindari loop pengubahan ukuran saat mengubah ukuran iframe akan mengubah viewport-nya, yang akan mengubah kontennya, yang akan mengubah ukurannya lagi.

Penyematan lintas origin

Penyesuaian ukuran responsif juga dapat digunakan dengan iframe lintas origin. Dokumen sematan dapat membatasi origin mana yang diizinkan:

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

Tindakan ini akan membatasi ukuran responsif hanya pada https://publisher.example. Beberapa origin dipisahkan dengan spasi: content="allow-origins=https://publisher1.example https://publisher2.example".

Untuk widget pihak ketiga, batasi akses ke origin yang membutuhkannya. Mekanisme ini melengkapi kontrol keamanan iframe yang ada seperti perintah frame-ancestors Kebijakan Keamanan Konten, yang mengontrol situs mana yang dapat menyematkan halaman.

{i>Progressive enhancement <i}

Anda dapat menggunakan kueri fitur untuk mempertahankan penggantian yang ada untuk browser yang tidak mendukung frame-sizing:

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

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

Jika dokumen yang disematkan diperbarui secara dinamis, Anda juga dapat mendeteksi fitur requestResize():

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

Oleh karena itu, kode pengubahan ukuran iframe yang ada dapat tetap digunakan sebagai penggantian sementara dukungan diperluas.

Coba

Coba pengubahan ukuran iframe responsif di demo berikut: