Как растянуть iframe по содержимому?
"растянуть iframe" или "Как растянуть iframe по содержимому". Одна из проблем iframe, что окно не растягивается по содержимому!
Подробно о растягивании окна iframe
Растягиваем блок iframe по содержимому
Я только сегодня сделал страницу, где мы выключали прокрутку в iframe и там столкнулись с тем, что при скрытии прокрутки - невозможно увидеть содержимое, которое скрыто за краями iframe - поэтому нам нужно растянуть окно iframe по его содержимому!
Окно iframe не растягивается по содержимому
Как мы видим на ниже приведенном примере окно iframe не растягивается по содержимому, а просто добавляется прокрутка, которая означает, что содержание больше окна iframe !
Растягиваем iframe по содержимому живой ример
Для того, чтобы растянуть окно iframe по содержимому нам потребуется:
Нам нужна библиотека : подключить jquery
Функция, которая умеет растягивать iframe по содержимому:
function iframeAutoResize(iframe) {
$("#autoresize_iframe").height($(iframe).contents().find("html").height());
}
</script>
Добавляем в окно iframe : id, width, onload, + функция "iframeAutoResize" + this
Соберем весь iframe, который у нас получился:
Далее.. нам осталось посмотреть на живой пример растягиваемого окна iframe по содержимому!
Разместим выше приведенный код здесь и добавим на страницу функцию iframeAutoResize!
Пример работы скрипта растягивающего iframe по содержимому по вертикали
Второй пример окно iframe по содержимому
Привожу пример простой страницы с iframe, который будет растягиваться по содержимому!
Никаких скриптов, всё на чистом html + css!
Всё просто!
Добавляем на страницу в стилях css
И такое свойство добавляем в iframe
Страница пример с растягиваемым iframe по содержимому!
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример веб-страницы</title>
<style>html {height:100%}
body {
margin:0;
height:100%;
width: 600px;
margin: auto;
}
</style>
</head>
<body>
<h1>Растягиваем iframe</h1>
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-origin allow-forms allow-scripts" scrolling=no src="https://dwweb.ru/__a-data/__all_for_scripts/__examples/iframe/test_iframe_1.php" style="width:100%;height:100%"> </iframe>
</body>
</html>
Живой пример с растягиваемым iframe
Разместим данный пример с растягиваемым iframe по содержимому на отдельной странице:
Этим вы очень поможете проекту! Заранее огромное спасибо!
20.12.2025 18:30
