Создание фрейма занимает вертикальное пространство

Question

Я бы хотел, чтобы iframe занимал столько вертикального пространства, сколько нужно для отображения его содержимого, а не для отображения полосы прокрутки. Это вообще возможно?

Есть ли обходные пути?

Answer 1

Это должно установить высоту IFRAME в высоту его содержимого:

<script type="text/javascript">
the_height = document.getElementById('the_iframe').contentWindow.document.body.scrollHeight;
document.getElementById('the_iframe').height = the_height;
</script>

Вы можете добавить scrolling="no" к IFRAME, чтобы отключить полосы прокрутки.

edit: Упс, забыл объявить the_height.

Answer 2

Также ознакомьтесь с этой веткой: Как DiggBar динамически изменяет высоту своего iframe на основе содержимого, не принадлежащего их домену? .

Это касается того же вопроса.

Answer 3

Обходной путь не должен использовать <iframe> и код предварительной обработки на стороне сервера.

Answer 4

Добавление объявления DOCTYPE к исходному документу IFRAME поможет вычислить правильное значение из строки

document.getElementById('the_iframe').contentWindow.document.body.scrollHeight

см. W3C DOCTYPE для примеров

У меня были проблемы с IE и FF, так как он рендерил документ iframe в режиме 'quirks', пока я не добавил DOCTYPE.

Поддержка FF / IE / Chrome: .scrollHeight не работает с Chrome, поэтому я создал пример javascript с использованием jQuery для установки всех высот IFRAME на странице на основе содержимого iframes. ПРИМЕЧАНИЕ. Это для справочных страниц вашего текущего домена.

<script type="text/javascript">
    $(document).ready(function(){
        $('iframe').each(function(){
            var context = $(this);
            context.load(function(event){ // attach the onload event to the iframe  
                var body = $(this.contentWindow.document).find('body');
                if (body.length > 0 && $(body).find('*').length > 0) { // check if iframe has contents
                    context.height($(body.get(0)).height() + 20);
                } else {
                    context.hide(); // hide iframes with no contents
                }
            });
        });
    });
</script>

Answer 5

Этот фрагмент CSS должен удалить вертикальную полосу прокрутки:

body {
  overflow-x: hidden;
  overflow-y: hidden;
} 

Я пока не уверен, что он займет столько вертикального пространства, сколько ему нужно, но я посмотрю, не смогу ли я понять это.