Задать вопрос
@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>
  • Вопрос задан
  • 1203 просмотра
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 FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Настроить интеграцию между Voximplant Kit и Dialogflow CX
06 нояб. 2024, в 03:35
5000 руб./за проект
Оптимизация ботов телеграм
06 нояб. 2024, в 00:20
1000 руб./за проект
Смарт-контракт на блокчейне TON
06 нояб. 2024, в 00:03
40000 руб./за проект
Ещё заказы