Можно создать дубликат:
Resizing an iframe based on contentКак настроить размер iFrame?
Я нагружать Iframe и хочет родитель автоматически изменять высоту, основанную на высоту содержимого Iframe в.
Проще говоря, все страницы принадлежат одному домену, поэтому я не должен сталкиваться с проблемами межсайтового скриптинга.
На любом другом элементе я бы использовал scrollHeight объекта DOM и соответственно задал высоту. Я не знаю, будет ли это работать на iframe (потому что они немного запутаны во всем), но это, безусловно, стоит попробовать.
Edit: поглядев вокруг, популярный консенсус установки высоты внутри фрейма с помощью offsetHeight:
function setHeight() {
parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}
И присоединять, что для работы с onLoad событием в IFrame-тела.
Это не работает для меня. Чтобы быть понятным, следует установить значениеHight() в HTML-формате IFRAME? Но iframe-id является идентификатором iframe, как определено в главной странице html? – AP257 2010-10-01 19:50:25
Да, не совсем работает в IE либо ... это просто размеры до высоты браузера. – Entity 2011-06-23 00:17:35
Добавление смещения + 60 пикселей - неплохая идея, чтобы убедиться, что полоса прокрутки не видна (разные браузеры). – thomasvdb 2011-09-26 08:40:42
У Оли есть решение, которое будет работать для меня. Для записи страница внутри моего iFrame отображается javascript, поэтому мне нужно бесконечно малую задержку, прежде чем сообщать назад offsetHeight. Похоже, что-то вдоль этих линий:
$(document).ready(function(){
setTimeout(setHeight);
});
function setHeight() {
alert(document['body'].offsetHeight);
}
В IE 5.5+, вы можете использовать свойство contentWindow:
iframe.height = iframe.contentWindow.document.scrollHeight;
В Netscape 6 (при условии, Firefox, а), contentDocument собственности:
iframe.height = iframe.contentDocument.scrollHeight
На самом деле - код Патрика работал и на меня. Правильный способ сделать это было бы вдоль линий этого:
Примечание: есть немного JQuery вперед:
if ($.browser.msie == false) {
var h = (document.getElementById("iframeID").contentDocument.body.offsetHeight);
} else {
var h = (document.getElementById("iframeID").Document.body.scrollHeight);
}
solution Это работает лучше для меня. Он использует jQuery и событие «.load» iframe.
Я только что пришел к вашему вопросу, и у меня есть решение. Но это в jquery. Это слишком просто.
$('iframe').contents().find('body').css({"min-height": "100", "overflow" : "hidden"});
setInterval("$('iframe').height($('iframe').contents().find('body').height() + 20)", 1);
Там вы идете!
Cheers! :)
Редактировать: Если у вас есть редактор Rich Text, основанный на методе iframe, а не метод div, и хотите, чтобы он расширил каждую новую строку, тогда этот код сделает нужным.
Вот мертвое простое решение, которое работает в любом браузере и с перекрестными областями:
Во-первых, это работает на том, что если страница HTML, содержащая IFRAME устанавливается на высоте 100% и IFRAME стилируется с использованием css, чтобы иметь высоту 100%, тогда css автоматически будет сортировать все по размеру.
Вот код:
<head>
<style type="text/css">
html {height:100%}
body {
margin:0;
height:100%;
overflow:hidden
}
</style>
</head>
<body>
<iframe allowtransparency=true frameborder=0 id=rf sandbox="allow-same-origin allow-forms allow-scripts" scrolling=auto src="http://www.externaldomain.com/" style="width:100%;height:100%"></iframe>
</body>
Мой обходной путь, это установить IFrame высоту/ширину свыше любого предполагаемого размера исходного кода страницы в CSS & background собственности на transparent.
В фрейме allow-transparency до true и scrolling до no.
Единственное, что будет видно, это любой исходный файл, который вы используете. Он работает в IE8, Firefox 3, & Safari.
Это самый простой способ я нашел, используя прототип:
main.html:
<html>
<head>
<script src="prototype.js"></script>
<script>
function init() {
var iframe = $(document.getElementById("iframe"));
var iframe_content = $(iframe.contentWindow.document.getElementById("iframe_content"));
var cy = iframe_content.getDimensions().height;
iframe.style.height = cy + "px";
}
</script>
</head>
<body onload="init()">
<iframe src="./content.html" id="iframe" frameBorder="0" scroll="no"></iframe>
<br>
this is the next line
</body>
</html>
content.html:
<html>
<head>
<script src="prototype.js"></script>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="iframe_content" style="max-height:200px;">
Sub content<br>
Sub content<br>
...
...
...
</div>
</body>
</html>
Это похоже на работу (до сих пор) в все основные браузеры.
Я нашел решение @ShripadK самым полезным, но это не Работа, если есть более одного iframe. Мое исправление:
function autoResizeIFrame() {
$('iframe').height(
function() {
return $(this).contents().find('body').height() + 20;
}
)
}
$('iframe').contents().find('body').css(
{"min-height": "100", "overflow" : "hidden"});
setTimeout(autoResizeIFrame, 2000);
setTimeout(autoResizeIFrame, 10000);
$('iframe').height($('iframe').contents().find('body').height() + 20) бы установить высоту каждого кадр с тем же значением, а именно высоты содержимого первого кадра. Так что я использую jQuery height() с функцией вместо значения. Таким образом, вычисляются индивидуальные высоты + 20 - это взломать проблемы с прокруткой iframe. Номер должен быть больше размера полосы прокрутки. Возможно, взломать можно, возможно, , но отключив полосы прокрутки для iframe.setTimeout вместо setInterval(..., 1), чтобы уменьшить нагрузку на процессор в моем случаеМое решение, (с помощью JQuery):
<iframe id="Iframe1" class="tabFrame" width="100%" height="100%" scrolling="no" src="http://samedomain" frameborder="0" >
</iframe>
<script type="text/javascript">
$(function() {
$('.tabFrame').load(function() {
var iframeContentWindow = this.contentWindow;
var height = iframeContentWindow.$(document).height();
this.style.height = height + 'px';
});
});
</script>
вот лучшее решение - http://stackoverflow.com/questions/5867985/iframe-100-height – 2013-06-27 12:24:06
Более актуальный ответ, который дает ряд опций - http: // stackoverflow.com/questions/14334154/iframe-auto-adjust-height-as-content-changes – 2014-06-09 23:19:39