iframe dinamico

doctorcito · #1 (**permalink**) 05/08/2012, 18:59

hola, tengo div y dentro tengo un iframe en el que cargo varias paginas llamandolas con links, los mismos links llaman a una funcion java para mostrar el div como si fuera un popup. el contenido de cada pagina varia en su altura, quisiera un codigo javascript que me permita con el mismo link que muestra al div, modificar el alto del iframe.

Encontre un codigo que se asemeja pero solo funciona cuando se carga el iframe desde la pagina raiz, yo quiero que el iframe cambie cuando seleccione un link distinto sin que la pagina raiz se refresque

Aqui les pongo el codigo para me entiendan un poco, no pongo la funcion de redimencion porq no funciona, pero dejo el codigo de las paginas con dimenciones distintas que se cargan en el iframe.
y por ultimo dejo una altura fina en el iframe, cosa que quiero cambiar, por lo cual estoy pidiendo ayuda

Javascript

Código HTML:

<script type="text/javascript">
function cambiarestilo1(){
	var botoncierra= document.getElementById("botoncierra1");
	var ventanaflotante= document.getElementById("ventanaflotante1");
	if(botoncierra.onclick){
		ventanaflotante.className="ventanaflotantecerrada";
	}
} 
/***************************************************************************/

/*************************mostrar ventanas**********************************/
function cambiarestiloshow1(){
	var botoncierra= document.getElementById("botoncierra1");
	var ventanaflotante= document.getElementById("ventanaflotante1");
	if(botoncierra.onclick){
		ventanaflotante.className="ventanaflotante";
	}
} 
</script>

css

Código HTML:

<style type="text/css">
.ventanaflotantecerrada{
	display: none;
}


.ventanaflotante {
	height: 100%;
	width: 100%;
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	display: block;
	z-index: 300;
	background-color: rgba(0,0,0,.7);
}
a.cierra{color:white;}
</style>

pagina principal

Código HTML:

<p><a href="pagina1.html" target="popups" onclick="cambiarestiloshow1()">link1</a></p>
<p><a href="pagina2.html" target="popups" onclick="cambiarestiloshow1()">link2</a></p>
<p><a href="pagina3.html" target="popups" onclick="cambiarestiloshow1()">link3</a></p>
<!---------------------Popup----------------------->
<div id="ventanaflotante1" class="ventanaflotantecerrada">
  <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="center" valign="middle">
        <a href="pagina1.html" target="popups" id="botoncierra1" class="cierra" onclick="cambiarestilo1()">cerrar ventana</a><br /><br />
        <iframe id="popups" name="popups" width="400" height="500" src="pagina1.html" frameborder="0" scrolling="auto"></iframe>
      </td>
    </tr>
  </table>
</div>
<!---------------------Popup----------------------->

pagina1

Código HTML:

<html>
<head>
  <title>pagina 1</title>
</head>
<body>
contenido
<table height="50">
  <tr>
    <td>contenido</td>
  </tr>
</table>
</body>
</html>

pagina2

Código HTML:

<html>
<head>
  <title>pagina 2</title>
</head>
<body>
contenido
<table height="150">
  <tr>
    <td>contenido</td>
  </tr>
</table>
</body>
</html>

pagina3

Código HTML:

<html>
<head>
  <title>pagina 3</title>
</head>
<body>
contenido
<table height="300">
  <tr>
    <td>contenido</td>
  </tr>
</table>
</body>
</html>

como veran en las paginas 1, 2 y 3 la altura varia por la tabla, mas o menos eso es lo que tengo para poder variar el contenido de cada pagina.

Gracias por la ayuda de antemano