Jump to content


Photo

Iframe Auto Ajustável


  • Faça o login para participar
150 replies to this topic

#1 Klaus

Klaus

    @ ubuntu jaunty

  • Ex-Admins
  • 7924 posts
  • Sexo:Masculino
  • Localidade:127.0.0.1

Posted 07/03/2004, 22:04

Olá! :yes:

Após termos uma longa discussão, abordando este tema... Parece que cheguei ao resultado! :D Vejam como é simples. Até me surpreendi!

<iframe id="klaus" src="include.html" width="500" height="100%"></iframe>


Simples não? Agora a página que tem o conteúdo...

<!-- Coloquei algum texto aqui, para que exista barra de rolagem -->

<div id="tamanho">

<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>
<h1>Lorem Ipsum<h1>

</div>

<script language="JavaScript" type="text/javascript">
  parent.document.getElementById("klaus").height = document.getElementById("tamanho").scrollHeight + 40; //40: Margem Superior e Inferior, somadas
</script>


Parte essencial do redimensionamento, pelo tamanho deste elemento, é que saberemos o tamanho da página...

O código de redimensionamento. Muito simples não? :D

Então, em resumo, o que é necessário é somente isto:

<iframe id="klaus" src="include.html" width="500" height="100%"></iframe>

A altura acima, é somente para exemplo... Pois o JS irá alterá-la, conforme for necessário...

==========

<script language="JavaScript" type="text/javascript">
  parent.document.getElementById("klaus").height = document.getElementById("tamanho").scrollHeight + 40; //40: Margem Superior e Inferior, somadas
</script>

==========

<div id="tamanho">...</div>


Edição feita por: Klaus, 23/01/2005, 06:30.

Klaus Paiva
Conheça também: Taperás

#2 Fernando Wobeto

Fernando Wobeto

    webmaster

  • Usuários
  • 341 posts
  • Sexo:Masculino

Posted 19/04/2004, 07:50

Aê cara, tudo bem?

veja o que eu fiz, mas não funcionou

eu coloquei isso que vc fez dentro de um código php que iria dar o conteudo, tipo assim:

<iframe id="klaus" src="downloads.php" width="500" height="400"></iframe>



<script language="JavaScript" type="text/javascript">
  parent.document.getElementById("klaus").height = document.getElementById("tamanho").scrollHeight + 40; //40: Margem Superior e Inferior, somadas
</script>

<div id="tamanho">

<?
script php aqui
?>
</div>



E aí? Está correto? nessa parte que diz <div id="tamanho">, em "tamanho" é escrito isso mesmo ou vai algum valor?


obrigado pela ajuda (y)

Edição feita por: Fernando Wobeto, 19/04/2004, 07:51.

|--------------------------------------------------|
| MSN: fernando_wobeto@hotmail.com
| E-MAIL: fernandowobeto@gmail.com
| Desenvolvedor Web
|--------------------------------------------------|

#3 Klaus

Klaus

    @ ubuntu jaunty

  • Ex-Admins
  • 7924 posts
  • Sexo:Masculino
  • Localidade:127.0.0.1

Posted 22/04/2004, 15:08

Não vai valor nenhum... o próprio script calcula o valor da altura.
Klaus Paiva
Conheça também: Taperás

#4 Fernando Wobeto

Fernando Wobeto

    webmaster

  • Usuários
  • 341 posts
  • Sexo:Masculino

Posted 22/04/2004, 23:34

Não vai valor nenhum... o próprio script calcula o valor da altura.

O que eu fiz no post acima está correto então? :blink:

Até mais
|--------------------------------------------------|
| MSN: fernando_wobeto@hotmail.com
| E-MAIL: fernandowobeto@gmail.com
| Desenvolvedor Web
|--------------------------------------------------|

#5 tauser

tauser

    12 Horas

  • Usuários
  • 127 posts
  • Sexo:Não informado
  • Localidade:Brasilia - DF

Posted 10/05/2004, 15:32

Bom eu testei isso mais naum funciona
tenhu q modificar alguma coisa? nesse codigo
<?
Connecting ...
UserName : Tauser
Password : *********
E-mail : tauser@brturbo.com.br
MSN : tauser@gmail.com
Skype : tauserc
Details : WebDesigner, WebMaster.
Sucessfull ...
?>

#6 Klaus

Klaus

    @ ubuntu jaunty

  • Ex-Admins
  • 7924 posts
  • Sexo:Masculino
  • Localidade:127.0.0.1

Posted 10/05/2004, 16:16

É só copiar e colar os códigos que coloquei... Depois basta modificar...
Klaus Paiva
Conheça também: Taperás

#7 thescente

thescente

    Eron Venter

  • Usuários
  • 599 posts
  • Sexo:Não informado
  • Localidade:Novo Hamburgo/RS

Posted 26/06/2004, 23:16

se ele eh redimensionavel pq nas tags do iframe eh setado o height em 400?

#8 Klaus

Klaus

    @ ubuntu jaunty

  • Ex-Admins
  • 7924 posts
  • Sexo:Masculino
  • Localidade:127.0.0.1

Posted 27/06/2004, 11:49

Por um costume de sempre definir um valor aos atributos do HTML. Pode tirar. Não vai fazer diferença.
Klaus Paiva
Conheça também: Taperás

#9 berkowitz

berkowitz

    Novato no fórum

  • Usuários
  • 4 posts
  • Sexo:Não informado

Posted 28/06/2004, 16:20

Pessoal, olá.

Estive dando uma olhadinha neste tópico e percebi que o script desenvolvido pelo KLAUS não está totalmente correto.

Com IFRAME, eu não consigo recuperar, a partir de um iframe, alguma propriedade da página "pai". Teríamos que fazer o inverso.
Ficaria assim então:

======== Página que abriga o IFRAME ========
<html>
<head>
<script language="JavaScript" type="text/javascript">
function tam() {
document.getElementById("page").height = page.document.getElementById("contLoja").scrollHeight + 40; //40: Margem Superior e Inferior, somadas
}
</script>
</head>

<body onload="tam()">
<iframe id="page" src="loja.htm" width="500" height="400"></iframe>
</body>
</html>
======== //Página que abriga o IFRAME ========


======== Caminho do IFRAME (loja.htm) ========
<html>
<head>
</head>
<body>
<div id="contLoja">
<script language="JavaScript">
for(i = 0; i < 101; i ++) {
	document.writeln(i + " + " + i + " = " + (i + i) + "<br><br>");
}
</script>
</div>
</body>
</html>
======== //Caminho do IFRAME (loja.htm) ========

Espero poder ter auxiliado vocês em algo.

T +

BERKOWITZ :ph34r:

Edição feita por: berkowitz, 28/06/2004, 16:20.


#10 thescente

thescente

    Eron Venter

  • Usuários
  • 599 posts
  • Sexo:Não informado
  • Localidade:Novo Hamburgo/RS

Posted 28/06/2004, 18:38

estou usando o codigo do klaus mas estou com um probleminha aqui, ele funciona tudo certo mas agora resolvi testar de outra forma, observer.

- eu tenhu index.htm e dentro dela tenho 2 iframes, que por exemplo seria menu e conteudo, menu lateral esquerda e conteudo lateral direita.

- defini o codigo para ambos igual, somente mudando o nome do iframe e o src um busca o menu.htm e outor conteudo.htm

- o que aconteceu, de acordo com a qtde inexata de conteudo, qdo rodo a index ele geral um scroll, que fica hidden eh claro mas o iframe nao se expandi.

- se quiserem posto o codigo html para vcs olharem, soh avisar, blz?

ateh mais
vlw

#11 Klaus

Klaus

    @ ubuntu jaunty

  • Ex-Admins
  • 7924 posts
  • Sexo:Masculino
  • Localidade:127.0.0.1

Posted 28/06/2004, 20:10

Com IFRAME, eu não consigo recuperar, a partir de um iframe, alguma propriedade da página "pai". Teríamos que fazer o inverso.

É perfeitamente possível. ;) Tanto que, meu código funciona.

=====

thescente, posta o código ae!
Klaus Paiva
Conheça também: Taperás

#12 PhoEniXFirE

PhoEniXFirE

    12 Horas

  • Usuários
  • 133 posts
  • Sexo:Masculino
  • Localidade:Salvador / E. da Cunha
  • Interesses:Mulheres, Alcool e Rock

Posted 29/06/2004, 12:17

Com IFRAME, eu não consigo recuperar, a partir de um iframe, alguma propriedade da página "pai". Teríamos que fazer o inverso.

É perfeitamente possível. ;) Tanto que, meu código funciona.

=====

thescente, posta o código ae!

Queria fazer uma sugestão Klaus:

<iframe id="klaus" src="include.html" width="100%"></iframe>

n especifique a altura e a largura deixe 100%, pq a galera vai ficar sem entender.

Valew

p.s.: colocou pra véi neste post.
Nome: Rai Rabelo
Nick: PhoEniXFirE
Site: www.phoenixfire.com.br
MSN: rairabelo@phoenixfire.com.br
ICQ: 221966550


Asp - Flash - Javascript - HTML

#13 myblue

myblue

    Normal

  • Usuários
  • 100 posts
  • Sexo:Não informado
  • Localidade:Ribeirão Preto
  • Interesses:PHP, FireWorks...

Posted 13/07/2004, 19:20

puts não consegui :(

Qual o codigo que coloco onde vai aparecer o iframe???
E qual o codigo que coloco no conteudo???

Abraços!

#14 Alex Hiroshi

Alex Hiroshi

    Super Veterano

  • Ex-Admins
  • 4923 posts
  • Sexo:Masculino
  • Localidade:São Paulo - SP

Posted 13/07/2004, 19:57

Na pagina que vai conter o iframe, vc apenas vai usar o codigo de iframe
<iframe id="klaus" src="include.html" width="500" height="400"></iframe>
e o resto do script, vc coloca no conteudo do iframe, ou seja, na pagina que vai abrir dentro do msm... (y)
Fórum WMO - Equipe de Desenvolvimento / Banco de Dados - Ex-Administrador

#15 myblue

myblue

    Normal

  • Usuários
  • 100 posts
  • Sexo:Não informado
  • Localidade:Ribeirão Preto
  • Interesses:PHP, FireWorks...

Posted 13/07/2004, 22:05

Na pagina que vai conter o iframe, vc apenas vai usar o codigo de iframe

<iframe id="klaus" src="include.html" width="500" height="400"></iframe>
e o resto do script, vc coloca no conteudo do iframe, ou seja, na pagina que vai abrir dentro do msm... (y)

centro alex, e qual seria esse resto???
tenho que mudar pras minhas dimensoes




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq