Barra de scroll en iframes y más

Kikokeko · #1 (**permalink**) 28/04/2008, 06:46

Hola, estoy probando los iframes.

En le caso http://www.circuitoriasbaixas.com/archivo.htm, ¿como puedo hacer para el iframe se adapte al contenido sin que aparezca la barra de scroll?

Y al cargar la pagina ¿qué puedo hacer para que el iframe carge con algún vinculo?.

A ver si de esta me responde alguien

Un saludo

bookmaster · #2 (**permalink**) 28/04/2008, 18:50

Siento comunicarte que los iframes no se ajustan al tamaño del contenido, porque no se sabe realmente que página se va a mostrar ni cuanto va a ocupar hasta que no está cargada por completo.

Los iframes hay que darles unas medidas fijas, o forzarlas por medio de JavaScript, pero el JavaScript no reconoce el tamaño del contenido, sino de la ventana donde lo vas a ubicar, por lo que puedes hacerle que se ajuste dependiendo de la resolución.

Sobre lo de cargar un enlace dentro del iframe se hace por medio del ID, de la siguiente manera:

Código HTML:

<p>
Ejemplo del Enlace:<br />
<a href="http://www.maestrosdelweb.com" target="NombreIframe">Texto del enlace</a><br />
</p>
<p>
Ejemplo del iframe:<br />
<iframe name="NombreIframe" src="http://www.forosdelweb.com" style="width:500px; height:600px"></iframe>
</p>

Ejemplo: http://fdw.lohacemosweb.net/Iframe2.php

Chucky_vlc84 · #3 (**permalink**) 28/04/2008, 19:33

Yo tengo un problema parecido, yo si se el tamaño de la ventana q se va a abrir, y ya no tengo la barra de desplazamiento lateral, pero la de vertical no hay manera de quitarla

www.seriousteam.es/foro.html (aun me falta cambiar el theme del foro)

Por mucho tamaño que le añada, la barra vertical siempre permaneze ahi

Hay alguna manera de quitarla ???

bookmaster · #4 (**permalink**) 28/04/2008, 19:57

Agregas esto y las barras desaparecen: scrolling="no".

Quedándose una cosa así:

Código HTML:

<iframe name="NombreIframe" src="http://www.forosdelweb.com" style="width:500px; height:600px;" scrolling="no"></iframe>

Solo tienes una pega en ese caso, que sin barras no podrás moverte bien por el frame interior y en tu caso Chucky_vlc84 al ser un foro no estaría de mas que salieran.

Mikmoro · #5 (**permalink**) 29/04/2008, 02:30

Cita:

Iniciado por Chucky_vlc84

Yo tengo un problema parecido, yo si se el tamaño de la ventana q se va a abrir, y ya no tengo la barra de desplazamiento lateral, pero la de vertical no hay manera de quitarla

www.seriousteam.es/foro.html (aun me falta cambiar el theme del foro)

Por mucho tamaño que le añada, la barra vertical siempre permaneze ahi

Hay alguna manera de quitarla ???

Para que no aparezca la barra de scroll, en el archivo que se carga dentro simplemente quítale todo el doctype que tenga y lo encabezas simplemente <html>...

</html>

Pruébalo.

Mikel.

bookmaster · #6 (**permalink**) 29/04/2008, 04:03

Mikmoro eso que dices tu tiene un problema, que no sabes si la página que se va a mostrar el tiene acceso al código o no, poniendo el scrolling="no", si quita independientemente de la página que sea.

De echo si miras el enlace de ejemplo que puse puedes verlo con barras y sin barras.
http://fdw.lohacemosweb.net/Iframe2.php

Kikokeko · #7 (**permalink**) 29/04/2008, 08:09

Hola a todos. Bookmaster muchas gracias por tu ayuda. Me ha venido muy bien el código para que un Iframe se cargue con determinado vinculo. En lo referente al tamaño del Iframe he encontrado en varios sitios

1.- Declaramos una función javascript como la siguiente:
function resizeIframe(idIframe)
{
var miIframe=document.getElementById(idIframe);
var alturaPagina=miIframe.contentWindow.document.body. scrollHeight+20;
miIframe.style.height=alturaPagina;
}

2.- Al iframe le colocamos el atributo onLoad="resizeIframe(this.id)"

Este ejemplo solo funciona con vinculos que estén en el mismo dominio.

(http://www.livinbride.com/foro/showThread.php?id=1426#msg1426)

Yo incluso he visto algún ejemplo, pero no localizo la página para que la veais. Pero cada vez que lo intento me abre el vínculo en otra página, y eso que: target="iframe"

Tambien he encontrado esto en Ajax:

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True"></asp:ScriptManager><script type="text/javascript">var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_endRequest(Redimensionar);onload = function Redimensionar(sender,art){top.window.document.getE lementById("demoFrame").height = document.getElementById("aspnetForm").offsetHeight ;top.window.document.getElementById("demoFrame").w idth = document.getElementById("aspnetForm").offsetWidth; }</script>
Tenemos que activar la propiedad EnablePageMethods="True" he instanciar la clase PageRequestManager para utilizarla.
var prm = Sys.WebForms.PageRequestManager.getInstance();
Asociamos el evento que nos interesa a una función javascript
prm.add_endRequest(Redimensionar);
Creamos el script que redimensionará el iFrame.
Para probar el código he creado un proyecto que utiliza una página con un iframe y un update panel.
<iframe frameborder="0" id="demoFrame" marginheight="0" marginwidth="0" scrolling="no" src="Pagina1.aspx"> </iframe> Al clicar el botón se aplica un bucle que aumenta el tamaño de la página.
Muy importante este ejemplo solo funciona con páginas dentro del mismo Dominio como muy bien lo explican en el primer link de Microsoft.

(http://geeks.ms/blogs/mrubino/archive/2007/08/22/iframe-redimensionable-con-ajax-net.aspx)

De momento no lo he intentado, tengo que leer un poquito más, pues no se si puedo implementarlo así por las buenas.

De todos modos bookmaster, muchas gracias :)

bookmaster · #8 (**permalink**) 29/04/2008, 11:16

Curioso el script para que se re dimensione aunque sea dentro del mismo dominio, me lo apunto para otra ocasión :)

PD.: He actualizado el ejemplo con el script que has puesto ;)

Mikmoro · #9 (**permalink**) 29/04/2008, 11:51

Cita:

Iniciado por bookmaster

Mikmoro eso que dices tu tiene un problema, que no sabes si la página que se va a mostrar el tiene acceso al código o no, poniendo el scrolling="no", si quita independientemente de la página que sea.

De echo si miras el enlace de ejemplo que puse puedes verlo con barras y sin barras.
http://fdw.lohacemosweb.net/Iframe2.php

Ah, perfecto.

Recuerdo que alguna vez tuve ese problema y el scrolling="no" no me funcionaba (no sé a qué se debería, quizá al script que usaba, no recuerdo), y lo solucioné de la manera que he puesto.

Si en este caso funciona bien, pues todos tan contentos

Mikel.

Kikokeko · #10 (**permalink**) 29/04/2008, 17:59

bookmaster he visto el ejemplo que has puesto y he empezado a depilarme la frente con el canto de la mesa. He revisado el código de la muestra y aun no se que hago mal... posteo el código a ver si encuentras algo que yo no veo, porque al darle al vinculo para abrir en el iframe, lo abre, pero no varía el tamaño.

<head>
<title>mi pagina</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
function resizeIframe(idIframe){
var miIframe=document.getElementById(idIframe);
var alturaPagina=miIframe.contentWindow.document.body. scrollHeight+20;
miIframe.style.height=alturaPagina;
}
</script>
</head>
<body>
<table width="804" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
<td height="133" colspan="5"> </td>
<td><img src="images/spacer.gif" width="1" height="120" border="0" alt="" /></td>
</tr>
<tr>
<td width="100"><div class="Estilo3 Estilo7" id="Fecha">
<div align="center" class="Estilo8">
<div align="right">
</div>
</div>
</div>
</td>
<td width="78"> </td>
<td width="7"> </td>
<td colspan="2"> </td>
<td><img src="images/spacer.gif" width="1" height="19" border="0" alt="" /></td>
</tr>
<tr>
<td height="16" colspan="5" bgcolor="#000000"> </td>
<td><img src="images/spacer.gif" width="1" height="14" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="3" valign="top" bgcolor="#000000"><p align="center" class="Estilo19">Los archivos</p>
<p align="center" class="Estilo8"><a href="http://www.mipagina.com/archivos/abril.html" target="NombreIframe1">Abril</a></p>
<p align="center" class="Estilo21"> </p>
<p align="center"> </p>
</td>
<td width="12" valign="top" bgcolor="#000000"><p align="center" class="Estilo8 Estilo9"> </p>
<p align="center" class="Estilo19 Estilo20">  </p>
<p align="center" class="Estilo19"> </p> </td>
<td width="490" valign="top" bordercolor="#000000" bgcolor="#000000"><p align="center" class="Estilo8 Estilo9">
<iframe name="NombreIframe1" scrolling="no" id="NombreIframe1" style="width:350px; height:300px; float:left;" onLoad="resizeIframe(this.id);"></iframe>
</p>
<td> </td>
</tr>
</table>
</body>
</html>

Muchas gracias.

kali-mero · #11 (**permalink**) 29/04/2008, 20:51

Yo he conseguido que el iframe se adapte al contenido poniendo el iframe dentro de un div.

Pero solo me funciona en internet explorer. Estaba buscando respuestas a ver si alguien sabía como hacerlo en Firefox. Y por todo lo que llevo buscado creo que tendré que utilizar javascript para redimensionar dinámicamente. Solo que por ahora tampoco he conseguido que me funcione bien ningún script. El tuyo bookmaster tampoco,... estoy en ello...

bookmaster · #12 (**permalink**) 30/04/2008, 03:36

Ese falo lo he detectado yo también, en Internet Explorer estando los 3 iframes juntos si que se cambia de tamaño, en el Firefox solo lo hace la primera vez. Sin en cambio si ponemos el iframe que cambia de tamaño el solo en otro archivo si que lo hace bien, y me tiene un poco desconcertado.

PD.: De todas formas en el código que estás poniendo la ruta es Absoluta y no relativa al sitio.
<a href="http://www.mipagina.com/archivos/abril.html" target="NombreIframe1">

Lo suyo sería ponerlo:

Código HTML:

<a href="archivos/abril.html" target="NombreIframe1">

Y no se si te lo has comido o algo, pero no tienes puesto los SRC en el Iframe

Cita:

Kikokeko · #13 (**permalink**) 30/04/2008, 10:20

¡GRACIAS BOOKMASTER!

Era que ponia la ruta absoluta

En cuanto al scr del iframe no lo pongo a posta, por que en el iframe tiene verse los vinculos como el que ponía mal. Si pongo un scr lo vinculo directamente a un archico, ¿no?

Te debo una cervecita jeje

bookmaster · #14 (**permalink**) 30/04/2008, 12:32

Lo normal seria ponerle un SRC para que apunte a alguna página la primera vez que entras, pero vamos si no lo pones no creo que pase nada raro.