Как настроить размер iFrame?

Возможный дубликат:
Изменение размера iframe на основе контента

Я загружаю iFrame и хочу, чтобы родитель автоматически менял высоту в зависимости от высоты содержимого iFrame.

Для простых вещей все страницы принадлежат одному домену, поэтому я не должен сталкиваться с проблемами межсайтового скриптинга.

ОТВЕТЫ

Ответ 1

В любом другом элементе я бы использовал объект scrollHeight объекта DOM и соответственно задал высоту. Я не знаю, будет ли это работать на iframe (потому что они немного запутаны во всем), но это, безусловно, стоит попробовать.

Изменить: взглянув вокруг, популярный консенсус устанавливает высоту из iframe с помощью offsetHeight:

function setHeight() {
    parent.document.getElementById('the-iframe-id').style.height = document['body'].offsetHeight + 'px';
}

И присоедините это для запуска с событием iframe-body onLoad.

Ответ 3

Я только что пришел к твоему вопросу, и у меня есть решение. Но это в jquery. Это слишком просто.

$('iframe').contents().find('body').css({"min-height": "100", "overflow" : "hidden"});
setInterval( "$('iframe').height($('iframe').contents().find('body').height() + 20)", 1 );

Там вы идете!

Ура!:)

Изменить: Если у вас есть редактор Rich Text, основанный на методе iframe, а не на методе div, и вы хотите, чтобы он расширил каждую новую строку, этот код сделает нужным.

Ответ 4

Вот мертвое простое решение, которое работает в каждом браузере и с перекрестными доменами:

Во-первых, это работает над тем, что если 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>

Ответ 5

Это решение работало лучше всего для меня. Он использует jQuery и iframe событие ".load".

Ответ 6

В IE 5.5+ вы можете использовать свойство contentWindow:

iframe.height = iframe.contentWindow.document.scrollHeight;

В Netscape 6 (при условии, что firefox также), свойство contentDocument:

iframe.height = iframe.contentDocument.scrollHeight

Ответ 7

Я нашел решение @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) для уменьшения загрузки процессора в моем случае

Ответ 8

У Оли есть решение, которое будет работать для меня. Для записи страница внутри моего iFrame отображается javascript, поэтому мне нужно бесконечно малую задержку, прежде чем сообщать назад offsetHeight. Это похоже на что-то в этом роде:


    $(document).ready(function(){
        setTimeout(setHeight);
    });

    function setHeight() {
        alert(document['body'].offsetHeight);   
    }

Ответ 9

На самом деле - код Патрика тоже работал на меня. Правильный способ сделать это будет следующим образом:

Примечание: впереди немного jquery:


if ($.browser.msie == false) {
    var h = (document.getElementById("iframeID").contentDocument.body.offsetHeight);
} else {
    var h = (document.getElementById("iframeID").Document.body.scrollHeight);
}

Ответ 10

Мое обходное решение заключается в том, чтобы установить iframe высоту/ширину наилучшим образом по любому ожидаемому размеру исходной страницы в CSS и свойству background до transparent.

В iframe установите allow-transparency на true и scrolling на no.

Единственное, что видится, будет любым исходным файлом, который вы используете. Он работает в IE8, Firefox 3 и Safari.

Ответ 11

Это самый простой способ, который я нашел с помощью прототипа:

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>

Кажется, что это работает (пока) во всех основных браузерах.

Ответ 12

Мое решение, (используя 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>