Ajustar alto de iframe

Locky20 · #1 (**permalink**) 04/12/2011, 15:58

Bueno hace un tiempo estoy dandole vueltas a poder resolver lo de crear un iframe que se ajuste a la altura y ancho de una web automaticamente, por ahi cirulan un monton de trucos con javascript y demas pero ninguno es lo suficientemente "potente", ahora he encontrado una pagina que lo hace perfectamente y es la redireccion de taringa, por ejemplo si entramos a http://links.itaringa.net/go?http://download.mp3tag.de/mp3tagv243setup.exe el iframe se acomoda perfectamente y al navegar en la pagina huesped, el tamaño tambien se adecua perfectamente

del codigo fuente se puede sacar esto

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es" >
	<head profile="http://purl.org/NET/erdf/profile">
		<meta http-equiv="X-UA-Compatible" content="chrome=1" />
		<link rel="schema.dc" href="http://purl.org/dc/elements/1.1/" />
		<link rel="schema.foaf" href="http://xmlns.com/foaf/0.1/" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Este sitio no tiene relación con Taringa!</title>
		<link href="/links/style.css" rel="stylesheet" type="text/css" />

		<link rel="shortcut icon" href="http://o1.t26.net/images/favicon.ico" type="image/x-icon" />
		<link rel="apple-touch-icon" href="http://o1.t26.net/images/apple-icon.png" />
		<link rel="search" type="application/opensearchdescription+xml" title="Taringa!" href="http://www.taringa.net/lab/opensearch/taringa.xml" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">var x=location.href.split('?');u='';if(x.length>1){x.shift();u=x.join('?');if(!u.match(/^https?:\/\//))u=''}if(u.match(/^(?:.*?\.)?(?:i?taringa|poringa)\.net(?:\/.*)?$/))location.href=u</script>
	</head>
	<body>
		<div class="taringa-bar">

			<div class="taringa-wrapper ">
				<div class="taringa-logo floatL">
					<h1 onclick="location.href='http://www.taringa.net'">Taringa!</h1>
				</div>		
				<div class="share-bar floatL">
					<ul>
						<li class="twitter"><a class="icons16" onclick="location.href='http://twitter.com/?status='+location.href">Twitter</a></li>
						<li class="facebook"><a class="icons16" onclick="location.href='http://www.facebook.com/sharer.php?u='+location.href">Facebook</a></li>

					</ul>
				</div>
				<div class="floatL">
					<span class="caption">Este sitio no tiene relación con Taringa! No revele sus contraseñas.</span>
				</div>
				<a href="http://www.wiroos.com/" class="floatL" target="_blank" style="padding:10px 15px 9px 15px" title="Web Hosting - Alojamiento Web - WIROOS Internet Hosting">
					<img src="/links/wiroos.png" />
				</a>

				<div class="logout-bar floatR">
					<a class="icons16" onclick="location.href=document.getElementById('external').src"></a>
				</div>
			</div>
		</div>
		<iframe id="external" src="about:blank" frameborder="0"></iframe>
		<script type="text/javascript">if(u){alert('Usted está saliendo de Taringa!');document.getElementById('external').src=u}else{location.href='http://www.taringa.net'}$(window).bind('resize',function(){var f=document.getElementsByTagName('iframe')[0];f.style.height=(document.documentElement.clientHeight - f.offsetTop)+'px'});$(window).trigger('resize')</script>
	</body>

</html>

La parte interesante es del frame <iframe id="external" src="about:blank" frameborder="0"></iframe>

supongo entonces que el php esta influyendo pero no se me ocurre como?

Alguna idea

Salu2

maycolalvarez · #2 (**permalink**) 04/12/2011, 17:01

PHP es de lado del servidor y no influye para nada en el comportamiento del HTML del cliente

jorgelpadronb · #3 (**permalink**) 04/12/2011, 21:25

Cita:

Iniciado por maycolalvarez

PHP es de lado del servidor y no influye para nada en el comportamiento del HTML del cliente

Saludos amigo. Estoy de acuerdo contigo y a la vez no lo estoy. En este caso se nota que PHP no ha modificado los parámetros del iframe para lograr que se estire, pero eso de que PHP no tiene nada que ver con el HTML del cliente, es false. Vamos, que PHP puede generar parte o todo el HTML que le llega al cliente. Como no va a influir entonces?. Se puede perfectamente generar código HTML manipulado y acomodado desde PHP. Por ejemplo, y si yo calculo de antemano con PHP la altura del contenido que se va a mostrar, para luego generar un IFRAME con echo, poniéndole previamente el height requerido para que se adapte al contenido.

Si PHP genera el HTML, por supuesto que influye y mucho sobre el resultado final que le llega al cliente. Yo he probado incluso hasta generar código javascript desde PHP e incluirlo en la salida HTML del cliente. Y de esa forma se pueden hacer cosas más que interesantes.

Tal vez la idea de precalcular con PHP la altura del IFRAME sea una solución buena para este caso.

Saludos.

abrahamT · #4 (**permalink**) 04/12/2011, 23:27

Hola que tal usa jQuery Auto iFrame, espero y te ayude a mi si me fue útil.
https://github.com/house9/jquery-iframe-auto-height

Saludos.

emprear · #5 (**permalink**) 04/12/2011, 23:46

Cita:

Iniciado por jorgelpadronb

precalcular con PHP la altura del IFRAME sea una solución buena para este caso.

Precalcular con PHP? no lo veo viable

Cita:

https://github.com/house9/jquery-iframe-auto-height

He probado mas de 10 scripts para redimensionar automaticamente iframes y no encontré ninguna, que funcione correctamente en todos los navegadores (IE, FF, Opera, Chrome,Safari, al menos) Ni siquiera ese plugin de Jquery, si alguien tiene una demo que funcione correctamente, bienvenida sea
y para finalizar
@Locky20

Ese ejemlo que mostrás no usa ni javascript ni php ni redimensiona nada, simplemente tiene un css con

Código CSS:

Ver originaliframe {
    background:none repeat scroll 0 0 transparent;
    height:100%;
    position: relative;
    width:100%;
    z-index:1;
}

el height: 100%; resuelve la cuestion

Saludos

Locky20 · #6 (**permalink**) 05/12/2011, 00:17

Bueno primero gracias por responder, pense que el php tenia algo que ver teniendo una idea similar a la de jorgelpadronb, no habia visto el css pero antes probando otros scripts el height:100%; nunca me funcionaba o me daba resultados que no queria, tal vez algo estaria mal voy a volver a revisar

de todas maneras cualquier demo o prefabricado como el de taringa vendria de lujo para entenderlo mejor

Salu2

maycolalvarez · #7 (**permalink**) 05/12/2011, 07:16

Cita:

Iniciado por jorgelpadronb

Saludos amigo. Estoy de acuerdo contigo y a la vez no lo estoy. En este caso se nota que PHP no ha modificado los parámetros del iframe para lograr que se estire, pero eso de que PHP no tiene nada que ver con el HTML del cliente, es false. Vamos, que PHP puede generar parte o todo el HTML que le llega al cliente. Como no va a influir entonces?. Se puede perfectamente generar código HTML manipulado y acomodado desde PHP. Por ejemplo, y si yo calculo de antemano con PHP la altura del contenido que se va a mostrar, para luego generar un IFRAME con echo, poniéndole previamente el height requerido para que se adapte al contenido.

Si PHP genera el HTML, por supuesto que influye y mucho sobre el resultado final que le llega al cliente. Yo he probado incluso hasta generar código javascript desde PHP e incluirlo en la salida HTML del cliente. Y de esa forma se pueden hacer cosas más que interesantes.

Tal vez la idea de precalcular con PHP la altura del IFRAME sea una solución buena para este caso.

Saludos.

estás completamente errado, si muy bien puedes generar código HTML y JS desde PHP, cuando llega al navegador: PHP NO influye para nada en su comportamiento, además desde PHP NO puedes calcular el tamaño de los contenedores HTML porque ello está en el Cliente, a no ser que previamente envíes esos datos a PHP, por lo que en conclusión: PHP no influye en el comportamiento del HTML/Js del cliente, influye TU código generado, no PHP. Aclaremos conceptos.

por lo general el tema compete a JS y HTML, no a PHP, tal cual te indican los otros usuarios

Locky20 · #8 (**permalink**) 07/12/2011, 19:55

A ver pero sigue siendo un problema el height:100%; no funciona como lo hace el width:100%; entonces si es no con ayuda de php como lo hace taringa?

Salu2

Locky20 · #9 (**permalink**) 07/12/2011, 20:07

Olvidenlo la respuesta era este pedazo de code

<script type="text/javascript">var x=location.href.split('?');u='';if(x.length>1){x.s hift();u=x.join('?');if(!u.match(/^https?:\/\//))u=''}if(u.match(/^(?:.*?\.)?(?:i?taringa|poringa)\.net(?:\/.*)?$/))location.href=u</script>

maycolalvarez · #10 (**permalink**) 08/12/2011, 06:56

una forma de hacerlo es forzar el modo quirks del navegador, pero es una técnica no recomendable por los problemas que implica, la única forma es con JS, calculando el alto del cliente, como lo hacen FW como el viewport de ExtJS, entre otros.

jorgelpadronb · #11 (**permalink**) 11/12/2011, 02:01

Cita:

Iniciado por maycolalvarez

estás completamente errado, si muy bien puedes generar código HTML y JS desde PHP, cuando llega al navegador: PHP NO influye para nada en su comportamiento, además desde PHP NO puedes calcular el tamaño de los contenedores HTML porque ello está en el Cliente, a no ser que previamente envíes esos datos a PHP, por lo que en conclusión: PHP no influye en el comportamiento del HTML/Js del cliente, influye TU código generado, no PHP. Aclaremos conceptos.

por lo general el tema compete a JS y HTML, no a PHP, tal cual te indican los otros usuarios

Tal vez me malinterpretaste. Por supuesto que una vez que el HTML del cliente está en el navegador del usuario ya no puede ser manejado por PHP, eso es lógico y en eso estamos de acuerdo. A lo que yo me refiero es que los parámetros del HTML se pueden ajustar con PHP antes de que se envíen al cliente, influyendo así en el resultado final que le llega al usuario en su navegador. Una vez hecho esto ya PHP queda fuera del juego, pero puede llegar a influir mucho en como se va a comportar el resultado HTML final.

Sobre si el tema compete o no a PHP, tal vez tengas razón y sea más para HTML y JS. Solamente que hasta ahora no he visto que se resuelva con HTML ni JS, al menos no de forma eficiente. En tales casos no se debería desestimar ninguna opción, por poco ortodoxa que pueda parecer. Tal vez PHP no sea lo ideal para resolver este problema, pero dado que los más competentes (HTML y JS) no han logrado resolverlo, bueno pues queda a la imaginación de cada cual la posible solución. En CSS tampoco he visto solución para este problema y no es este el primer tema que se publica sobre el asunto. Después de tanta discución el tema sigue pendiente, de manera que a estas alturas cualquier solución es digna de ser valorada seriamente antes de desecharla por completo.

Saludos.