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


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17639
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 altura e largura automática

21-01-2007 02:10

Esse recurso irá fazer com que possamos abrir um outro documento dentro de nossa página e esse documento se ajustará ( altura e largura ) ao nosso documento atual, esse código é dividido em 2 partes:
a 1º é carregar nosso arquivo por iframe, vamos a um exemplo:

<iframe id="iframe" src="arquivo.html" width="" height="" MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=NO WIDTH=0 HEIGHT=0></iframe>

note que definimos uma id ( iframe ).

supondo que nosso arquivo a ser carregado pelo iframe seja ( arquivo.html ), devemos ter uma configuração nele para que nosso iframe molde-o.

nosso arquivo deveria ser assim:
<html> <head> <title>...</title> </head> <body>   <div id="tamanho"> <table width="600" height="600" border="1"> <tr><td> TODO SEU CONTEÚDO AQUI </td></tr> </table> </div>


<script language="JavaScript" type="text/javascript"> parent.document.getElementById("iframe").height = document.getElementById("tamanho").scrollHeight + 5; parent.document.getElementById("iframe").width = document.getElementById("tamanho").scrollWidth + 5; </script>


note que seu código ( do arquivo a ser carregado no iframe ) deve estar todo entre o div ( id=tamanho ), isso para que possa ser pego o tamanho e passado para o iframe.
O ( + 5 ) são 5px acrescentados a altura do iframe, você pode aumentar se desejar.
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Mensagens: 1254
Sexo: Masculino

Re: Iframe com altura e largura automática

15-03-2017 12:00

Encontrei este tópico citado neste link: http://tisenacjundiai.forumeiros.com/t2 ... a-dinamica. Achei bacana a citação. Vou testar o código. Estou precisando de código de iframe com altura automática.
0
 
Mais de 1000 postagens
Mais de 1000 postagens
Mensagens: 1254
Sexo: Masculino

Re: Iframe com altura e largura automática

15-03-2017 13:00

Parece não estar funcionando. Eu coloquei uma borda no iframe. Veja:

Arquivo teste.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <style> .style_iframe { border-color :blue; border-style : solid; border-width : 1px; border-radius:7px; } </style> <body> <iframe class="style_iframe" id="iframe" src="teste2.php" width="" height="" MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=NO WIDTH=0 HEIGHT=0></iframe> </body> </html>

Arquivo teste2.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> body{margin:0} </style> </head> <body> <script language="JavaScript" type="text/javascript"> parent.document.getElementById("iframe").height = document.getElementById("tamanho").scrollHeight + 5; parent.document.getElementById("iframe").width = document.getElementById("tamanho").scrollWidth + 5; </script> <div id="tamanho"> <table width="100" height="100" border="1"> <tr><td> TODO SEU CONTEÚDO AQUI </td></tr> </table> </div> </body> </html>

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

Re: Iframe com altura e largura automática

15-03-2017 17:50

Esse script não está funcionando mais corretamente. Tenta essa versão com jQuery https://css-tricks.com/examples/iFrameResize/
0
A melhor hospedagem para o seu site HostGator!
 
Mais de 1000 postagens
Mais de 1000 postagens
Mensagens: 1254
Sexo: Masculino

Re: Iframe com altura e largura automática

16-03-2017 09:07

Obrigado. Testei o código do link que você passou. Ele parece não ficar responsivo. Excluí a altura do arquivo carregado, e deixei a altura do iframe como auto; o conteúdo fica somente numa linha, e, se vou reduzindo a largura do navegador no modo responsivo, a altura do iframe não acompanha a altura do conteúdo carregado.
0
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17639
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Iframe com altura e largura automática

16-03-2017 11:22

A ideia desse script é que o conteúdo do iframe se ajuste a largura e altura definida para o iframe na página principal.

Agora quanto ao responsivo se pretende usar o iframe com largura 100% tem que colocar a classe iframe dessa forma:

.iframe { width: 100%; padding: 10px; border: 1px solid #eee; }

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado