Aumentar o tamanho do iframe dia acordo com a página a ser carregada com JavaScript.

Dados - X

Olá hoje vou ensinar a vocês como alterar o tamanho do iframe dinamicamente, tipo você tem um iframe que na página inicial ele tem o tamanho height :500px; altura de quinhentos pixel mais quando você clicar em um link dentro desse iframe vai carregar uma página com height :900px; altura de novecentos pixel. geralmente nesses casos vai aparecer uma barra de rolagem. mais recente mente vi que na internet tem muita gente com essa duvida como diminuir e aumentar o tamanho do iframe dia acordo com o tamanho da página que vai carregar. O código a seguir só funciona se a página que vai carregar no iframe estiver dentro do mesmo servidor ou seja se for uma página que um site externo não funciona pois você terá que colocar linhas de código tanto na página que vai ter o iframe como na página que vai ser carregada dentro do iframe. Vamos começar.

No nosso exemplo vamos criar uma página com o nome index.html essa página vai conter nosso iframe:

<iframe id="iframe1" src="endereço da página"  frameborder="0" marginwidth="0" marginheight="0" scrolling="no" align="center" width="675" height="" >

 



Nessa página index.html você o seguinte código JavaScript.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
   <script type="text/javascript">
   $(document).ready(function() {
   myIframe = $("#iframe1").attr("src","endereço da página");
   $(myIframe).load(function() {         
   var myDoc = (myIframe.get(0).contentDocument) ? myIframe.get(0).contentDocument : myIframe.get(0).contentWindow.document;
   myIframe.height(myDoc.body.offsetHeight+10);
    });
  });
</script>

 



O código na pagina index.html tem que ficar mais o menos assim.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function() {
  myIframe = $("#iframe1").attr("src","endereço da página");
  $(myIframe).load(function() {         
  var myDoc = (myIframe.get(0).contentDocument) ? myIframe.get(0).contentDocument : myIframe.get(0).contentWindow.document;
  myIframe.height(myDoc.body.offsetHeight+10);
   });
 });
</script>

 



<iframe id="iframe1" src="endereço da página"  frameborder="0" marginwidth="0" marginheight="0" scrolling="no" align="center" width="675" height="" >

 



Explicando.
No comando ID do iframe você vai colocar o id de identificação do iframe para o JavaScript saber qual iframe ele vai alterar.

No comando SRC do iframe você colocar a página que você quer carregar dentro do iframe lembrado que para esse exemplo funcionar a página tem que tá dentro do mesmo servidor.

Nesse script só vai alterar a propriedade height ou seja a altura por isso no campo height do iframe você deixa vazio.

No campo $(#iframe) do JavaScript você coloca o id que você colocou no ID do iframe, no local onde tem  "endereço da página" no JavaScript você coloca o mesmo endereço  da página que você colocou no iframe.

Na página que vai carregar dentro do iframe você coloca o seguinte código.

<script type="text/javascript">
   window.onload = function(){
      parent.document.getElementById("iframe1").height = document.getElementById("content").offsetHeight;
   }
</script>

 



No campo parent.document.getElementById("iframe1") você coloca o id do iframe.
No campo document.getElementById("content").offsetHeight; no lugar de content você coloca o id da div que vai aumentar de tamanho.

Download do exemplo.