Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17736
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Iframe com largura e altura iguais ao documento carregado jQuery

12-05-2015 17:49

Nesse post vou postar um código em jQuery para que você tenha todos os iframes do seu site com largura e altura iguais dos documentos que estão sendo carregados.
Seu iframe terá altura e largura automáticos, ou seja, o tamanho do iframe vai se ajustar ao tamanho do documento que está sendo carregado nele.

Testado e funcionando nas versões mais recentes dos seguintes navegadores: Internet Explorer, Firefox, Opera e Chrome.
Testado com arquivos internos, ou seja, você puxando no iframe um arquivo do seu próprio servidor.


Para testar você precisa ter 2 arquivos: teste.html e teste2.html

teste.html é o arquivo que vai chamar o arquivo para o iframe.

<script src="jquery.js"></script> <style> body{ background-color:#eee; } </style> <script> $(document).ready(function() { $('.iframe').load(function() { $('.iframe').css({'height' : $('iframe').contents().height(), 'width': $('iframe').contents().width()}); }); }); </script> <iframe class="iframe" src="teste2.html" frameborder="0" /></iframe>

teste2.html é o arquivo chamado no iframe.
Obs.: Mantenha o margin 0 na folha de estilo do arquivo que será chamado no iframe.

<style> body{ background-color:white; margin:0; } .div{ width:500px; height:500px; border:1px solid blue; } </style> <div class="div">div</div> <br /> a <br /> b

1
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Bing [Bot]