Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

pauloca

mudar conteúdo usando iframe

Por , em Javascript

Recommended Posts

pauloca    0

pauloca
Postado

Bom dia

 

Eu sei que no fórum há vários posts sobre o assunto e já li alguns deles, mas não consegui resolver o meu problema. Por isso peço que tenham paciência e me ajudem a solucionar este problema.

Eu gostaria de ao selecionar uma opção em um menu mudar o conteúdo de um iframe.

Criei um código bastante simples e básico para fazer alguns testes. Neste código há um menu com três opções que ao serem selecionadas deveriam mudar o conteúdo do iframe na div conteúdo.

Se alguém puder fazer as correções necessárias ficarei muito agradecido.

 

<html>  <head>	<title>  </title>	<style type="text/css">	<!--	#corpo {	text-align:center;	}	#geral {	position:relative;	width:100%;	margin:auto;	background:#f00;	}	#topo {	height:50px;	background:#0f0;	}	#menu {	width:150px;	float:left;	background:#00f;	}	#lateral {	float:right;	width:150px;	background:#0ff;	}	#conteudo {	margin:auto;	background:#ff0;	}	#rodape {	clear:left;	height:50px;	background:#f0f;	}	-->	</style>  </head>  <body id="corpo">	<div id="geral">	  <div id="topo">		topo	  </div>	  <div id="menu">		<ul>		  <li> <a href="pagina01.htm" target="pagina01" title="pagina01"> pagina01 </a> </li>		  <li> <a href="pagina02.htm" target="pagina02" title="pagina02"> pagina02 </a> </li>		  <li> <a href="pagina03.htm" target="pagina03" title="pagina03"> pagina03 </a> </li>		</ul>	  </div>	  <div id="lateral">		lateral	  </div>	  <div id="conteudo">		<iframe name="pagina01" frameborder="1" width="200px" height="500px" marginheight="0" src="pagina01.htm"></iframe>		<iframe name="pagina02" frameborder="1" width="200px" height="500px" marginheight="0" src="pagina02.htm"></iframe>		<iframe name="pagina03" frameborder="1" width="200px" height="500px" marginheight="0" src="pagina03.htm"></iframe>	  </div>	  <div id="rodape">		rodape	  </div>	</div>  </body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

pauloca    0

pauloca
Postado

PKTIAGO Agradeço por ter respondido. O problema é que os três iframes aparecem ao mesmo tempo e eu gostaria que cada um deles apareça apenas quando uma opção no menu for selecionada.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Poe    0

Poe
Postado

Então, isso você vai ter que fazer com programação JavaScript básica. Mas acho que dá pra fazer algo similar só com CSS, mas se você colocar o conteúdo em camadas (DIV) distintas. Vou dar uma procurada e ver se acho algo, mas acho que o principio é o mesmo de menus com sub-itens (árvores).

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado

Assim:

 

CSS

 

.oculto{	display: none;}
função

 

function teste(div){	for(var i = 0; i < 3; i++)	{		if(document.getElementById("teste" + [i]) == div)		{			div.style.display = "block";		} 		else		{			document.getElementById("teste" + [i]).style.display = "none";		}	}}
html

 

<a href="#" onClick="teste(document.getElementById('teste0'));" title="pagina01">1</a><br/><a href="#" onClick="teste(document.getElementById('teste1'));" title="pagina02">2</a><br/><a href="#" onClick="teste(document.getElementById('teste2'));" title="pagina03">3</a><br/><div id="teste0" class="oculto">Teste1</div><div id="teste1" class="oculto">Teste2</div><div id="teste2" class="oculto">Teste3</div>
PS: gio! transfere ele para JavaScript, acho que tem mais a ver e pode ajudar outros...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Poe    0

Poe
Postado

Opa, PKTiago, eu já vi isso feito SÓ com CSS. Pode deixar aqui. Eu coloquei outro dia uma solução parecida com a sua em JScript, mas eu JURO que vi em CSS. É isso que preciso achar. rs

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado

opa só com CSS, bom saber ai não tenho que ficar me preocupando com o javascript-não-obstrutivo...Pois o que fiz é um exemplo banal, e com o Javascript desacionado nada vai funcionar!Se achar posta pra gente...

Compartilhar este post

Link para o post
Compartilhar em outros sites

pauloca    0

pauloca
Postado

Encontrei algo que resolveu parte do meu problema. Abaixo vai o link onde encontrei a solução.

 

Fórum Tableless

 

Abaixo o código.

 

<html>  <head>	<title>  </title>	<style type="text/css">	<!--	#corpo {	text-align:center;	}	#geral {	position:relative;	width:100%;	margin:auto;	background:#f00;	}	#topo {	height:50px;	background:#0f0;	}	#menu {	width:150px;	float:left;	background:#00f;	}	#lateral {	float:right;	width:150px;	background:#0ff;	}	#conteudo {	margin:auto;	background:#ff0;	}	#rodape {	clear:left;	height:50px;	background:#f0f;	}	-->	</style>  </head>    <body id="corpo">	<div id="geral">		  <div id="topo">		topo	  </div>	  	  <div id="menu">		<ul>		  <li> <a href="pagina01.htm" target="conteudo" title="pagina01"> pagina01 </a> </li>		  <li> <a href="pagina02.htm" target="conteudo" title="pagina02"> pagina02 </a> </li>		  <li> <a href="pagina03.htm" target="conteudo" title="pagina03"> pagina03 </a> </li>		</ul>	  </div>	  	  <div id="lateral">		lateral	  </div>	  	  <div id="conteudo">		<iframe name="conteudo" frameborder="1" width="100%" height="500px" marginheight="0" src="pagina01.htm"></iframe>	  </div>	  <div id="rodape">		rodape	  </div>	  	</div>  </body></html>

O problema agora é o seguinte:

Quando coloco width="100%" no iframe, no FF a div onde o iframe está sai da posição dela e no IE ao clicar em algum link o iframe encobre a div à direita.

Compartilhar este post

Link para o post
Compartilhar em outros sites

lima2014    0

lima2014
Postado

Por que não funciona para webmail? tipo quanto coloco para ir para o webmail ele abre outra pagina e nao mante a mesma como faz com site.

fiz tambem a seguinte modificação NO CODIGO ABAIXO E TESTEI NO no IE 7 E FIREFOX 3.6.3 ABRIU MUITO BEM MAIS NO CROMO DEU O SEGUINTE PROBLEMA ELE ABRE UMA OUTRA JANELA OQUE POSSO FAZER PARA CORRIGIR ISSO

 

 

<html>

 

<head>

<title> Ifreme </title>

 

</head>

 

<body >

<ul>

<li> <a href="http://www.eternalam.com.br" target="conteudo" title="pagina01"> Eternal </a> </li>

<li> <a href="http://www.fortlub.com.br" target="conteudo" title="pagina02"> Fortlub </a> </li>

<li> <a href="http://www.uol.com.br" target="conteudo" title="pagina03"> Uol </a> </li>

<li> <a href="http://www.google.com" target="conteudo" title="pagina04"> Google</a> </li>

<li> <a href="http://www.folhamatic.com.br" target="conteudo" title="pagina05"> Folhamatic</a> </li>

 

</ul>

<table align="center" width="800" >

<tr>

<td>

 

<iframe name="conteudo" frameborder="1" width="100%" height="500px" marginheight="0" ></iframe>

</td>

</tr>

</table>

</html>

 

 

 

mais mesmo assim esta muito bom seu codigo fonte...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito