Foros del Web » Programando para Internet » Javascript »

Iframe que se autoajusta al contenido en altura

Estas en el tema de Iframe que se autoajusta al contenido en altura en el foro de Javascript en Foros del Web. Hola a todos, como están? Les cuento un poco mi problema: Encontré un código javascript que me funciona perfecto en Chrome y en Mozilla. Pero ...
  #1 (permalink)  
Antiguo 17/07/2013, 20:12
Avatar de polecat  
Fecha de Ingreso: diciembre-2003
Ubicación: Argentina
Mensajes: 391
Antigüedad: 20 años, 4 meses
Puntos: 0
Pregunta Iframe que se autoajusta al contenido en altura

Hola a todos, como están?

Les cuento un poco mi problema:

Encontré un código javascript que me funciona perfecto en Chrome y en Mozilla. Pero obviamente, trae problemas para IE9.

El código lo que hace es que un iframe crezca en alto de acuerdo al contenido que tiene. A mi me sirve, porque este iframe yo lo enmascaro para hacer un scroll con jQuery y adentro del iframe voy a tener contenido dinámico (que no se cuanto va a tener en altura, eso va a depender de cuantas cosas cargue el cliente). Si yo le pongo una altura fija y el contenido es menor, voy a tener todo un espacio scrolleable vacio y queda feo a la vista. Y si tiene más contenido del que yo le puse de alto, no se ve.

El codigo es este:

Código:
<script>
function resizeIframe(idIframe)
        {
        //Obtenemos el IFRAME a afectar
        var miIframe=document.getElementById(idIframe);
        //Calculamos el alto del contenido
        var alturaPagina=miIframe.contentWindow.document.body.scrollHeight+20;
        //Le asignamos la nueva altura
        miIframe.style.height=alturaPagina;
        }
</script>
En el iframe:

Código HTML:
<iframe id="iframeAutoajustable" src="algo.html" scrolling="no" width="100%" onLoad="resizeIframe(this.id)" frameborder="0"> 
Pregunta:
Alguien sabe como hacer para que este mismo codigo funcione también en IE?

Mil gracias!!!
__________________
Juan Manuel
Diseño web/Gráfico & Ilustración
E-mail: [email protected] / Skype: jmbosi
Portfolio: www.facebook.com/hacelobiendesign
  #2 (permalink)  
Antiguo 18/07/2013, 13:31
Avatar de polecat  
Fecha de Ingreso: diciembre-2003
Ubicación: Argentina
Mensajes: 391
Antigüedad: 20 años, 4 meses
Puntos: 0
Respuesta: Iframe que se autoajusta al contenido en altura

Por algun motivo, cuando guardé mi PHP en ANSI, este script dejo de funcionar.
Para mi fortuna encontré otro al que le pasa lo mismo. No funciona en IE.
Les dejo el codigo a ver si alguien puede darme una manito.

Código:
function doIframe(){
	o = document.getElementsByTagName('iframe');
	for(i=0;i<o.length;i++){
		if (/\bautoHeight\b/.test(o[i].className)){
			setHeight(o[i]);
			addEvent(o[i],'load', doIframe);
		}
	}
}

function setHeight(e){
	if(e.contentDocument){
		e.height = e.contentDocument.body.offsetHeight + 35;
	} else {
		e.height = e.contentWindow.document.body.scrollHeight;
	}
}

function addEvent(obj, evType, fn){
	if(obj.addEventListener)
	{
	obj.addEventListener(evType, fn,false);
	return true;
	} else if (obj.attachEvent){
	var r = obj.attachEvent("on"+evType, fn);
	return r;
	} else {
	return false;
	}
}

if (document.getElementById && document.createTextNode){
 addEvent(window,'load', doIframe);	
}
Código HTML:
<iframe id="myframe" name="myframe" class="autoHeight" scrolling="auto" frameborder="0" src="" width="730"></iframe> 
__________________
Juan Manuel
Diseño web/Gráfico & Ilustración
E-mail: [email protected] / Skype: jmbosi
Portfolio: www.facebook.com/hacelobiendesign

Etiquetas: altura, contenido, funcion, html, iframe, jquery
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:57.