Foros del Web » Programando para Internet » Javascript »

Ajustar alto de iframe

Estas en el tema de Ajustar alto de iframe en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/12/2011, 15:58
Avatar de Locky20  
Fecha de Ingreso: octubre-2011
Mensajes: 9
Antigüedad: 10 años, 1 mes
Puntos: 0
Ajustar alto de iframe

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
  #2 (permalink)  
Antiguo 04/12/2011, 17:01
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 13 años, 4 meses
Puntos: 1532
Respuesta: Iframe con php

PHP es de lado del servidor y no influye para nada en el comportamiento del HTML del cliente
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 04/12/2011, 21:25
Avatar de jorgelpadronb  
Fecha de Ingreso: agosto-2011
Ubicación: Cuba
Mensajes: 281
Antigüedad: 10 años, 3 meses
Puntos: 37
Respuesta: Iframe con php

Cita:
Iniciado por maycolalvarez Ver Mensaje
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.
__________________
Los hombres pequeños, nunca se sienten pequeños; los hombres grandes, nunca se sienten grandes.

No sé quien fué el que dijo eso, pero está bueno.
  #4 (permalink)  
Antiguo 04/12/2011, 23:27
 
Fecha de Ingreso: noviembre-2011
Mensajes: 18
Antigüedad: 10 años
Puntos: 1
Respuesta: Iframe con php

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.
  #5 (permalink)  
Antiguo 04/12/2011, 23:46
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 14 años, 5 meses
Puntos: 1567
Respuesta: Iframe con php

Cita:
Iniciado por jorgelpadronb Ver Mensaje
precalcular con PHP la altura del IFRAME sea una solución buena para este caso.
Precalcular con PHP? no lo veo viable


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 original
  1. iframe {
  2.     background:none repeat scroll 0 0 transparent;
  3.     height:100%;
  4.     position: relative;
  5.     width:100%;
  6.     z-index:1;
  7. }

el height: 100%; resuelve la cuestion

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 05/12/2011, 00:17
Avatar de Locky20  
Fecha de Ingreso: octubre-2011
Mensajes: 9
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: Iframe con php

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
  #7 (permalink)  
Antiguo 05/12/2011, 07:16
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 13 años, 4 meses
Puntos: 1532
Respuesta: Iframe con php

Cita:
Iniciado por jorgelpadronb Ver Mensaje
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
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #8 (permalink)  
Antiguo 07/12/2011, 19:55
Avatar de Locky20  
Fecha de Ingreso: octubre-2011
Mensajes: 9
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: Ajustar alto de iframe

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
  #9 (permalink)  
Antiguo 07/12/2011, 20:07
Avatar de Locky20  
Fecha de Ingreso: octubre-2011
Mensajes: 9
Antigüedad: 10 años, 1 mes
Puntos: 0
Respuesta: Ajustar alto de iframe

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>

  #10 (permalink)  
Antiguo 08/12/2011, 06:56
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 13 años, 4 meses
Puntos: 1532
Respuesta: Ajustar alto de iframe

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.
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #11 (permalink)  
Antiguo 11/12/2011, 02:01
Avatar de jorgelpadronb  
Fecha de Ingreso: agosto-2011
Ubicación: Cuba
Mensajes: 281
Antigüedad: 10 años, 3 meses
Puntos: 37
Respuesta: Iframe con php

Cita:
Iniciado por maycolalvarez Ver Mensaje
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.
__________________
Los hombres pequeños, nunca se sienten pequeños; los hombres grandes, nunca se sienten grandes.

No sé quien fué el que dijo eso, pero está bueno.

Última edición por jorgelpadronb; 11/12/2011 a las 02:22

Etiquetas: html, iframe, php
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 10:55.