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

StackOverflow https://stackoverflow.com/questions/34655

  •  09-06-2019
  •  | 
  •  

Вопрос

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

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

Это было полезно?

Решение

Это должно установить высоту 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" к своему the_height, чтобы отключить полосы прокрутки.

edit: Ой, забыли объявить <=>.

Другие советы

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

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

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

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

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

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

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

У меня были проблемы как с IE, так и с FF, поскольку он рендерил документ iframe в режиме «причуд», пока я не добавил <=>.

Поддержка FF / IE / Chrome: .scrollHeight не работает с Chrome, поэтому я создал пример javascript с использованием jQuery для установки всех значений высоты <=> на странице на основе содержимого 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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top