Настройка размеров iframe

Featherlight — лёгкая jQuery-библиотека для создания модальных окон (lightbox), часто используемая для отображения изображений, HTML-контента и iframe. При работе с iframe ключевым моментом становится корректная настройка размеров, так как содержимое iframe не всегда известно заранее и может динамически изменяться.

При открытии iframe Featherlight создаёт контейнер .featherlight-content, внутрь которого помещается элемент <iframe>. Размеры модального окна напрямую зависят от размеров этого контейнера и CSS-ограничений, применённых к нему и к самому iframe.

По умолчанию Featherlight:

  • не подстраивает высоту iframe под его содержимое;
  • ограничивает максимальные размеры окна размерами viewport;
  • использует CSS-правила, а не вычисления содержимого iframe.

Это означает, что управление размерами происходит на уровне конфигурации и стилей.

Базовое подключение iframe

Для открытия iframe используется тип iframe:

<a href="https://example.com" data-featherlight="iframe">Открыть</a>

Featherlight автоматически создаёт iframe с атрибутами:

<iframe class="featherlight-iframe" frameborder="0" allowfullscreen></iframe>

Размеры iframe на этом этапе определяются CSS.

Управление размерами через CSS

Размеры iframe

Основной способ задания размеров — переопределение стилей класса .featherlight-iframe:

.featherlight-iframe {
    width: 800px;
    height: 600px;
}

Если задать размеры только iframe, контейнер автоматически подстроится под него.

Ограничение максимальных размеров

Featherlight по умолчанию применяет ограничения к .featherlight-content:

.featherlight-content {
    max-width: 100%;
    max-height: 100%;
}

Для более строгого контроля:

.featherlight-content {
    max-width: 90vw;
    max-height: 90vh;
}

Использование vw и vh позволяет адаптировать модальное окно под размер экрана.

Настройка размеров через JavaScript

Featherlight позволяет передавать параметры при инициализации.

Использование атрибутов data-featherlight-iframe-width и height

<a
  href="https://example.com"
  data-featherlight="iframe"
  data-featherlight-iframe-width="900"
  data-featherlight-iframe-height="500">
  Открыть
</a>

Значения интерпретируются как пиксели. Это самый простой способ задать размеры без CSS.

Инициализация через JavaScript

$.featherlight({
    iframe: 'https://example.com',
    iframeWidth: 800,
    iframeHeight: 600
});

В этом случае Featherlight напрямую применяет размеры к iframe.

Адаптивные размеры iframe

Фиксированные размеры редко подходят для реальных проектов. Более универсальный подход — использование относительных значений.

Через CSS

.featherlight-iframe {
    width: 80vw;
    height: 80vh;
}

Такой iframe всегда будет занимать 80% ширины и высоты окна браузера.

С сохранением пропорций

.featherlight-content {
    width: 80vw;
    max-width: 1000px;
}

.featherlight-iframe {
    width: 100%;
    height: 56.25vw;
    max-height: 80vh;
}

Подход полезен для видео или страниц с фиксированным соотношением сторон.

Автоматическая подстройка под содержимое iframe

Featherlight не умеет автоматически вычислять высоту iframe по его содержимому из-за ограничений безопасности браузера (Same Origin Policy). Однако при загрузке страницы с того же домена возможна ручная синхронизация.

Пример для одного домена

Внутри iframe:

window.parent.postMessage({
    type: 'resize',
    height: document.body.scrollHeight
}, '*');

Снаружи, в основном документе:

window.addEventListener('message', function (event) {
    if (event.data.type === 'resize') {
        $('.featherlight-iframe').height(event.data.height);
    }
});

Этот способ применим только при контроле обеих сторон.

Влияние скролла на размеры

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

.featherlight-content {
    overflow: hidden;
}

.featherlight-iframe {
    overflow: auto;
}

Либо наоборот, если требуется прокрутка всего модального окна:

.featherlight-content {
    overflow-y: auto;
}

Учет мобильных устройств

На мобильных экранах важно учитывать адресную строку и виртуальную клавиатуру.

Рекомендуемая конфигурация:

.featherlight-iframe {
    width: 100vw;
    height: 100vh;
}

И дополнительное ограничение:

.featherlight-content {
    margin: 0;
    max-height: 100vh;
}

Это позволяет использовать Featherlight как полноэкранный контейнер.

Работа с динамическим изменением размеров

При изменении размеров окна браузера Featherlight не пересчитывает размеры iframe автоматически, если они заданы в пикселях. Для адаптивности используются относительные единицы или обработчик resize:

$(window).on('resize', function () {
    $('.featherlight-iframe').css({
        width: $(window).width() * 0.8,
        height: $(window).height() * 0.8
    });
});

Частые ошибки при настройке размеров

Жёсткое задание размеров без учета viewport Приводит к выходу окна за границы экрана.

Попытка читать размеры iframe с другого домена Заканчивается ошибками безопасности.

Игнорирование CSS .featherlight-content Даже при правильных размерах iframe контейнер может обрезать содержимое.

Использование height: auto для iframe Не работает, так как iframe не умеет автоматически подстраивать высоту.

Итоговая схема управления размерами

  • размеры задаются либо через параметры Featherlight, либо через CSS;
  • контейнер .featherlight-content всегда участвует в расчётах;
  • для адаптивности используются vw, vh и max-*;
  • автоматическая подстройка возможна только при доступе к содержимому iframe;
  • корректная работа достигается комбинацией JavaScript и CSS, а не одним механизмом.
Оглавление