mostrar y ocultar iframe

charlescuellar · #1 (**permalink**) 22/12/2010, 17:26

hola
tengo una duda, te un pagina php main.php esta tiene 2 iframe la idea es hacer q con un menu le indique cual se muestre y el otro se oculte espero me entiendan gracias

walterdevel · #2 (**permalink**) 22/12/2010, 17:38

Te paso un ejemplo:

Código HTML:

Ver original<iframe src="http://google.com" id="ifr1">
 
</iframe>

para ocultarlo

Código Javascript:

Ver original<script>
 
document.getElementById("ifr1").style.display="none";
</script>

para mostrarlo

Código Javascript:

Ver original<script>
 
document.getElementById("ifr1").style.display="block";
</script>

Panino5001 · #3 (**permalink**) 22/12/2010, 17:40

cla so tnés q pnerle 1 id a c/iframe i cambiar la prop css display de block a none usando el método getElementById

charlescuellar · #4 (**permalink**) 22/12/2010, 17:48

voy a checarlo a ahora comento

charlescuellar · #5 (**permalink**) 23/12/2010, 09:58

walterdevel como hago para activar la funcion que al darle click a un menu este me funcione disculpa es q soy algo nuevo

wjr · #6 (**permalink**) 23/12/2010, 12:10

haces esto:

Código Javascript:

Ver originalfunction toggleIfrm(id) {
if(document.getElementById(id).style.display=="block") {
  document.getElementById(id).style.display="none";
} else {
  document.getElementById(id).style.display="block";
}
 
}

el html

Código HTML:

Ver original<a href="javascript:toggleIfrm('ifr1')"> Toggle</a>

No lo probé, no se si está ok.

charlescuellar · #7 (**permalink**) 27/12/2010, 23:29

wjr esta bien tu codigo ya lo probe
pero como le hago para que los iframes al inicio no se muestren y cuando se le de click al menu este muestre uno ej ifr1 y al darle al otro menu se deshaparezca y salga el jfr2 espero me entienda gracias

charlescuellar · #8 (**permalink**) 29/12/2010, 16:57

amigos como le hago para que cuando se le de click a una menu me muestre el ifrema pero el otro se oculte?
que le falta al codigo que nos dio WJR

Cita:

Algadar · #9 (**permalink**) 30/12/2010, 09:46

Así te deberia funcionar.

Código:

<style type="text/css">
#apDiv1 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
}
</style>
</head>
<script type="text/javascript">
 function toggleIfrm(id) {
      if(document.getElementById(id).style.visibility=="hidden") {

        document.getElementById(id).style.visibility="visible";

      } else {

        document.getElementById(id).style.visibility="hidden";

      }

      }
 </script>
<body>
<form id="form1" name="form1" method="post" action="">
<div id="apDiv1" style="visibility:hidden">
  <iframe src="http://google.com" id="ifr1"  >
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  </iframe>
  </div>
  <p>&nbsp;  </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>
    <input type="button" name="button" id="button" value="Botón" onclick="toggleIfrm('apDiv1')" />
  </p>
</form>

charlescuellar · #10 (**permalink**) 05/01/2011, 13:26

Algadar gracias esta buena tu opcion pero si yo le pongo un menu css en vez de un boton este me cojeria si lo doy al li 1 muestre el if1 luego le del a li 2 y este oculte el if1 y muestre el if2 ??
y q guarde la posicion del iframa en la url he