
Вытягиваем 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.