Tenho uma página que tem um iframe e quero que ocupe o espaço máximo disponível, porém não disponho de toda a página, porque há outros conteúdos na página. Ademais, como às vezes a janela do navegador é maior ou menor, o espaço que posso atribuir ao iframe é diferente.

Neste workshop de Javascript vamos realizar um cálculo do espaço disponível na página para que um iframe que temos dentro ocupe a maior área possível. Tudo tendo em conta que cada usuário pode entrar com uma definição de tela distinta e com um navegador distinto.

Nota: Lembramos que um iframe é um frame que se pode inserir no corpo de uma página, atribuindo uma altura e uma largura.

Primeiramente, gostaria que se entendesse bem o problema com o qual me encontro, ao não saber que área há disponível na página para cada usuário que nos visita.

Vejamos esta imagem, que nos pode esclarecer rapidamente o caso no qual nos encontramos.


Imaginemos uma definição de 800 x 600. Então, o espaço para o iframe será o tamanho útil onde se visualiza a página, menos o espaço reservado para o cabeçalho. Agora, por exemplo, em uma definição de 1280 x 768, como o espaço útil para a página é maior, o espaço no qual quero que se veja meu iframe também será maior. Continua sendo o tamanho útil onde se visualiza a página, menos o espaço reservado para o cabeçalho, porém como agora o espaço útil é maior, o iframe também tem que se apresentar com maior tamanho.

A solução passa por utilizar um Javascript para calcular o espaço útil da página e diminuir o espaço do cabeçalho. Então, teremos a dimensão altura que tem que ter o iframe.

Para calcular este dado temos que ter em conta que Internet Explorer e Firefox têm modos distintos. Ou seja, a propriedade espaço útil da página é distinta nestes dois browsers, por isso o script pode complicar um pouco.

Em Internet Explorer: o espaço útil se calcula com a propriedade document.body.clientHeight.

Em Mozilla Firefox: o espaço útil nos devolve a propriedade window.innerHeight

Com este script podemos calcular o tamanho que devemos reservar ao iframe:

if (window.innerHeight){
   //navegadores baseados em mozilla
   espaco_iframe = window.innerHeight - 110
}else{
   if (document.body.clientHeight){
      //Navegadores baseados em IExplorer, pois nao tenho innerheight
       espaco_iframe = document.body.clientHeight - 110
   }else{
       //outros navegadores
       espaco_iframe = 478
   }
}

O primeiro if serve para os navegadores Firefox, Netscape e similares, que têm a propriedade window.innerHeight

O segundo if é para IExplorer que conhece document.body.clientHeight.

Nos dois casos temos que diminuir 110, que é o espaço que ocupa o cabeçalho. O último if é no caso de que o javascript não entenda nenhuma das duas propriedades, para lhe dar um valor padrão.

Logo, escreveríamos mediante javascript a etiqueta iframe com os dados obtidos previamente:

document.write ('<iframe frameborder="0" src="minhapagina.html" width="770" height="' + espaco_iframe + '">')
document.write ('</iframe>')

E o que aconteceria se os navegadores não entenderem Javascript, ou estiverem desabilitado?

Nesse caso nos convém utilizar a etiqueta noscript, para mostrar um iframe com os valores por padrão (noscript só se tem em conte se não houver suporte para javascript):

<noscript>
<iframe frameborder="0" src="minhapagina.html" width="770" height=478>
</iframe>
</noscript>

O código completo seria o seguinte:

<script>
if (window.innerHeight){
   //navegadores baseados em mozilla
   espaco_iframe = window.innerHeight - 110
}else{
   if (document.body.clientHeight){
       //Navegadores baseados em IExplorer, pois nao tenho innerheight
       espaco_iframe = document.body.clientHeight - 110
   }else{
       //outros navegadores
       espaco_iframe = 478
   }
}
document.write ('<iframe frameborder="0" src="minhapagina.html" width="770" height="' + espaco_iframe + '">')
document.write ('</iframe>')
</script>
<noscript>
<iframe frameborder="0" src="minhapagina.html" width="770" height=478>
</iframe>
</noscript>