Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Nícolas

DICA: Iframe Auto Redimencionavel

Por , em Javascript

Recommended Posts

Nícolas    4

Nícolas
Postado

Aeeee povo.. beleza....

 

Seguinte, ja vi muita gente com dúvidas de como fazia um iframe auto ajustavel.

 

Tem uma forma muito eficiente de se fazer isso....

 

Porem só fuunciona se você utilizar tabela...

 

Mas é muito fácil.

 

 

index.html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Iframe Auto-Ajustavel</title>

<script language="JavaScript" type="text/JavaScript">

<!--

 

function muda_frame ( ifram , valor ) {

var oFrame = document.all (ifram);

oFrame.style.height = valor;

}

 

//-->

</script>

</head>

 

<body>

 

<a href="teste.html" target="conteudo">Teste</a> | <a href="teste2.html" target="conteudo">Teste2</a>

<br> <br>

 

<iframe src="teste.html" name="conteudo" frameborder="0" scrolling="no" width="100%" height="349"></iframe>

 

 

</body>

</html>

Ta aee... essa é a pagina principal do site que contem o javascript e o iframe

 

 

O processo é muito simples...

 

Nesse exemplo to usando duas páginas... teste.html e teste2.html

 

 

 

Tudo o que você precisa fazer é dar um ID para a tabela principal do seu site e esse id será lido por um javascript que deve estar no final da pagina.

 

teste.html

<table width="90%" border="0" cellspacing="0" cellpadding="0" id="cont">

<tr>

<td>

 

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

 

</td>

</tr>

</table>

 

 

 

<script language=JavaScript>

window.parent.muda_frame(window.name,document.all.cont.clientHeight);

</SCRIPT>

Só isso... =)

 

E o id pode ser da sua escolha desde que você mude tanto na tabela quanto no Javascript...

 

 

E só pra facilitar pra quem quer testar...

 

 

 

teste2.html

 

<table width="90%" border="0" cellspacing="0" cellpadding="0" id="cont">

<tr>

<td>

 

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

<p>Testando Iframe</p>

 

</td>

</tr>

</table>

 

 

 

<script language=JavaScript>

window.parent.muda_frame(window.name,document.all.cont.clientHeight);

</SCRIPT>

Aeeee... só criar os 3 htmls e testa aee....

 

:D

 

Flw aeeee

Compartilhar este post

Link para o post
Compartilhar em outros sites

I.K.    0

I.K.
Postado

Fiz o teste aqui e funcionou essa dica ai, mto obrigado.Porém encontrei outro problema:- no meu menu tem vários links, cada um leva a uma pagina cuja tabela tem altura diferente.- O Problema é q está redimensionando o primeiro link do menu (a primeira pagina q abre na verdade) assim as demais paginas q eu abro nesse iframe, o mesmo n redimensiona, mantem a altura da primeira pagina q abre lá dentro.Dai eu pergunto:Tenho q fazer um ID pra cada tabela (pagina) do meu menu e com isso um codigo JS pra cada ID?

Compartilhar este post

Link para o post
Compartilhar em outros sites

I.K.    0

I.K.
Postado

Fiz o teste aqui e funcionou essa dica ai, mto obrigado.Porém encontrei outro problema:- no meu menu tem vários links, cada um leva a uma pagina cuja tabela tem altura diferente.- O Problema é q está redimensionando o primeiro link do menu (a primeira pagina q abre na verdade) assim as demais paginas q eu abro nesse iframe, o mesmo n redimensiona, mantem a altura da primeira pagina q abre lá dentro.Dai eu pergunto:Tenho q fazer um ID pra cada tabela (pagina) do meu menu e com isso um codigo JS pra cada ID?

Deu certo pessoas, mil desculpas por ter postado aki, resolvi refazer o layout levando em consideracao esse JS e td correu bem :unsure:

Compartilhar este post

Link para o post
Compartilhar em outros sites

mcrmcr22    0

mcrmcr22
Postado

Fiz o teste aqui e funcionou essa dica ai, mto obrigado.

 

Porém encontrei outro problema:

 

- no meu menu tem vários links, cada um leva a uma pagina cuja tabela tem altura diferente.

- O Problema é q está redimensionando o primeiro link do menu (a primeira pagina q abre na verdade) assim as demais paginas q eu abro nesse iframe, o mesmo n redimensiona, mantem a altura da primeira pagina q abre lá dentro.

 

Dai eu pergunto:

 

Tenho q fazer um ID pra cada tabela (pagina) do meu menu e com isso um codigo JS pra cada ID?

Deu certo pessoas, mil desculpas por ter postado aki, resolvi refazer o layout levando em consideracao esse JS e td correu bem

 

:unsure:

 

Galera,

 

No IE funciona blza, mas no Firefox NâO.

 

O que pode ser ?

 

Abraços,

 

Montanha

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

bloqueio de segurança, veja o meu exemplo:

Iframe auto ajustavel 2: http://forum.imasters.com.br/index.php?showtopic=300925

 

foi inspirado no código do amigo Nicolas, quando testei percebi esse problema, então fiz ele de maneira que não fosse bloqueado pela SEGURANAÇA, hehehehe.

 

Falow

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito