Elastyczne elementy iframe w Chrome 154

Sebastian Benz
Bramus

Opublikowano: 16 września 2026 r.

Chrome 154 dodaje obsługę iframe’ów o elastycznych rozmiarach, dzięki czemu element <iframe> może dostosowywać swój rozmiar do rozmiaru wewnętrznego osadzonego dokumentu. Jest to idealne rozwiązanie do bezproblemowego umieszczania widżetów komentarzy innych firm, osadzonych treści z mediów społecznościowych o różnej wysokości lub innych osadzonych treści, które korzystają z elementu <iframe>.

Browser Support

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

Source

Elementy iframe o rozmiarach dostosowywanych do urządzenia zastępują powszechny wzorzec, w którym deweloperzy ręcznie mierzą zawartość elementu iframe, wysyłają wymiary za pomocą postMessage() i ręcznie aktualizują rozmiar elementu iframe na stronie osadzania.

Nagranie przedstawia formularz komentarzy umieszczony na stronie za pomocą elementu iframe. Gdy użytkownik doda komentarz, wysokość elementu iframe na stronie osadzania zostanie dynamicznie zaktualizowana, co zapewni płynne wrażenia wizualne bez pasków przewijania.

Dopasowywanie rozmiaru elementu iframe do jego zawartości

Domyślnie element iframe ma własny obszar wyświetlania. Jeśli osadzony dokument jest wyższy niż ten obszar, użytkownicy mogą zobaczyć dodatkowy pasek przewijania. Dzięki elastycznemu rozmiarowi elementu iframe strona umieszczająca może zamiast tego używać rozmiaru opartego na treści:

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

Osadzony dokument musi wyrazić zgodę:

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

Oto pełny przykład:

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

W /comments.html:

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

Element iframe może teraz używać wysokości treści dokumentu osadzonego zamiast zachowywać się jak obszar widoczny o stałej wysokości.

Otwórz frame-sizing

Nowa właściwość frame-sizing określa, który wymiar jest wyodrębniany z treści elementu iframe.

Obsługiwane wartości to:

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

auto zachowuje dotychczasowe działanie w zakresie rozmiaru elementu iframe.

W przypadku większości poziomych trybów pisania wartości content-height i content-block-size są najbardziej przydatne w przypadku osadzonych elementów rozwijanych w pionie.

Możesz też połączyć frame-sizing z innymi ograniczeniami dotyczącymi usług porównywania cen:

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

Zmiana rozmiaru po zmianach w zawartości dynamicznej

Przeglądarka nie obserwuje ciągle każdej zmiany układu w dokumencie osadzonym.

Jeśli po początkowym układzie zmieni się zawartość elementu iframe, np. po wczytaniu większej liczby komentarzy lub rozwinięciu panelu, osadzony dokument może poprosić o ponowne obliczenie rozmiaru za pomocą funkcji window.requestResize().

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

Najlepiej wywołać funkcję window.requestResize() przed układem, po wprowadzeniu wszystkich zmian w dokumencie. Ten model aktualizacji pomaga uniknąć pętli zmiany rozmiaru, w których zmiana rozmiaru elementu iframe powoduje zmianę widocznego obszaru, co z kolei zmienia zawartość, a następnie ponownie rozmiar.

Umieszczanie zasobów współdzielonych

Elastyczne określanie rozmiaru można też stosować w przypadku elementów iframe ze współdzieleniem. Osadzony dokument może ograniczać dozwolone punkty początkowe:

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

Ograniczy to rozmiar elastyczny tylko do https://publisher.example. Poszczególne źródła są rozdzielone spacją: content="allow-origins=https://publisher1.example https://publisher2.example".

W przypadku widżetów innych firm ogranicz dostęp do źródeł, które go potrzebują. Ten mechanizm uzupełnia dotychczasowe mechanizmy kontroli bezpieczeństwa ramki iframe, takie jak dyrektywa frame-ancestors w zasadach bezpieczeństwa treści, która określa, które witryny mogą umieszczać stronę.

Progresywne ulepszanie

Możesz użyć zapytań o funkcje, aby zachować istniejące rozwiązanie awaryjne dla przeglądarek, które nie obsługują frame-sizing:

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

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

Jeśli umieszczony dokument jest aktualizowany dynamicznie, możesz też wykrywać funkcje requestResize():

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

Dzięki temu dotychczasowy kod rozmiaru elementu iframe może pozostać jako rezerwa, dopóki nie rozszerzymy obsługi.

Wypróbuj

Wypróbuj responsywne określanie rozmiaru elementu iframe w tej wersji demonstracyjnej: