Jump to content
Fórum Script Brasil
  • 0

Iframe Auto Ajustavel


Vinícius

Question

15 answers to this question

Recommended Posts

  • 0

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.

Link to comment
Share on other sites

  • 0

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 !

Link to comment
Share on other sites

  • 0
Guest - thescente -
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">

<!--

body {

background-color: #666666;

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

.style1 {font-weight: bold}

-->

</style>

<script language="JavaScript">

<!-- INICIO REDIMENSIONA AUTOMATICO MENU

function redimensiona(menu)

{

document.all[menu].height = document.frames[menu].document.body.scrollHeight+0;

}

--> FIM REDIMENSIONA AUTOMATICO MENU

</script>

<script language="JavaScript">

<!-- INICIO REDIMENSIONA AUTOMATICO CONTEUDO

function redimensiona(meio)

{

document.all[meio].height = document.frames[meio].document.body.scrollHeight+0;

}

--> 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&Eacute;</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.

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

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.

Edited by Kcio
Link to comment
Share on other sites

  • 0

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

<!-- este é o final da página carregada dentro 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!

Link to comment
Share on other sites

  • 0

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á...

Link to comment
Share on other sites

  • 0
Guest Psycho
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

<!-- este é o final da página carregada dentro 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 ?

Link to comment
Share on other sites

  • 0

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!

huh.gif

Link to comment
Share on other sites

  • 0
Guest --Marcelo --

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...

Link to comment
Share on other sites

  • 0
Guest --puroossosinistro --

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!

Link to comment
Share on other sites

  • 0

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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      651.8k
×
×
  • Create New...