Как сделать iframe с динамической высотой задаваемой внутренним содержимым самого фрейма?

Пользователь

от jaylen.trantow , в категории: JavaScript , месяц назад

Как сделать iframe с динамической высотой задаваемой внутренним содержимым самого фрейма?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от cooper.berge , месяц назад

@jaylen.trantow 

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


Вот пример кода, который демонстрирует этот подход:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<style>
    #myframe {
        width: 100%;
        border: none;
    }
</style>
<script>
    function resizeIframe(obj) {
        obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
    }
</script>
</head>
<body>

<iframe id="myframe" src="ссылка_на_страницу" onload="resizeIframe(this)"></iframe>

</body>
</html>


В этом примере мы создаем iframe с id "myframe" и задаем ему ширину 100% и без границ. Также у нас есть функция resizeIframe, которая вызывается при загрузке фрейма. В этой функции мы устанавливаем высоту фрейма равной высоте внутреннего содержимого фрейма, получаемой через scrollHeight.


Обратите внимание, что вместо "ссылка_на_страницу" в атрибуте src вы должны указать ссылку на вашу страницу, которую хотите отобразить в iframe.


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