Redimensionar iframe em JS - [Resolvido]

CsRocha · Julho 4, 2008

Peguei por aí diversos scripts para redimensionar um iframe, pois o site tem toda a movimentação em um iframe, dentro de uma página inicial. Não uso tableless.

O código está assim:

<script language="javascript">
function calcHeight()
{
//find the height of the internal page
var the_height= document.height;
if (the_height<=940) {
the_height=940;
}
//change the height of the iframe
parent.document.getElementById('inicial').height= the_height + 60;

}
</script>

Essa checagem de 940 é porque a coluna lateral com menu e outros, tem a altura de 1000px... No body da página cliente ativo no onload a função calHeight().

Sei, por ter visto outros, que falta colocar validação para IE, mas de 2 que peguei, não consegui adaptar. Alguém poderia me explicar o que tenho que fazer para tal? Sei que tem que validar com um if (document.all), mas não entendi bem o que isso faz. Queria mais do que apenas o código que complemente minha rotina, queria entender, de vez por todas, qual é essa diferença na programação para FF e IE, para futuro uso sem apanhar novamente como agora. (estou há 2 dias parado nisso). Bem o site está no ar há tempos, mas estou dando uma atualizada no código; andei parado por uns 4 anos, por motivo de saúde, por isso estou tão desatualizado.

Tenho um livro de JScript muito antigo, de 1997... Alguém poderia me indicar um bom livro sobre o assunto? JS e DHTML/DOM?

Editado Julho 5, 2008 por CsRocha

KaKarotto · Julho 4, 2008

CsRocha, eu vou falar com o outro moderador, você acabou de me dar uma idéia, que é criar um post bem feito com os melhores links sobre Js.

Seguinte, existe um ótimo lugar para referências: w3schools.com.

AProveita essa dica, esse é um dos ou o melhor lugar para se aprender qualquer coisa técnica sobre javascript. Não tem tudo, mas tem a maioria das coisas.

O motivo pelo qual certas coisas funcionam no iE e não no FF é sempre o mesmo. É criado uma documentação em js para todos os comandos válidos para tal versão do Js.

O que acontece é que a Microsoft usa, em alguns casos, códigos próprios que não estão na documentação padrão do Js. Com o iE8 e os próximos navegadores da Ms, parece que a coisa irá mudar, pois terão os códigos padrões além dos implementados pela própria empresa. Então, você não precisará verificar qual tipo de navegador o usuário está usando para montar seu script.

Uma dica, use o console do FF e do iE. Os dois apontam os erros, não precisa ficar quebrando a cabeça.

Não é só com Js, acontece também com Css. O importante não é saber todos decor, mas saber que se o codigo não está funcionando em um navegador é porque existem dois comandos diferentes para a mesma função.

Sempre que for mexer com a formatação, altura, largura, cor etc, faça isso através de Css, as chances de funcionar em todos os browsers são maiores:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">

        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <title></title>
                <link rel="stylesheet" type="text/css" href="" media="screen" />
                <script type="text/javascript">

                
                window.onload=function(){
                $=function(id){return document.getElementById(id)}
                $("inicial").style.height=$("caixa").scrollHeight + "px"

                }
                
                
                


            </script>
            </head>

        <body>
        
        <iframe style="float:left; border:1px solid blue" id="inicial" src="teste.htm"></iframe>
        <div style="width:500px; height:auto; border:1px solid blue; float:left" id="caixa">
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        </div>

        </body>
</html>

O que eu fiz foi ver o tamanho do div, e colocar o mesmo tamanho no iframe. Imagino que é isso que deseja. Embora seja preferível usar div ao invés de iframes. Iframes devem ser usados em último caso para os conteúdos do site. Não que não se deva usar iframes, mas prefira usar para outros fins.

Abraço.

CsRocha · Julho 5, 2008

Obrigado pelas dicas, Kakarotto.

Já conheço o w3schools, mas como disse, estou um pouco enferrujado, devido a tanto tempo fora de programação.

Achei um script que funcionou, que é justamente aquilo que procurava, ou seja, checa o navegador e aplica o código apropriado. Não vou postar agora, porque - é sério - depois de ter conseguido resolver meu problema de 2 dias, fui comemorar tomando umas skois e já estou baqueando, hehe...

Amanhã postarei o código e o site onde encontrei essa fonte, com muitos exemplos muito úteis e didáticos.

Abs.

CsRocha · Julho 5, 2008

O fonte deste código que peguei é:

http://www.java2s.com/Code/JavaScript/Java...Collections.htm

Já o código é este:

<script language="javascript">
function ajustaIframe(id) {
var myIframe = parent.document.getElementById(id);
if (myIframe) {
if (myIframe .contentDocument && myIframe.contentDocument.body.offsetHeight) {
// W3C DOM (and Mozilla) syntax
myIframe.height = myIframe.contentDocument.body.offsetHeight + 60;
if (myIframe.height <= 999) { myIframe.height = 1000; }
} else if (myIframe.Document && myIframe.Document.body.scrollHeight) {
// IE DOM syntax
myIframe.height = myIframe.Document.body.scrollHeight + 60;
if (myIframe.height <= 999) { myIframe.height = 1000; }
}
}
alert (myIframe.height);
}
</script>
</head>
<body bgcolor="#ebffed" onload="ajustaIframe('inicial');">

Fiz esse ajuste para 1000 porque esse é o tamanho original do iframe, na página que o contém. Fiz mais por prevenção, pois sei lá se futuramente pode dar uma desconfigurada...

inicial é o nome do iframe, que deve ser colocado tanto em id=, como em name=.

Vou estudar mais essa questão de usar CSS, pois estou bem verde ainda nesse assunto.

Valeu.

Editado Julho 5, 2008 por CsRocha

Entrar

Redimensionar iframe em JS - [Resolvido]

Pergunta

CsRocha

Link para o comentário

Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

KaKarotto

Link para o comentário

Compartilhar em outros sites

CsRocha

Link para o comentário

Compartilhar em outros sites

CsRocha

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades