autoajustar tamaño de iframe

hexen02 · #1 (**permalink**) 12/12/2012, 19:01

Hola amigos, tengo una duda, quisiera autoajustar un iframe que tengo en la pagina index de mi proyecto el cual se debe ajustar de acuerdo a su contenido (src), suena algo simple, pero el problema es que el src es estatico en el iframe, va variando dependiendo de la opcion que elijo en el menú (el cual tiene como href distintos archivos html de mi proyecto)

dejo el codigo de mi index.html (no se como copiarlo como codigo, porfa algun moderador que edite lo de abajo)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="ui-mobile ui-mobile-rendering" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Fervi-Ingas.cl · Servicios de Metalurgia</title>
<link rel="stylesheet" type="text/css" href="CSS/index_archivos/style.css">
<link href="CSS/index_archivos/css.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" id="style-css" href="CSS/index_archivos/diapo.css" type="text/css" media="all">
<script type="text/javascript" src="CSS/index_archivos/jquery_003.js"></script>
<script type="text/javascript" src="CSS/index_archivos/jquery_004.js"></script>
<script type="text/javascript" src="CSS/index_archivos/jquery.js"></script>
<script type="text/javascript" src="CSS/index_archivos/jquery_002.js"></script>
<script type="text/javascript" src="CSS/index_archivos/diapo.js"></script>

<script>
$(function(){
$('.pix_diapo').diapo();
});

</script>
</head>

<body>

<div id="header">
<div id="header_contenedor">
<img src="CSS/index_archivos/header.png" height="140" width="663">
</div>
</div>

<div id="menu_contenedor">
<div id="menu_detalle">
<img src="CSS/index_archivos/menu_izq.png" height="37" width="25">
</div>

<div id="menu_detalle2">
<img src="CSS/index_archivos/menu_der.png" height="37" width="25">
</div>

<div id="menubar">
<div id="menuh">
<ul>
<li><a href="PAGINAS/contenidoInicio.html" target="iframeContenido">Inicio</a></li>
<li><a href="PAGINAS/nosotros.html" target="iframeContenido">Nosotros</a></li>
<li><a href="PAGINAS/servicios.html" target="iframeContenido">Servicios</a></li>
<li><a href="PAGINAS/clientes.html" target="iframeContenido">Clientes</a></li>
<li><a href="PAGINAS/ingresar.html" target="iframeContenido">Administración</a></li>
<li><a href="PAGINAS/contacto.html" target="iframeContenido">Contacto</a></li>
</ul>
</div>
</div>
</div>

<iframe id="iframeContenido" name="iframeContenido" style="width:100%; " frameborder="0"></iframe>

<div id="footer">

<div id="footer_contenedor">

<div id="footer1">
<div class="isotipo">
<img src="CSS/index_archivos/fervi_ingas_isotipo.png" height="63" width="130">
</div>
fervi-ingas.cl <br>servicios <br> de metalurgia.
</div>

<div id="footer2">
Quinta Normal, Satiago, Chile<br>
Primera junta #546 (esq.zapala)<br>
Teléfono: (+54 11) 4281 - 4176<br>
Mail: [email protected]
</div>

<div id="footer3">
<a href="index.html" class="footer">Inicio</a><br>
<a href="PAGINAS/nosotros.html" class="footer">Nosotros</a><br>
<a href="PAGINAS/servicios.html" class="footer">Servicios</a><br>
</div>

<div id="footer4">
<a href="PAGINAS/clientes.html" class="footer">Clientes</a><br>
<a href="PAGINAS/login.html" class="footer">Administración</a><br>
<a href="PAGINAS/contacto.html" class="footer">Contacto </a></div>

</div>

</div>

</body>
</html>

de antemano, gracias :)

emprear · #2 (**permalink**) 13/12/2012, 10:36

Supongo que alguna de estas opciones te servirá

http://foros.emprear.com/javascript/autoajustar_iframe/

Saludos

alkuy7 · #3 (**permalink**) 06/03/2013, 08:18

Hola, hasta hace poco estuve viendo como podía solucionar este mismo problema y encontré en el foro una solución muy interesante y que funciona.

En este caso ajustaremos el Iframe a su contenido y ademas si el contenido es de dimensiones dinámicas entonces el Iframe variara con el contenido.

Primero utilizaremos el siguiente código de Java Script, el cual lo podemos poner en un js o en la misma pagina principal.

Código:

function ajustar_alto_iframe(iframe_name_id){
var el_Iframe = document.getElementById(iframe_name_id);
var iframeWindow = frames[iframe_name_id];
el_Iframe.style.height = "1px";
el_Iframe.style.height = iframeWindow.document.body.scrollHeight +"px";
}
    
function autoajustar_iframe(nueva_url, iframe_name_id){
var el_iframe = document.getElementById(iframe_name_id);
var cargar_function = function(){ajustar_alto_iframe(iframe_name_id);} 
if(el_iframe.readyState){ el_iframe.onreadystatechange = 
function() {if (el_iframe.readyState=="complete") cargar_function();}
}else{
el_iframe.onload = cargar_function;
}	
el_iframe.src = nueva_url;
}

function ajustar_desde_frame(alto, id_iframe){
document.getElementById(id_iframe).style.height = alto + 'px';
}

Luego podremos poner el siguiente código tanto en el body como en el mismo Iframe o en un boton que nos sirva para cargar el Iframe:

Código HTML:

<body onload="autoajustar_iframe('Terminales.aspx','I5');">

<iframe name="I5" id="I5" height="100%" width="100%" scrolling="no" border="0" frameborder="0">
El explorador no admite los marcos flotantes o no está configurado actualmente para mostrarlos.
</iframe>

Luego en la pagina que se va a cargar en el Iframe (en este caso "Terminales.aspx") debemos de incluir el siguiente script:

Código:

function obtener_alto(){
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}

y en el onloda del body o en un Form pondremos lo siguiente:

Código HTML:

onload="parent.ajustar_desde_frame(obtener_alto(),'I5');"

Espero sirva de algo.
Saludos.