Наконец-то человеческие iframes: Chrome 154 получает поддержку frame-sizing
Нативное изменение размеров iframe через frame-sizing, метатеги и window.requestResize() в Chrome 154.
Помните этот вечный костыль при работе с <iframe> — когда подгружаешь сторонний блок, а у него появляется дурацкий внутренний скроллбар?
И началось: вешаем слушатели, пишем postMessage() из встроенного документа в родительский, замеряем высоты через JS и вручную меняем стили контейнера… Забудьте! В Chrome 154 появилась нативная поддержка Responsive Iframes 🚀
Как это работает?
Теперь размер <iframe> может автоматически подстраиваться под контент внутри него.
На стороне родительского сайта:
Задаём новое CSS-свойство frame-sizing:
.embed-iframe {
width: 100%;
frame-sizing: content-height;
}На стороне встроенной страницы: Внедряемый документ должен явно разрешить изменять свой размер с помощью метатега:
<meta name="iframe-sizing" content="allow-origins=*" />
<!—- или —->
<meta name="responsive-embedded-sizing" content="allow-origins=https://example.com" />Динамический контент
Браузер не отслеживает каждое изменение DOM внутри фрейма постоянно (чтобы не было просадок по производительности). Поэтому если у вас внутри фрейма, например, разворачивается аккордеон или подгружаются новые комментарии, встроенная страница может вызвать:
window.requestResize();И родительский фрейм мгновенно пересчитает высоту!
Пара нюансов
- Не забудьте про Cumulative Layout Shift: если фрейм находится в первом экране, динамическое изменение высоты может сдвинуть контент и испортить метрики Core Web Vitals.
- Так как фича пока свежая, её легко прогрессивно улучшать через
@supports (frame-sizing: content-height)и фолбэчить на старый добрый JS.