Nov 16, 2011

Ajustar IFrame de acordo com conteúdo

Há algum tempo tive o problema de redimensionar um iframe de acordo com o conteúdo , conforme o conteúdo aumenta, o iframe aumenta também.

Para realizar esta façanha, seguir os seguintes passos:

Na página conteúdo ( que ficará dentro do iframe )

Colocar o seguinte código.



<body onload="atualizaIframe();">



criar uma div com o nome "container" , para assim , conseguir pegar a altura total, para assim, alterar o height do iframe da página pai.

função JavaScript:



function atualizaIframe() {
  var tamanho = document.getElementById("container").offsetHeight;
  parent.document.getElementById("ifrm").style.height = tamanho;  
}




Na página pai (parent), onde ficará o iframe

colocar o código do iframe.Não esquecer de setar a propriedade scrolling para "no" e definir o id do iframe para "ifrm" no caso da função javascript atual, se quiser alterar o nome, alterar na função também



<iframe width="100%" scrolling="no" height="600px" frameborder="0" id="ifrm"
allowtransparency="true" heigth="100%" marginwidth="10" marginheight="0"
style="padding: 0pt; margin: 0pt; height: 10111px;" src="http://paginafilha/conteudo">
</iframe>



 Pronto, de acordo com o crescimento do conteúdo, a altura do iframe aumenta também.

Outra solução: http://stackoverflow.com/a/9976309/1607490


Ambas soluções funcionam somente se o os conteúdos estiverem no mesmo domínio! mais informações sobre isto em: Same Origin Policy

 

4 comments:

  1. Rafael, só não funcionou no Chrome:
    Cannot call method 'getElementById' of undefined on
    atualizaIframe

    ReplyDelete
    Replies
    1. sobre o erro do getElementById, só acontece com o arquivo local. depois que coloca no servidor funciona perfeitamente!

      Delete
  2. sobre o erro do getElementById, só acontece com o arquivo local. depois que coloca no servidor funciona perfeitamente!

    ReplyDelete
  3. http://convidado.1apps.com/

    ReplyDelete