Вытягиваем iframe по высоте

Вытягиваем iframe по высоте

Уроки

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

Дабы не изобретать велосипед, я вышел в интернет и задал этот самый вопрос. Однако, рабочего варианта найти не смог (или не сумел). Были ещё варианты, но они были опубликованы ещё до исторического материализма, когда форумы были ламповыми, а версии браузеров содержали всего одну цифру.

Поэтому будем делать свою версию, на ванильном JS и современных свойствах CSS.

Сначала зайдем с простого — используем силу CSS и напишем всего одну (на самом деле три, но для пользователей Autofixer’a таки одна):

iframe {
    height: fill-available;
    height: -webkit-fill-available;
    height: -moz-available;
}

Свойство fill-available очень помогает в этом плане, поскольку позволяет очень легко установить высоту для элемента. Однако, там есть пара нюансов (на момент написания статьи):

  • нормально поддерживается только в Chromium’ных браузерах и Opera (от 15 версии), а вот IE, Edge и Opera Mini его не поддерживают полностью;
  • Firefox и Safari поддерживают это свойство не полностью, например Firefox как раз не может применять это свойство для height (а также min-height и max-height), только для ширины.

Ну и по мелочи всякие штуки, связанные с флексами и гридами. В общем, рекомендую ознакомиться.

Здесь мы беремся за js. Код здесь также не очень сложный:

function fixIframe() {
    let iframes = document.getElementsByTagName('iframe');
    for (let i = 0; i < iframes.length; i++) {
        let iframe = document.getElementsByTagName('iframe')[i];        
        iframe.height = iframe.contentWindow.parent.innerHeight;
    }
}
window.onload = fixIframe();

Давайте разберёмся, что происходит. Для начала мы возьмём и найдём все iframe, которые находятся на странице. Затем, у каждого элемента мы вычленим размер контента — это iframe.contentWindow.parent.innerHeight. После чего мы вставляем в свойство height этого iframe это значение (оно в пикселах).

В данном случае получилась универсальная функция, которая вытянет нам все iframe.

Анатолий Куликов

Анатолий Куликов

Автор блога, дизайнер, веб-разработчик
  • at sign
  • vk logo