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

 

5 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
  4. Top 10 Casino Apps - Casinoworld
    In this section 바카라사이트 we'll walk filmfileeurope.com you through https://febcasino.com/review/merit-casino/ our selection of top casino apps, and hopefully you'll find plenty casinosites.one of useful information on the top How do you use PayPal?Are there 오래된 토토 사이트 any deposit bonuses at your casino?

    ReplyDelete