Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) Iframe com altura automática...

cassianooliver

Perguntado por cassianooliver,

 Share

Pergunta

cassianooliver

cassianooliver

Postado
Postado

Pessoal, to com o script do micox sobre como fazer pra que uma iframe fique com a altura automática...

ta tudo funcionando perfeitamente...

o problema é que, agora não to conseguindo validar meu XHTML...

o problema está somente nessa linha...

onload="iframeAutoHeight(this)"

será que tem uma forma de fazer a iframe ficar automática só com css?

ou uma outra forma de chamar a função mas permitindo que seja validado meu xhtml...

se alguém puder me ajudar...

Link para o comentário
Compartilhar em outros sites

18 respostass a esta questão

Posts Recomendados

  • 0
KaKarotto

KaKarotto

Postado
Postado

Não.

Ele fez isso em javascript justamente porque não é possível fazer apenas com css. iFrame é como se fosse uma outra janela não é como um div...

POsta o código do micox ae, ele deve ter usado algum comando proprietário, vamos ver se não tem como fazer de outra forma. COmo foi o micox quem fez, tenho a impressão de que ele pensou nas outras formas já.

Link para o comentário
Compartilhar em outros sites
  • 0
cassianooliver

cassianooliver

Postado
  • Autor
Postado (editado)

ah, tem como alterar ela para ser chamada no <body>?

function iframeAutoHeight(quem){
    if(navigator.appName.indexOf("Internet Explorer")>-1){ //ie sucks
        var func_temp = function(){
            var val_temp = quem.contentWindow.document.body.scrollHeight + 5
            quem.style.height = val_temp + "px";
        }
        setTimeout(function() { func_temp() },100) //ie sucks
    }else{
        var val = quem.contentWindow.document.body.parentNode.offsetHeight + 5
        quem.style.height= val + "px";
    }    
}

Editado por cassianooliver
Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado

você pode usar depois desse código o seguinte:

window.onload=iframeAutoHeight

É melhor usar javascrpt assim ao invés de enfiar dentro das tags quando possível.

Kelabrassssss

Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado (editado)

Por que quer colocar no body?

Se você coloca o script pra rodar no body, ele não vai conseguir achar o iframe, pois o iframe ainda não foi criado.

Se não quiser fazer a chamada no iframe, você pode fazer a chamada lá entre as tags <head></head> usando o comando:

<script type="text/javascript">
window.onload=function(){
var iframe=document.getElementsByTagName("iframe")[0]
iframeAutoHeight(iframe)
}
</script>

Dessa forma, quando a página for carregada, a função do micox vai ser executada.

Editado por KaKarotto
Link para o comentário
Compartilhar em outros sites
  • 0
cassianooliver

cassianooliver

Postado
  • Autor
Postado (editado)
Por que quer colocar no body?

pra poder validar meu XHTML, o validator não aceita onload na iframe, colocando no body a função, aí conseguiria validar...

removi o onload do iframe e coloquei o código que passou no head, mas não funcionou...

a iframe não redimensiona...

Editado por cassianooliver
Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado

Olha como eu to meio atrasado, vou tentar na base do chutômetro, quando eu voltar eu vejo direitinho como fazer isso.

Coloca o código todo que vou passar entre as tags <head></head>.

<script type="text/javascript">

function iframeAutoHeight(){
    if(navigator.appName.indexOf("Internet Explorer")>-1){ //ie sucks
        var func_temp = function(){
            var val_temp = this.contentWindow.document.body.scrollHeight + 5
            this.style.height = val_temp + "px";
        }
        setTimeout(function() { func_temp() },100) //ie sucks
    }else{
        var val = this.contentWindow.document.body.parentNode.offsetHeight + 5
        this.style.height= val + "px";
    }    
}


window.onload=function(){
var iframe=document.getElementsByTagName("iframe")[0]
iframe.onload=iframeAutoHeight()
}
</script>

Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado

É no chute não ia dar mesmo...

<script type="text/javascript">

function iframeAutoHeight(quem){
    if(navigator.appName.indexOf("Internet Explorer")>-1){ //ie sucks
        var func_temp = function(){
            var val_temp = quem.contentWindow.document.body.scrollHeight + 5
            quem.style.height = val_temp + "px";
        }
        setTimeout(function() { func_temp() },100) //ie sucks
    }else{
        var val = quem.contentWindow.document.body.parentNode.offsetHeight + 5
        quem.style.height= val + "px";
    }    
}

window.onload=function(){
iframeAutoHeight(document.getElementById("nome-tal"))
}
</script>

Coloca um id no seu iframe cassiano, não mexi no código do micox, apenas adicionei um código no final.

Esse código vai esperar o navegador loadear o documento todo, então vai pegar o id do iframe e executar a função do micox.

Um dos problemas que eu acho mais chato é quando temos que pegar um elemento no documento e esse elemento não foi criado, que é o seu caso, fazer o iframe se alto-redimensionar sem botar a chamada na função no html. Então, você pode usar esse truque que fiz e colocar dentro da função do window.onload tudo o que quer que execute quando o documento for carregado.

Kelabrassssss

Link para o comentário
Compartilhar em outros sites
  • 0
cassianooliver

cassianooliver

Postado
  • Autor
Postado

olha, funcionou + ou -...

na iframe eu tenho a enquete...

o inicio da enquete é a pergunta e as opções, e ainda dois botões mais embaixo (votar e parcial), digamos que a altura então inicial da iframe é de 200px...

até aí, o script que me passou funciona...

agora, se eu clicar em em votar ou em parcial, ali dentro da iframe vai ser carregada a resultado.php, que digamos que tenho 300px de altura, aí nesse caso a iframe não redimensiona, fica quase metade sem aparecer...

só redimensiona se eu der F5...

Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado (editado)

Hum....e quando você faz a chamada da função do micox no corpo do iframe ele funciona nesse caso?

Se funcionar eu já sei qual é o problema.

Editttttteeeeeee:

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

quem=document.getElementById('iframe')

    if(navigator.appName.indexOf("Internet Explorer")>-1){ //ie sucks
        var func_temp = function(){
            var val_temp = quem.contentWindow.document.body.scrollHeight + 5
            quem.style.height = val_temp + "px";
        }
        setTimeout(function() { func_temp() },100) //ie sucks
    }else{
        var val = quem.contentWindow.document.body.parentNode.offsetHeight + 5
        quem.style.height= val + "px";
    }    
}


window.onload=function(){
var iframe=document.getElementById('iframe')
iframe.attachEvent("onload", iframeAutoHeight)
iframeAutoHeight()
}
</script>

Vê se agora funciona.

Editado por KaKarotto
Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado (editado)

Inhaca!!!

Tenta usar o seguinte:

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

quem=document.getElementById('iframe')

    if(navigator.appName.indexOf("Internet Explorer")>-1){ //ie sucks
        var func_temp = function(){
            var val_temp = quem.contentWindow.document.body.scrollHeight + 5
            quem.style.height = val_temp + "px";
    quem.attachEvent("onload", iframeAutoHeight)
        }
        setTimeout(function() { func_temp() },100) //ie sucks
    }else{
        var val = quem.contentWindow.document.body.parentNode.offsetHeight + 5
        quem.style.height= val + "px";
    quem.onload=iframeAutoHeight
    }    
}


window.onload=function(){
iframeAutoHeight()
}

</script>

Acho que agora vai .

Editado por KaKarotto
Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado

Então Cassiano, o problema do script anterior era bem simples, eu estava fazendo o seu código no iE esqueci do FF, a função attachEvent não existe, é apenas do iE, por isso o console retornava o erro de função inexistente ou não é função.

Acontece que pra resolver esse problema eu apenas inclui, no if que verifica o navegador usado, o código do FF. O estranho é, por que parou de funcionar no iE se eu não alterei nada do iE....

Eu não uso iE7 nem FF, estou usando uma versão anterior dos dois navegadores, iE6 e K-meleon. O iE7 eu ainda sei como o código fica, não preciso instalar, mas estou sem poder instalar o FF e o k-Meleon na maioria das vezes funciona muito parecido com o FF.

Eu não sei, talvez tenha dado o azar do script não funcionar nas versões mais novas, mas, será que está usando o html correto ? Está usando o iframe com id chamado "iframe"? Note que o código só funcionará se definir o iframe com id "iframe" em letras minúsculas.....

Vou postar o código todo que utilizei agora pra testar, html, javascript, tudo.

<html>
<head>

<script>
function iframeAutoHeight(){

quem=document.getElementById('iframe')

    if(navigator.appName.indexOf("Internet Explorer")>-1){ //ie sucks
        var func_temp = function(){
            var val_temp = quem.contentWindow.document.body.scrollHeight + 5
            quem.style.height = val_temp + "px";
    quem.attachEvent("onload", iframeAutoHeight)
        }
        setTimeout(function() { func_temp() },100) //ie sucks
    }else{
        var val = quem.contentWindow.document.body.parentNode.offsetHeight + 5
        quem.style.height= val + "px";
    quem.onload=iframeAutoHeight
    }    
}


window.onload=function(){
iframeAutoHeight()
}

</script>
</head>

<body>

<ul id="menu">
<a href="pagina1.htm" target="iframe">Downloads</a>
<a href="pagina2.htm" target="iframe">Intro</a>
</ul>


<iframe src="intro.html" name="iframe" id="iframe"></iframe>

</body>
</html>

Talvez esteja gastando muito tempo pra solucionar problemas com esse iframe que são muito antigos. Se usasse ajax talvez não seria melhor ?

De qualquer maneira, estou desenvolvendo uma outra solução pra quem não quer utilizar Ajax, se estiver interessado fica ligado ae que quando eu terminar eu postarei.

Akelabrasssssss

Link para o comentário
Compartilhar em outros sites
  • 0
cassianooliver

cassianooliver

Postado
  • Autor
Postado

também não funcionou, agora em nenhum navegador...

mas me virei aqui, peguei seu último script (o que só funcionou no IE)...

alterei umas coisinhas no if, pra diferenciar o que vai executar no IE e no FF...

agora ta funcionando...

e meu código validado!

ficou assim:

function iframeAutoHeight(){

quem = document.getElementById('id_iframe')
     if(navigator.appName.indexOf("Internet Explorer")>-1) { //ie sucks
          var func_temp = function(){
               var val_temp = quem.contentWindow.document.body.scrollHeight + 5
               quem.style.height = val_temp + "px";
               var iframe=document.getElementById('ienquete')
               iframe.attachEvent("onload", iframeAutoHeight)
          }
     setTimeout(function() { func_temp() },100) //ie sucks
     }
     else {
          var val = quem.contentWindow.document.body.parentNode.offsetHeight + 5
          quem.style.height= val + "px";
          var iframe=document.getElementById('id_iframe')
    }    
}
window.onload=function(){
iframeAutoHeight()
}

brigadão kakaroto por sua atenção...

abraço!

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...