У меня есть веб-страница с 2 iFrames. Оба они имеют фиксированную ширину и высоту. Я загружаю внешние веб-сайты внутри них. Как изменить размер ширины внешних веб-сайтов в соответствии с iFrame (например, для мобильных браузеров, изменив окно просмотра)?
Изменение размера внешнего содержимого веб-сайта для соответствия ширине iFrame
Ответ 1
Что вы можете сделать, это установить определенную ширину и высоту для вашего iframe (например, они могут быть равны размерам вашего окна), а затем применить к нему масштабное преобразование. Значением масштаба будет соотношение между шириной окна и размером, которое вы хотите установить для вашего iframe.
например.
<iframe width="1024" height="768" src="http://www.bbc.com" style="-webkit-transform:scale(0.5);-moz-transform-scale(0.5);"></iframe>
Ответ 2
Совет для 1 веб-сайта, изменяющий размер. Но вы можете перейти на 2 веб-сайта.
Вот мой код для изменения размера iframe с помощью внешнего веб-сайта. Вам нужно вставить код в родительский (с кодом iframe) и на внешний веб-сайт, так что это не сработает с вами, у вас нет доступа к редактированию внешнего веб-сайта.
- local (iframe): просто вставьте фрагмент кода
- удаленная (внешняя) страница: вам нужен "body onload" и "div", который содержит все содержимое. И тело нужно стилизовать до "margin: 0"
Local:
<IFRAME STYLE="width:100%;height:1px" SRC="http://www.remote-site.com/" FRAMEBORDER="no" BORDER="0" SCROLLING="no" ID="estframe"></IFRAME>
<SCRIPT>
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent,function(e) {
if (e.data.substring(0,3)=='frm') document.getElementById('estframe').style.height = e.data.substring(3) + 'px';
},false);
</SCRIPT>
Вам нужен этот префикс "frm", чтобы избежать проблем с другими встроенными кодами, такими как плагины Twitter или Facebook. Если у вас есть простая страница, вы можете удалить префикс "if" и "frm" на обеих страницах (script и onload).
Пульт дистанционного управления:
Вам нужно jQuery для достижения "реальной" высоты страницы. Я не могу понять, как сделать это с использованием чистого JavaScript, так как у вас возникнет проблема при изменении размера высоты (выше на более низкую высоту) с помощью body.scrollHeight или связанного. По какой-то причине он всегда будет всегда иметь наибольшую высоту (предварительно увеличенный).
<BODY onload="parent.postMessage('frm'+$('#master').height(),'*')" STYLE="margin:0">
<SCRIPT SRC="path-to-jquery/jquery.min.js"></SCRIPT>
<DIV ID="master">
your content
</DIV>
Таким образом, родительская страница (iframe) имеет высоту по умолчанию 1px. script вставляет "ожидание сообщения/события" из iframe. Когда сообщение (почтовое сообщение) получено, а первые 3 символа - "frm" (чтобы избежать указанной проблемы), вы получите номер с 4-й позиции и установите высоту (стиль) iframe, включая блок "px".
Внешний сайт (загруженный в iframe) будет "отправлять сообщение" родительскому (открывающему) с "frm" и высотой главного div (в этом случае id "master" ). "*" В postmessage означает "любой источник".
Надеюсь, это поможет. Извините за мой английский.
Ответ 3
Внутри IFrame браузер автоматически отображает страницу веб-сайта так, как если бы она была на отдельной странице, она ведет себя так же, как если бы вы изменили размер браузера... веб-страница будет отображаться по мере ее разработки это жидкостная конструкция с фиксированными размерами или что-то еще... вы не можете заставить другое поведение рендеринга на сайте. Однако вы могли бы программно изменить разметку страницы.