Мне нужно решение для автоматической регулировки ширины и высоты* iframe
, чтобы они едва помещались в его содержимое. Дело в том, что ширина и высота могут быть изменены после загрузки iframe
. Я предполагаю, что мне нужно действие события для обработки изменения размеров тела, содержащегося в iframe.
<script type="application/javascript">
function resizeIFrameToFitContent( iFrame ) {
iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iFrame = document.getElementById( 'iFrame1' );
resizeIFrameToFitContent( iFrame );
// or, to resize all iframes:
var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
resizeIFrameToFitContent( iframes[i] );
}
} );
</script>
<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>
Кроссбраузерность плагин jQuery.
Кросс-браузерная, кросс-доменная библиотека, которая использует mutationObserver
для поддержания размера iFrame в соответствии с содержимым и postMessage
для связи между iFrame и главной страницей. Работает как с jQuery, так и без него.
Все решения даны только после изменения размера. Вы упоминаете вы хотите быть в состоянии изменить размер iframe после содержания изменения. Для того чтобы сделать это, вам нужно, чтобы выполнить функцию в iframe (когда содержание меняется, нужно создать событие, чтобы сказать, что содержимое изменилось).
Я застрял с этим на некоторое время, так как код внутри iframe, казалось, ограничивается дом внутри iframe (и не мог'т изменение фрейма), а код, выполняемый вне кадра застрял с дом за пределами кадра (и не мог'т забрать предстоящем событии из iframe).
Решение пришло от Открытия (через помощь от коллеги), что jQuery может быть сказано, что дом использовать. В этом случае дом из родительского окна.
Как таковой, такой код, как это делает то, что вам нужно (при запуске внутри iframe) :
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#IDofControlFiringResizeEvent").click(function () {
var frame = $('#IDofiframeInMainWindow', window.parent.document);
var height = jQuery("#IDofContainerInsideiFrame").height();
frame.height(height + 15);
});
});
</script>
один-вкладыш решение для встраивания: начинается с Мин-размер и увеличение размера содержимого. нет необходимости в теги script.
в
<iframe src="http://URL_HERE.html" onload='javascript:(function(o){o.style.height=o.contentWindow.document.body.scrollHeight+"px";}(this));' style="height:200px;width:100%;border:none;overflow:hidden;"></iframe>
в
Если содержимое iframe с того же домена, это должно работать отлично. Она требует, хотя и jQuery.
$('#iframe_id').load(function () {
$(this).height($(this).contents().height());
$(this).width($(this).contents().width());
});
Чтобы динамически изменить размер, вы могли бы сделать это:
<script language="javaScript">
<!--
function autoResize(){
$('#themeframe').height($('#themeframe').contents().height());
}
//-->
</script>
<iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>
Затем на странице, которая загружает iframe добавить это:
<script language="javaScript">
function resize()
{
window.parent.autoResize();
}
$(window).on('resize', resize);
</script>
Вот кроссбраузерное решение, если вы не хотите использовать jQuery:
/**
* Resizes the given iFrame width so it fits its content
* @param e The iframe to resize
*/
function resizeIframeWidth(e){
// Set width of iframe according to its content
if (e.Document && e.Document.body.scrollWidth) //ie5+ syntax
e.width = e.contentWindow.document.body.scrollWidth;
else if (e.contentDocument && e.contentDocument.body.scrollWidth) //ns6+ & opera syntax
e.width = e.contentDocument.body.scrollWidth + 35;
else (e.contentDocument && e.contentDocument.body.offsetWidth) //standards compliant syntax – ie8
e.width = e.contentDocument.body.offsetWidth + 35;
}
Я использую этот код, чтобы autoadjust высоте все фреймы (с автовысоты класс) при нагрузках на странице. Испытания и работает в IE, ФФ, хром, сафари и опера.
function doIframe() {
var $iframes = $("iframe.autoHeight");
$iframes.each(function() {
var iframe = this;
$(iframe).load(function() {
setHeight(iframe);
});
});
}
function setHeight(e) {
e.height = e.contentWindow.document.body.scrollHeight + 35;
}
$(window).load(function() {
doIframe();
});
После того, как я перепробовала все на земле, это действительно работает для меня.
index.html
<style type="text/css">
html, body{
width:100%;
height:100%;
overflow:hidden;
margin:0px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
$(iframe).height($(iframe).contents().find('html').height());
}
</script>
<iframe src="http://iframe.domain.com" width="100%" height="100%" marginheight="0" frameborder="0" border="0" scrolling="auto" onload="autoResize(this);"></iframe>
Это твердое решение
function resizer(id)
{
var doc=document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;
var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );
document.getElementById(id).style.height=height;
document.getElementById(id).style.width=width;
}
HTML-код
<IFRAME SRC="blah.php" id="iframe1" onLoad="resizer('iframe1');"></iframe>
Если вы можете контролировать как содержание и родительское окно окно iframe, то вам нужно iframe в приложение.
Эта библиотека обеспечивает автоматическое изменение высоты и ширины, так же и крест домена фреймы, чтобы соответствовать их содержимое. Он предоставляет широкий спектр возможностей для решения наиболее распространенных проблем, с использованием окна iframe, они включают:
Я слегка измененный Garnaph'ы большой выше решение. Казалось, что его решение изменил размер окна iframe на основе размера непосредственно перед мероприятием. Для моей ситуации (отправка электронной почты через ифрейм) мне нужен iframe в высоту, чтобы изменить сразу после подачи. Например показать ошибки проверки или "Спасибо" и сообщение после отправки.
Я просто исключены вложенную функцию click() и положить его в моей iframe в HTML-код:
<script type="text/javascript">
jQuery(document).ready(function () {
var frame = $('#IDofiframeInMainWindow', window.parent.document);
var height = jQuery("#IDofContainerInsideiFrame").height();
frame.height(height + 15);
});
</script>
Работал для меня, но не уверен насчет кросс-функциональность браузера.
Вот несколько методов:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>
И ЕЩЕ ОДНА АЛЬТЕРНАТИВА
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>
СКРЫВАТЬ СКРОЛЛИНГ С 2 АЛЬТЕРНАТИВЫ, КАК ПОКАЗАНО ВЫШЕ
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>
РУБИТЬ С ВТОРОЙ КОД
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>
Чтобы скрыть скролл-баров в окне iframe, родитель и"переполнение:скрытый", чтобы скрыть полосы прокрутки и элемент iframe сделал, чтобы пройти до 150% ширина и высота, которая заставляет скролл-баров за пределами страницы, а поскольку тело не'т иметь скролл-бары никто не может ожидать, что элемент iframe, чтобы быть выходящие за рамки страницы. Это скрывает полосы прокрутки в iframe по полной ширины!
источник: набор iframe в авто высота
все не могут работать, используя вышеперечисленные способы.
на JavaScript:
function resizer(id) {
var doc = document.getElementById(id).contentWindow.document;
var body_ = doc.body, html_ = doc.documentElement;
var height = Math.max(body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight);
var width = Math.max(body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth);
document.getElementById(id).style.height = height;
document.getElementById(id).style.width = width;
}
HTML-код:
<div style="background-color:#b6ff00;min-height:768px;line-height:inherit;height:inherit;margin:0px;padding:0px;overflow:visible" id="mainDiv" >
<input id="txtHeight"/>height <input id="txtWidth"/>width
<iframe src="head.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" style="width:100%; height: 47px" frameborder="0" ></iframe>
<iframe src="left.aspx" name="leftFrame" scrolling="yes" id="Iframe1" title="leftFrame" onload="resizer('Iframe1');" style="top:0px;left:0px;right:0px;bottom:0px;width: 30%; border:none;border-spacing:0px; justify-content:space-around;" ></iframe>
<iframe src="index.aspx" name="mainFrame" id="Iframe2" title="mainFrame" scrolling="yes" marginheight="0" frameborder="0" style="width: 65%; height:100%; overflow:visible;overflow-x:visible;overflow-y:visible; " onload="resizer('Iframe2');" ></iframe>
</div>
Пер: т. е. 10, ОС Windows 7 х64
Я придумал другое решение после некоторых экспериментов. Изначально я попробовал код, помеченный как 'лучший ответ' на этот вопрос и он не'т работу. Я думаю, потому что мой iframe в моей программе на тот момент был динамически сгенерирован. Вот код, который я использовал (он работал для меня):
JavaScript внутри iframe, в котором загружается:
window.onload = function()
{
parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
};
Это надо добавить 4 или более пикселей в высоту, чтобы удалить полосы прокрутки (какая-то странная ошибка/действие фреймы). Ширина даже незнакомец, вы в безопасности, чтобы добавить 18px к ширине тела. Также убедитесь, что у вас есть CSS для элемента iframe тела применяется (ниже).
html, body {
margin:0;
padding:0;
display:table;
}
iframe {
border:0;
padding:0;
margin:0;
}
Вот HTML-код для iframe:
<iframe id="fileUploadIframe" src="php/upload/singleUpload.html"></iframe>
Вот код, в моем окне iframe:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>File Upload</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
display:table;
}
</style>
<script type="text/javascript">
window.onload = function()
{
parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
};
</script>
</head>
<body>
This is a test.<br>
testing
</body>
</html>
Я делала тестирование в Chrome и немного в Firefox (в Windows ХР). У меня есть еще испытания, так что пожалуйста, скажите мне, как это работает для вас.
Это как я бы сделал это (проверено в FF/хром):
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function autoResize(iframe) {
$(iframe).height($(iframe).contents().find('html').height());
}
</script>
<iframe src="page.html" width="100%" height="100" marginheight="0" frameborder="0" onload="autoResize(this);"></iframe>
Я нашел это приложение, чтобы работать лучше:
function resizer(id)
{
var doc = document.getElementById(id).contentWindow.document;
var body_ = doc.body;
var html_ = doc.documentElement;
var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
var width = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );
document.getElementById(id).height = height;
document.getElementById(id).width = width;
}
Обратите внимание на стиль объекта удаляется.
В случае, если кто-то здесь: У меня была проблема с решениями когда я снял ДИВС из кадра - кадра не меньше.
Есть плагин jQuery, который делает работу:
http://www.jqueryscript.net/layout/jQuery-Plugin-For-Auto-Resizing-iFrame-iFrame-Resizer.html
В jQuery, это самый лучший вариант для меня, что действительно поможет мне!! Я жду, чтобы помочь вам!
ифрейме
<iframe src="" frameborder="0" id="iframe" width="100%"></iframe>
в jQuery
<script>
var valueSize = $( "#iframe" ).offset();
var totalsize = (valueSize.top * 2) + valueSize.left;
$( "#iframe" ).height(totalsize);
</script>
Javascript должен быть помещен в заголовке:
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
Здесь идет код iframe в HTML:
<iframe class="spec_iframe" seamless="seamless" frameborder="0" scrolling="no" id="iframe" onload="javascript:resizeIframe(this);" src="somepage.php" style="height: 1726px;"></iframe>
Стиля
.spec_iframe {
width: 100%;
overflow: hidden;
}
Я должен был сделать это сам в контексте веб-расширение. Этот веб-расширение вводит некоторые части пользовательского интерфейса на каждой странице, и этот интерфейс живет внутри себя элемент iframe. Содержание в окне iframe-это динамический, так что мне пришлось скорректировать ширину и высоту самого
элемент iframe`.
Я использую реагировать но концепция применяется к каждой библиотеке.
В окне iframe, я изменил тело
стили имеют очень большие размеры. Это позволит элементам внутри выложить, используя все необходимое пространство. Оформление ширина
и высота
100% я't работа для меня (я думаю, потому что элемент iframe по умолчанию ширина = 300 пикселей
и высота = 150 пикселей
)
/* something like this */
body {
width: 99999px;
height: 99999px;
}
Затем я ввел все пользовательского интерфейса iframe внутри div и дал ему некоторые стили
#ui-root {
display: 'inline-block';
}
После перевода моего приложения внутри этого интерфейса-корень #(в *реагировать* я componentDidMount внутри``) я вычислить размеры этот div как и синхронизировать их с родительской страницы через окно.метод postMessage
:
let elRect = el.getBoundingClientRect()
window.parent.postMessage({
type: 'resize-iframe',
payload: {
width: elRect.width,
height: elRect.height
}
}, '*')
В Родительском фрейме я делаю что-то вроде этого:
window.addEventListener('message', (ev) => {
if(ev.data.type && ev.data.type === 'resize-iframe') {
iframe.style.width = ev.data.payload.width + 'px'
iframe.style.height = ev.data.payload.height + 'px'
}
}, false)