Как ресайзить iframe в зависимости от контента: решение

Быстрый ответ

let iframe = document.getElementById('your-iframe-id'); // Найдем наш iframe

iframe.onload = function() {   // При загрузке контента
    iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px'; // Подгоним высоту под содержимое
};

В данном примере к событию onload присоединена функция, которая подгоняет высоту iframe под высоту его содержимого. Так обеспечивается корректное отображение всех элементов, и исключается наличие лишнего пространства.

Подготовка к изменению размеров iframe

Взаимодействие с iframe при помощи postMessage

Если iframe расположен на чужом домене, прямой доступ к его DOM заблокирован соображениями безопасности. Однако мы можем взаимодействовать с ним через JavaScript и метод postMessage(), позволяющий обмениваться сообщениями между документами безопасным образом.

// Родительская страница отправляет сообщение в iframe
let iframeWin = document.getElementById('your-iframe').contentWindow;
iframeWin.postMessage('adjustHeight', 'https://iframed.domain.com');

// Обработка полученного сообщения в iframe
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://parent.domain.com') return; // Проверяем, откуда поступило сообщение
    if (event.data === 'adjustHeight') {
        parent.postMessage({
            'frameHeight': document.body.scrollHeight // Отправляем обратно высоту содержимого
        }, event.origin);
    }
});

Подробнее об этом расскажет наш спикер на видео

Отслеживание динамических изменений

Динамические изменения размеров iframe в реальном времени можно отслеживать и корректировать с помощью MutationObserver.

Учет кэширования при изменении размеров

Чтобы минимизировать возможные проблемы, связанные с кэшированием старой версии контента браузером, используйте методики кэшбастинга. Добавьте уникальные параметры к URL iframe.

Плавное изменение размеров

Установите для iframe ширину 100% и исходную высоту таким образом, чтобы он мог корректно подстроить свой размер под содержимое.

Лучшие практики управления размером iframe

Согласование динамического изменения размеров

Важно обеспечить перед изменением размеров корректное срабатывание события onload iframe. При работе с содержимым из других доменов используйте вспомогательные страницы, чтобы гарантировать согласованность изменений размеров контейнера и содержимого.

Управление переполнением

Если содержимое iframe может выходить за его границы, начните с большего начального размера или включите полосы прокрутки.

Адаптация к специфическим случаям

Настройку изменения размеров подходите индивидуально, учитывая, принадлежит ли iframe тому же домену, что и родительская страница, и как часто меняется содержимое.

Визуализация

Можно представить iframe как окно с шторами, где шторы подстраиваются под действия человека в комнате.

Когда человек стоит: 🏠 [🚶‍♂️🍃] – Шторы полностью закрыты.
При сидении человека: 🏠 [🧍‍♂️🍃] – Шторы подняты выше.

iframeElement.style.height = iframeContent.scrollHeight + 'px';

Как и шторы, iframe адаптируется к изменениям содержимого.

Подробное руководство по изменению размеров

Настройка эффективного взаимодействия между доменами

Реализуйте обмен сообщениями и контроль за безопасностью взаимодействия между родительской страницей и iframe, находящимся на чужом домене.

Работа с динамично изменяющимся содержимым

MutationObserver позволяет корректно изменять размер iframe, оперативно реагируя на любые изменения в динамическом содержимом.

Фокусировка на быстродействии и безопасности

По возможности, выбирайте простые и надежные решения, соответствующие стандартам безопасности веба. Избегайте использования рисковых подходов, таких как сложная обработка внешнего JavaScript.

Полезные материалы