Выполнение iframe занимает вертикальное пространство

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, чтобы отключить прокрутки.

Редактировать: Ой, забыли объявить the_height.

Answer 2

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

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

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

Answer 3

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

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

см W3C DOCTYPE for examples

У меня были проблемы как с 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 4

Обойти не использовать и препроцессирования код на стороне сервера.

Answer 5

Также проверьте эту тему: How does the DiggBar dynamically resize its iframe's height based on content not on their domain?.

Он обращается к тому же вопросу.