Fazendo um iframe ocupar espaço vertical

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

  •  09-06-2019
  •  | 
  •  

Pergunta

Eu gostaria de ter um iframe ocupa tanto espaço vertical quanto necessário para exibir seu conteúdo e não exibir uma barra de rolagem.É de todo possível?

Existem soluções alternativas?

Foi útil?

Solução

Isto deve definir o IFRAME altura à altura do seu conteúdo:

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

Você pode querer adicionar scrolling="no" para o seu IFRAME para desligar as barras de rolagem.

editar: Ops, esqueci de declarar the_height.

Outras dicas

A solução alternativa é não usar <iframe> e pré-processar o código no lado do servidor.

Este snippet CSS deve remover a barra de rolagem vertical:

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

Ainda não tenho certeza se ele ocupará tanto espaço vertical quanto necessário, mas vou ver se não consigo descobrir.

Adicionando um DOCTYPE declaração ao IFRAME documento de origem ajudará a calcular o valor correto da linha

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

ver W3C DOCTYPE para exemplos

Eu estava tendo problemas com o IE e o FF, pois ele estava renderizando o iframe documento no modo 'peculiaridades', até que adicionei o DOCTYPE.

Suporte FF/IE/Chrome:O .scrollHeight não funciona com o Chrome, então criei um exemplo de javascript usando jQuery para definir tudo IFRAME alturas em uma página com base no conteúdo dos iframes.OBSERVAÇÃO:Isto é para páginas de referência dentro do seu domínio atual.

<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>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top