Ver Mensaje Individual
  #3 (permalink)  
Antiguo 06/03/2013, 08:18
alkuy7
 
Fecha de Ingreso: marzo-2013
Ubicación: Montevideo
Mensajes: 3
Antigüedad: 11 años, 8 meses
Puntos: 0
Respuesta: autoajustar tamaño de iframe

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.