Задать вопрос
@idmarishik
javascript

Как сделать чтобы iframe подстраивался под адаптивный html внутри него?

В html загружается iframe, нужно чтобы размер iframe подстраивался под размер содержимого в нем (Содержимое в нем - адаптивный код), нужно чтобы iframe так же был адаптивным. Подскажите пожалуйста как это сделать?
код https://jsfiddle.net/mk6g1rpx/

<!DOCTYPE html>
<html lang="ru">
<head>
	<title></title>
	<script src="jquery.min.js"></script>
	<script>
		 window.onload = function() {
			var scr_w = window.outerWidth;
			$('.box').innerWidth(scr_w);
		};

		window.addEventListener('resize', function() {
			var scr_w = window.outerWidth;
			$('.box').innerWidth(scr_w);
		});
	</script>
	
	<style>
		html,
		body {
			width: 100%;
			height: 100%;
		}
		body {
			margin: 0;
		}
		iframe {
			position: absolute;
			width: 100%;
			height: 100%;
			min-width: 0;
		}
		.box {
			position: relative;
			height: 900px;
		}

	</style>
	
</head>
<body>
	<div class="box">
		<iframe id="fileUploadIframe" src="http://www.galiy-web.ru" frameborder="no"></iframe>
	</div>
</body>
</html>
  • Вопрос задан
  • 916 просмотров
1 комментарий
Подписаться 3 Средний 1 комментарий
Решения вопроса 2
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега JavaScript
Руководитель frontend направления, предприниматель
А почему бы, собственно не пойти более легким путем, если уж содержимое адаптивное, то оно подстроится под размер фрейма, значит управляя его параметрами в родителе, ты управляешь конечным отображением внутри.

Не знаю, что там должно быть в итоге, но если это какой-нибудь проигрыватель по типу Яндекс.Музыки, то решение топчик)
Ответ написан
Комментировать
Комментировать
@alexalexes
iframe - самый древний у дубовый тег по части адаптивности.
Им можно управлять, задавая конкретные значения ширины и высоты, запрашивая состояние скроллбаров.
var iframe = document.getElementById('fileUploadIframe');
 iframe.width = iframe.contentWindow.document.body.scrollWidh + "px";
 iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";

Когда корректировать эти параметры? Нужно смотреть случаи, когда контент Iframe меняется и вешать выполнение этих строк на соответствующие обработчики событий.
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@b-a-l-v
Хороший человек
Посмотрите тут dbmast.ru/adaptivnoe-modalnoe-okno-strogo-po-centru
Пример 4, слелан с iframe внутри, содержимое подстраивается под размер окна.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Интеграция и обучение по API Яндекс Маркета
24 апр. 2024, в 17:52
20000 руб./за проект
Сайт с вебзвонками и чатами на react
24 апр. 2024, в 17:33
10000 руб./за проект
Правки в webApp готового и написанного телеграмм бота next, tailwind
24 апр. 2024, в 17:26
6000 руб./за проект
Ещё заказы