Iframe Auto Ajustavel

Vinícius · Abril 5, 2004

Ae pessoal ... achei no forum da wmonline a solução para quem quiser botar em seu site um iframe auto ajustavel ... já teve alguns topicos aqui mas nunca se chegou a alguma conclusão .. abaixo vai o link :

http://forum.wmonline.com.br/index.php?showtopic=60551&hl=

T+

Vinícius · Abril 9, 2004

alguém testou o iframe auto ajustavel ?

Kcio · Abril 24, 2004

Eu testei.... E Funcionou!!!

Fiquei muito feliz com isso.. Agora meu site ficará ainda melhor (menos barras para movimentar).

Muito obrigado por postar isso aqui.

falou.

John Doe · Abril 27, 2004

Olha só uma incrementada...No meu código a função fica só na página do iframe...Testem isso:

<html>
<head>
<script language="JavaScript">
<!--
function redimensiona(teste)
{
document.all[teste].height = document.frames[teste].document.body.scrollHeight+10;
}
-->
</script>
<title</title>
</head>
<body style="overflow-x: hidden">
<a href="7.htm" target="teste">7</a> | <a href="1.htm" target="teste">1</a><br />
<iframe name="teste" width="760" height="400" frameborder="0" src="1.htm" 

onload="redimensiona('teste')"></iframe>
</body>
</html>

Abraços !

Junho 26, 2004

Olha só uma incrementada...No meu código a função fica só na página do iframe...Testem isso:

<html>
<head>
<script language="JavaScript">
<!--
function redimensiona(teste)
{
document.all[teste].height = document.frames[teste].document.body.scrollHeight+10;
}
-->
</script>
<title</title>
</head>
<body style="overflow-x: hidden">
<a href="7.htm" target="teste">7</a> | <a href="1.htm" target="teste">1</a><br />
<iframe name="teste" width="760" height="400" frameborder="0" src="1.htm" 

onload="redimensiona('teste')"></iframe>
</body>
</html>

Abraços !

muito bom o codigo, testei e funcionou, mas o problema é assim, em minha pagina tenho 2 iframes ambos estao assim, meu codigohtml de teste

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
<script language="JavaScript">
 FIM REDIMENSIONA AUTOMATICO MENU
</script>
<script language="JavaScript">
 FIM REDIMENSIONA AUTOMATICO CONTEUDO
</script>
</head>
<body>
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="778" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="120"><div align="center">
<h1 class="style1">TOPO</h1>
</div></td>
</tr>
</table>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="22%"><iframe name="menu" width="170" height="500" frameborder="0" src="menu.htm" scrolling="no" onload="redimensiona('menu')"></iframe></td>
<td width="78%"><iframe name="meio" width="607" height="500" frameborder="0" src="conteudo.htm" scrolling="no" onload="redimensiona('meio')"></iframe></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="24" bgcolor="#CCCCCC"><div align="center">
<h5><strong>RODAPÉ</strong></h5>
</div></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

simplesmente troquei os nomes em ( ) pelo os que testei e coloquei o script certo, mas como eu deini o tamanho do iframe em altura dependendo do nivel de informações ele cria um scroll hidden, eu gostaria q ele não criasse isso e é claro nem desse scroll.

George · Agosto 28, 2004

eu tenho uma dúvida quanto a esse scrollHeight...alguém poderia me explicar sobre ele?

Kcio · Fevereiro 3, 2005

Pessoal... mais uma implementação..

Se vocês desejam limitar um tamanho mínimo para o iframe, é só deixar, no site onde está o iframe, assim:

function resize(frame) {
  ifra = document.all[frame];
  inifra = document.frames[frame].document.body;
  ifra.height = (inifra.scrollHeight+10 < '300')?'300':inifra.scrollHeight+10;
}

...

<iframe src="site.htm" name="conteudo" ... onload="resize(this.name)"></iframe>

Isso pode ser útil para que o site não fique com um aspecto de "pequeno".

Ah! Quanto à sua dúvida, George, esse scrollHeight serve, pelo que eu entendi, para ver quantos pixels verticais há no objeto.

Bem.. é isso... até mais...

------------[Editado]

Obs: 1-No exemplo acima, o tamanho mínimo do iframe foi definido como 300px, caso queira modificar, apenas troque esse número;

2-Caso queira definir um tamanho máximo, troque o < por > e modifique os números.

Editado Fevereiro 3, 2005 por Kcio

Illidan · Fevereiro 3, 2005

Mais uma incrementada... agora você não precisa ficar repetindo essa função em cada nova página que chama o iframe. Chame ela só na página que é carregada dentro do iframe...

<script type="text/javascript">
function redimensiona(id)
{
if (obj = parent.document.getElementById(id))
{
obj.height = document.body.scrollHeight + 10;
}
}
</script>
<body>
conteúdo do iframe

<script type="text/javascript">redimensiona('conteudo');</script>
</body>

E claro, na hora de criar o iframe na página principal, você cria ele com o id="conteudo".

Falou galera!

Kcio · Fevereiro 11, 2005

pessoal...

estou usando o script que postei em uma página aqui.... mas estou com o seguinte problema:

em uma das páginas que abre no iframe, há imagens que são chamadas por funções em JavaScript.. e essas funções são chamadas por um onload na página...

porém... a função resize não espera as imagens serem carregadas para fazer o cálculo da altura...

ou seja: eu gostaria que o cálculo fosse realizado depois que tais fotos fossem carregadas.

agradeço desde já...

Fevereiro 17, 2005

Illidan, valeu cara seu código funciono de primeira, perfeitamente

............... exatamente isto que eu tava procurando . valeu

Illidan · Fevereiro 17, 2005

Não tem de que, cara!

Eu só aperfeiçoei... os méritos são de quem criou a primeira função.

[]'s!

Março 8, 2005

Mais uma incrementada... agora você não precisa ficar repetindo essa função em cada nova página que chama o iframe. Chame ela só na página que é carregada dentro do iframe...
<script type="text/javascript">
function redimensiona(id)
{
if (obj = parent.document.getElementById(id))
{
obj.height = document.body.scrollHeight + 10;
}
}
</script>
<body>
conteúdo do iframe

<script type="text/javascript">redimensiona('conteudo');</script>
</body>
E claro, na hora de criar o iframe na página principal, você cria ele com o id="conteudo".
Falou galera!

cara o código ta funcionando perfeitamente mas eu estou com um pequeno problema

a pagina onde os iframe estão sendo carregado contem 2 iframes, usei esta função nas duas paginas que serão carregadas dentro do iframe, as duas redimensionam normal, pois coloquei os id tudo certinho, mas em algumas vezes que eu entro no site, ou dou F5, não carrega um dos iframes, e quando eu deleto esta função da pagina, as duas carregam normalmente, o que poderia estar acontecendo ?

Outubro 10, 2005

Ae galera, uma duvida!

esse script de auto ajuste do IFrame funcionou direitinho, mas mesmo assim ainda não atendeu o que eu precisava...

tipo... eu tenho uma pasta de escritorio desenhada como layout do site, e esta asssim:

<div id="topo-pasta>
  //aqui vem a imagem do topo da pasta
</div>

<div id="miolo">
  //aqui é o miolo que tem o iframe
  <iframe class="posicaoIframe" name=".... > </iframe>
</div>

<div id="bottom-pasta>
  //aqui tem a figura de baixo da pasta, que acompanha o tamanho do iframe
</div

então essa pasta desenhada tem um tamanho certo, para o desenho ficar proporcional e "real" à uma pasta de verdade, então o que preciso é que, quando um html dentro do iframe for maior do que esse tamanho determinado para a pasta, aih sim o iframe cresce, caso contrario ele fique naquele tamanha pre-fixado

alguém tem ideia de como pode ser feito isso?

abraços a todos!

Maio 22, 2007

Mais o seguinte gostaria de fazer isso para NÃO PARA HEIGHT e SIM PARA WIDTH...

Como seria pois já troquei na função javascript de heigth para width mais nada mudou...

Junho 12, 2007

Pessoal! preciso fazer com que o iframe abra a 100 px de altura do topo e que tenha 100% largura e altura.... independente do conteudo dentro dele... como fazer?

Tentei assim:

No iframe:

<iframe 
name="conteudo" 
id="conteudo" 
src="06.php" 
allowtransparency="yes" 
style="position:absolute; left:0px; top:100px;" 
width="100%" 
height="100%" 
frameborder=0 
scrolling="no">
</iframe>

Na página que abre dentro dele: Dentro da tag body:

onunload="java script:iframe_ajustavel();"

Dentro do body:

<script type="text/javascript">
function iframe_ajustavel() {

document.all["conteudo"].height = document.frames["conteudo"].document.body.scrollHeight;

}
</script>

Porém sempre abre com uma rolagem proporcional ao tamanho top:100px;" definido no iframe...

Há uma forma de corrigir isso? Preciso que ele só abra a 100% de largura e altura com top 100px....

Por favor ajudem!

W4NT3D · Junho 3, 2010

já testei todos esses q vocês colocaram ai.

porem nehum deu certo. gostaria que quem já testou e diz ter funcionado, postasse o codigo correto.

codigo que vai na pagina que tem o IFRAME,

Codigo que vai nas paginas que são abertas dentro do IFRAME.

Obrigado.

Pessoal! preciso fazer com que o iframe abra a 100 px de altura do topo e que tenha 100% largura e altura.... independente do conteudo dentro dele... como fazer?
Tentei assim:
No iframe:
<iframe 
name="conteudo" 
id="conteudo" 
src="06.php" 
allowtransparency="yes" 
style="position:absolute; left:0px; top:100px;" 
width="100%" 
height="100%" 
frameborder=0 
scrolling="no">
</iframe>
Na página que abre dentro dele: Dentro da tag body:
onunload="java script:iframe_ajustavel();"
Dentro do body:
&lt;script type="text/javascript">
function iframe_ajustavel() {

document.all["conteudo"].height = document.frames["conteudo"].document.body.scrollHeight;

}
</script>
Porém sempre abre com uma rolagem proporcional ao tamanho top:100px;" definido no iframe...
Há uma forma de corrigir isso? Preciso que ele só abra a 100% de largura e altura com top 100px....
Por favor ajudem!

Entrar

Iframe Auto Ajustavel

Pergunta

Link para o comentário

Compartilhar em outros sites

15 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Guest - thescente -

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Guest Psycho

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Guest Psycho

Link para o comentário

Compartilhar em outros sites

Guest Filipe

Link para o comentário

Compartilhar em outros sites

Guest --Marcelo --

Link para o comentário

Compartilhar em outros sites

Guest --puroossosinistro --

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns