Как авто-размер iFrame? [дубликат]


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






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



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

1990   12  

12 ответов:

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

Edit: осмотревшись, популярный консенсус устанавливает высоту внутри iframe, используя offsetHeight:

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

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

38  
2013-05-24 05:00:15

попробуй:

13  
2016-01-05 10:01:29

Я просто случайно зашел на ваш вопрос и у меня есть решение. Но его в jquery. Это слишком просто.

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

вот так!

Ура! :)

Edit: если у вас есть богатый текстовый редактор, основанный на методе iframe, а не метод div, и вы хотите, чтобы он расширял каждую новую строку, то этот код будет делать все необходимое.

10  
2010-06-03 18:28:28

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

во-первых, это работает на концепции, что если 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>
7  
2010-08-11 04:39:12

этой решение работали лучше для меня. Он использует jQuery и iframe ".событие Load.

2  
2009-03-26 20:45:07

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

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

в Netscape 6 (предполагая, что firefox также), свойство contentDocument:

iframe.height = iframe.contentDocument.scrollHeight
1  
2008-10-29 17:24:57

Я нашел решение @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) чтобы уменьшить нагрузку на процессор в моем случае
1  
2011-09-10 17:31:01

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


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

    function setHeight() {
        alert(document['body'].offsetHeight);   
    }
0  
2008-10-29 17:21:51

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

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


if ($.browser.msie == false) {
    var h = (document.getElementById("iframeID").contentDocument.body.offsetHeight);
} else {
    var h = (document.getElementById("iframeID").Document.body.scrollHeight);
}
0  
2008-10-29 20:12:21

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

Главная.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>

содержание.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>

Это, кажется, работает (до сих пор) во всех основных браузерах.

0  
2011-06-17 12:05:50

мой обходной путь-установить iframe высоту / ширину хорошо над любым ожидаемым размером исходной страницы в CSS & the background свойство transparent.

в iframe set allow-transparency до true и scrolling до no.

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

0  
2012-08-02 05:01:26

мое решение, (с помощью 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>
0  
2012-12-19 09:59:20

Comments

    Ничего не найдено.
Click here to cancel reply.