Tutorial – Redimensionando height de Iframe com JavaScript
Na figura abaixo podemos ver a estrutura básica de um sítio:
Div “Geral”, local aonde fica alocado conteúdo, rodapé, cabeçalho…
Div “Conteúdo”, conteúdo do site no nosso caso é aonde ficará o Iframe
Iframe a ser redimensionado.
O Iframe abrirá páginas com diferentes alturas (height). O tutorial tem como objetivo ensinar como redimensionar esse atributo.
1º Passo – Declaração do Iframe
Conteúdo
</div>
3º Passo – Inserir código JavaScript na página que abrirá dentro do Iframe:
<script language=”JavaScript” type=”text/javascript”> parent.document.getElementById(“id_do_iframe”).height = document.getElementById(“tamanho”).scrollHeight + 40;
</script>
Esta função calcula a altura( height) do Div “Tamanho”, adicionando 40 pixels para margens e redimensiona a luta previamente definida no Iframe.
Espero que esse tutorial seja útil em situações do dia-a-dia.
Davi de Alencar
davi@portaltecnologia.net
Share
Se você é novo aqui, você pode assinar o meu RSS feed. Obrigado pela visita!
July 19th, 2008 at 10:12 pm
olá, é sem dúvida util, mas seria melhor se fosse calculado o tamanho do conteudo do iframe.
por exemplo, a página que será carregada no iframe seja dinâmico que a sua altura varie.
se o javascript calcule a tamanho da página carregada e redimensionasse o iframe para que não houvesse scroll seria mais ulti.
msmo assim vlw pelo tutorial.
abraços
October 11th, 2008 at 5:12 pm
Sinceramente… tutorial inútil… nao serve para nada
March 30th, 2009 at 7:36 pm
se fosse inutil nao teria resolvido meu problema…valeu broo
March 30th, 2009 at 7:50 pm
Helder, o tutorial não é inútil meu amigo, pra quem precisa ele é bem útil, obrigado pela visita.
April 5th, 2009 at 7:52 pm
Parabéns!!!
Funcionou direitinho… estava buscando muito uma solução para este assunto
April 6th, 2009 at 10:38 am
Obrigado pela visita Ronaldo. Isso prova que o tutorial é muito útil certo? Abraços.
Tiago Souza
July 3rd, 2009 at 10:59 am
Djow, tava procurando o que quando chegou até este tutorial? Algo que não sabes!! Então é de grande utilidade. Ficamos no aguardo de um tutorial feito por você.
November 3rd, 2009 at 3:11 pm
Olá.
Sei que o tutorial é antigo.
Mas li ele hj e encontrei uma solução para as páginas com tamanho dinâmico (PHP ou ASP).
//Use esta função
function Tamanho(){
parent.document.getElementById(”id_do_iframe”).height = document.getElementById(”tamanho”).scrollHeight + 40;
}
E na tag BODY coloque onload=”Tamanho();”
Assim quando o conteúdo dinâmico for carregado automaticamente o IFRAME se ajusta ao conteudo.
Vlw.
November 16th, 2009 at 11:05 pm
Muito boa solução, me ajudou muito. Parabéns pela publicação.
November 17th, 2009 at 8:04 am
Obrigado pela visita Joao! Abraços.
January 15th, 2010 at 1:42 pm
Muito bom !!!!!!!!!!!…. Foi de grande ajuda… e pra quem fala que é inutil… um dia vc vai precisar… ai quero ver vc fala que é inutil !!!.. aahuahu… valeu pelo tutorial MUITO UTIL !!!. fuiiiiiiiiiiiiiiiiiii
February 23rd, 2010 at 10:29 am
muito bom!!!
November 26th, 2010 at 11:00 am
Mas o tutorial é realmente inutil digam o que quiserem