Авто-масштабирование высоты iframe без скроллбаров в HTML

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

Для динамической коррекции размеров вашего iframe используйте window.postMessage. На родительской странице устроите onload событие для приема сообщений о высоте. Внутри iframe передавайте сообщение с его текущей высотой обратно в родительское окно после каждой загрузки содержимого.

Шаблон родительской страницы:

<iframe src="content.html" id="iframe" onload="resizeIframe(this)" style="width:100%;"></iframe>
<script>
function resizeIframe(iframe) {
  window.addEventListener('message', (event) => {
    if (event.origin === "https://trustedsource.com") {
      iframe.style.height = event.data + 'px';
    }
  }, false);
}
</script>

Пример содержимого iframe (inner.html):

<script>
function sendHeight() {
  var height = document.documentElement.scrollHeight;
  parent.postMessage(height, "https://parentpage.com");
}
window.onload = sendHeight;
</script>

Замените https://trustedsource.com и https://parentpage.com на URL ваших доменов с учётом политики безопасности. Применение этого метода позволит вашим iframe идеально соответствовать высоте содержимого, как будто они сшиты по индивидуальному заказу.

Междоменное изменение размеров iframe

Управление размерами iframe, размещёнными на разных доменах, может оказаться сложной задачей из-за ограничений по безопасности. В таких случаях неоценимым помощником станет библиотека iframe-resizer, предлагающая элегантное и безопасное решение для манипуляций с размерами iframe.

Безопасное изменение размеров

Для безопасной корректировки размеров iframe применяйте атрибут sandbox с флагом allow-same-origin. Это пропускает iframe в его исходное окружение, делая его поведение аналогичным поведению родительской страницы, что facilitizes the resizing process страницы, облегчая процесс изменения размеров при сохранении безопасности.

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

Вообразите, что размеры окна (🖼️) идеально совпадают со размером картин с различными размерами(🎨):

Изначально: [🖼️ с 🎨]

Без полос прокрутки: Рамка изменяется под размер картин.

Изменение размера: [🖼️🔽🎨] ➡️ [🖼️🔼🎨]
# Рамка (🖼️) ПОДСТРАИВАЕТСЯ под размер изображения (🎨) – это просто замечательно!

Аналогично, iframe автоматически подстроится под высоту своего содержимого!

Управление изменениями в содержимом iframe

Управление динамическим содержимым

Если содержимое ваших iframe часто меняется – это как гиперактивность, использование стандартных обработчиков событий, таких как onload, может быть неэффективно. В таких случаях библиотека iframe-resizer особенно полезна, так как она автоматически корректирует высоту, реагируя на изменения в DOM.

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

Профессиональный совет – стратегия "нулевой высоты"

Применяйте этот простой трюк: перед вычислением новой высоты iframe, сначала установите текущую высоту в '0px'. Это обеспечит учёт только содержимого при вычислении высоты прокрутки, исключая дополнительное пространство от более объёмного предыдущего контента:

iframe.style.height = '0px';  
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';

Специфические требования браузеров

У каждого браузера есть свои особенности при работе с изменением размеров iframe, особенно при использовании сложных стилей и скриптов. Поэтому важно делать тестирование в различных браузерах, включая Safari, чтобы iframe всегда вёл себя корректно!

Поддержание порядка

Для визуальной привлекательности iframe, убедитесь, что убрали стандартные границы и полосы прокрутки, установив параметр frameborder на 0 и scrolling на auto. Такой уход за деталями важен для гармоничной интеграции iframe в родительскую страницу!

Ответственность "воспитанного" iframe

Следите за чистотой с внешними скриптами

Чтобы скрипты работали эффективно и при этом код оставался чистым, избегайте непосредственного включения JavaScript в HTML. Вместо этого используйте внешние скрипты и классы для управления размерами динамически изменяющихся iframe.

Если вы предпочитаете jQuery

Поклонникам jQuery стоит настроить высоту iframe с учетом его содержимого. Это подходит, если содержимое iframe находится на том же домене:

$('#iframe').on('load', function() {
  $(this).height($(this).contents().find("body").height());
});

Сделайте это отзывчивым

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

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

1. Fluid Width Video | CSS-Tricks
2. <iframe>: Встраиваемый элемент фрейма | MDN
3. Настройка ширины и высоты iframe – Stack Overflow
4. HTML iframe tag – W3Schools
5. Responsive iFrames with jQuery · GitHub
6. Встраиваемый контент в отзывчивом iframe — Smashing Magazine
7. GitHub – davidjbradshaw/iframe-resizer