[Resolvido] tem como deixar o tamanho de um iframe

[geekweb 0]

Olá, gostaria de deixar o tamanhodo iframe dinamico, de acordo com o tamanhoque a janela ocupar,...ex: se o conteudo do iframe ocupar: height de 600px,o tamanho do iframe seria 600 + 20(para ficar um pouco maior) = 620pxaguardo,

[mihoshi 0]

Oi Adriano, obrigada por responder.Não entendi muito bem, a página que tu chama de Página do Iframe, é a página que vai abrir dentro do iframe ou a pagina que contem o iframe?Outra coisa "- Crie uma DIV com o nome container para envolver tudo o que quer que saia no iFrame:"em qual das páginas?E dentro você sugeriu...//conteúdo do banco de dados, por exemplo...Dentro do iframe abrirão diferentes links, tenho de colocar uma DIV em cada arquivo html que ali abrir?Desculpa a encheção de saco...Tentei algumas coisas aqui mas não ficou alinhado como eu gostaria, acredito que eu errei a sintaxe dalguma coisa.Abraço!

[Ivan.Teles 23]

Página com o Iframe.

 

<%@LANGUAGE="vb script:window.open('detalhe.asp?id=<%= rs1("id")%>','','width=500, height=180')"><strong><%= rs1("titutlo")%></strong></a>  <strong>-</strong> 
		<% rs1.movenext()
		loop %> </span></marquee></td>
  </tr>
  <tr>
	<td bgcolor="#A6A9AB"><div align="center" class="Tit_anu">Últimos 30 de  anúncio em <%= date() %>. </div></td>
  </tr>
</table>
  <table width="470" align="center" cellpadding="1" cellspacing="1">
	  <tr class="titulo_anu">
	  <td height="16"onkeypress="VerificaCtrl()" onkeydown="VerificaCtrl()" onkeyup="VerificaCtrl()"><strong><a href="#Detalhes" onclick="java script:window.open('detalhe.asp?id=<%= rs("id")%>','','width=500, height=150')"><span class="a"> <%= rs("categoria")%> - <%= rs("titutlo")%></span></a></td>
	</tr>
	<tr>
	  <td bgcolor="#FFFFFF"><div align="justify">
		<% if (rs("externa") = 0) then %>
		<a href="#Ampliar"><img src="<%= rs("foto")%>" width="75" height="50" border="0" align="left" onclick="openPictureWindow_Fever('<%= rs("foto")%>','400','300','.',')','')" /></a><br />
		<% else if rs("externa")= 1 then %>
		<a href="#Ampliar"><img src="vip/upload/<%= rs("upload")%>" width="75" height="50" border="0" align="left" onclick="openPictureWindow_Fever('vip/upload/<%= rs("upload")%>','400','300','.',')',')')" /></a>
		<% else %><% end if end if %>
	  <%= rs("anuncio")%><a href="#Enviar" onclick="java script:window.open('enviar.asp?id=<%= rs("id")%>', 'Enviando', 'width=330, height=250')"><img src="imagens/botao.gif" width="117" height="22" border="0" align="right" /></a></div>
	  </td>
	</tr>
</table>
  <br />
  </div>
</body>
</html>

Porém ele não altera a altura do tamanho correto!!

 

Tem algo errado?

[Ivan.Teles 23]

Funcionou ao carregar a pagina, porém ao clicar em um link que carrega uma página menor ele acrescenta a altura atual a altura da página carregada.

 

no link eu defini assim: onclick="atualizaIframe();" como fazer pra zerar a altura atual e adicionar a altura da nova página carregada??

 

Alterei para:

 

<script language="JavaScript" type="text/javascript">
function atualizaIframe(){
	parent.document.getElementById("iframe").style.height = '0'; //Zera a altura para 0
	var tamanho = document.getElementById("conteudo").offsetHeight;
	parent.document.getElementById("iframe").style.height = tamanho; //Seta a nova altura.
}
</script>

[mihoshi 0]

Oi Adriano, funcionou muito bem, muito obrigada já havia enfrentado este problema com outro site.

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif http://forum.imasters.com.br/public/style_emoticons/default/joia.gif http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

Apenas uma correção pois aqui não funcionou de outra maneira... substituir ID por NAME.

- Na página principal:

 

CODE<iframe id="iFrameNews" src="ListarNoticias.asp" width="100%" marginwidth="0" marginheight="0" scrolling="no" frameborder="0"></iframe>

 

NAME inves de ID

 

CODE<iframe name="iFrameNews" src="ListarNoticias.asp" width="100%" marginwidth="0" marginheight="0" scrolling="no" frameborder="0"></iframe>

[floating 0]

Pessoal eu tentei usar esse script pq tenho que fazer uma rádio em um projeto e para o conteudo do site não consegui achar outra solução que não fosse Iframe, pois a rádio não pode ser iniciada novamente, porém o tamanho das páginas tem que ser dinâmicos, achei esse script e usei da seguinte forma:

 

no Head:

<script language="JavaScript" type="text/javascript">function atualizaIframe(){	parent.document.getElementByName("site").style.height = '0'; //Zera a altura para 0	var tamanho = document.getElementByName("site").offsetHeight;	parent.document.getElementByName("site").style.height = tamanho; //Seta a nova altura.}</script>

Iframe:

<iframe name="site" src="link_1.html" width="100%" marginwidth="0" marginheight="0" scrolling="no" frameborder="0"></iframe>

Links:

<a href="link_1.html" target="site" onclick="atualizaIframe();" >Link_01</a><a href="link_2.html" target="site" onclick="atualizaIframe();" >Link_01</a><a href="link_3.html" target="site" onclick="atualizaIframe();" >Link_01</a><a href="link_5.html" target="site" onclick="atualizaIframe();" >Link_01</a>

mas não funciona, ele coloca uma altura de aprox. 80px em todas as páginas.

Alguém poderia me ajudar??

 

Atenciosamente.

Aclébson Silva

[Diegoogle 0]

( Antes de responder quero que fique claro para quem vir dizer sobre a data do post que não ligo para as datas que foram postadas, mas se foram solucionadas ou não, e nestes casos procurei muito não só neste fórum como em muitos outros e muita gente, como eu, com o mesmo problema e que não encontraram resposta; eu encontrei este post - de 2006, porém não resolvido, e estou postando a solução que encontrei e tenho certeza de que se alguém procurar no Google irá encontrar este post com esta solução. Então não perca seus posts falando sobre datas, mas postanto soluções )

 

O Original deste texto está no site http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

fiz questão de traduzir para quem precisar como eu precisei muito e está me servindo muito bem.

 

Passo 1: Insira o código abaixo dentro do HEAD da tua página principal (Atenção nos comentários)

 

<script type="text/javascript">

/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Insira os IDs dos IFRAMES que você deseja redimensionar dinamicamente para corresponder à altura de conteúdo:
//Separe cada ID com uma vírgula. Exemplos: ["myframe1", "myframe2"] ou ["myframe"] ou [] para nenhum:
var iframeids=["myframe"]

//O script deve esconder o iframe dos navegadores que não suportam este script (não os navegadores IE5+/NS6+. Recomendado):
var iframehide="yes"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //altura extra em px para adicionar iframe nos navegadores  FireFox 1.0 +

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
//mostrar iframe para navegadores mais inferiores? (veja o var acima)

if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //sintaxe ns6
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; 
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //sintaxe ie5+
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Conserto de bug
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script>

Passo 2: Tendo feito o acima, define os IFRAMEs que você quer que seja redimencionado automaticamente, e insira-os dentro de sua página. Um exemplo parecido:

 

<iframe id="myframe" src="paginaExterna.htm" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>

Configurando o script

 

Para configurar este script, primeiro defina as variáveis dentro do script do Passo 1 pelos comentários. Como você pode ver, você pode especificar mais que um iframe na página no qual o script deve redimencionar dinamicamente.

 

Segundo, para o código do Passo 2, tenha certeza de que o ID (ex: "myframe") coincide com o ID inserido dentro do script, para que o script conheça qual IFRAMEs ajustar. Você pode mudar também o atributo de largura width (ex: 100%) para um valor diferente, já que o script modifica apenas a altura do iframe, mais não a largura.

 

Terceiro, no script do Passo 1, há uma variável que define se os navegadores que não suportam este script (não os navegadores IE5+/NS6+) devem continuar a ver o(s) iframe(s) ou não. Geralmente você deveria escolher esconder o iframe nesses navegadores não compatíveis (Opera 7 inclusive), já que a altura do iframe é estrutural nestes casos, e uma parte da página externa muito provavelmente será cortada e não visível para o usuário se a altura da página externa ultrapassa o padrão de altura do iframe.

 

Por último mas não menos importante, como mostrado no exemplo acima, você pode realmente usar links na sua página principal para carregar uma página em seu iframe (com o iframe automaticamente redimensionadas para a altura da página, claro). Para isso, o link deve ter esta aparência:

 

<a href="javascript:loadintoIframe('myframe', 'externo.htm')">Link</a>

Onde "myframe" é o ID do IFRAME que você quer que carregue a página dentro, e "externo.htm", o caminho no seu site para a página que será carregada.

[klonder 14]

Diegoogle, obrigado pela colaboração. Eu sei fazer de outra forma:

 

1. Inserir o código abaixo em todas as páginas que contém o CONTEÚDO do iframe --> Cole todo o conteúdo do iframe dentro de uma div, que nesse caso eu chamei de tamIframe.

 

meu_conteudo.htm:

<body>
<div id="tamIframe">
Conteúdo da página que será visualizada no iframe de outra!
</div>

<script type="text/javascript">
function redimensionarIframe() {
var objIframe = parent.document.getElementById("conteudo");
var objTam = document.getElementById("tamIframe");
  	objIframe.style.height = (objTam.offsetHeight+50)+"px";
}  	
window.onload = redimensionarIframe;
</script>
</body>

 

Página que contém as tags iframe:

<iframe id="conteudo" marginWidth="0" marginHeight="0" src="meu_conteudo.htm" frameBorder="0" width="500px" scrolling="no"></iframe>