2011-06-11 11 views
6

Estaba como en cada pregunta sobre esto en la red, intenté como 50 métodos de diferencia, primero intenté desplazar el div - luego, cuando no funcionó, intenté iframear el archivo con el div y desplazar el iframe ... ¡nada solo funciona!Cómo desplazar un iframe a la parte inferior cuando se carga la página?

Mirada en el último guión que han puesto en marcha:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
var t = 100; //arbitrary time in ms 
$("#frame").animate({ scrollTop: $("#frame").height()}, t); 
}); 
</script> 

<center><iframe id="frame" src="xxx.php" frameborder="0" width="630px" height="500px"></iframe></center> 

He intentado tanto #frame y el marco sin el (#), ambos con (documento) ready y sin ella. Nada parece funcionar en la página y me está volviendo loco.

Gracias. :)

+0

¿Es el iframe en el mismo dominio que su matriz? –

+0

El iframe funciona, el desplazamiento hacia abajo no funciona. Es una pregunta jQuery, no una HTML :) (sí, está en el mismo dominio). – Ricardo

Respuesta

13

Con jQuery necesita usar .contents() para acceder a lo que haya dentro del iframe. También necesita usar el evento de carga de la ventana o el evento listo para el documento del iframe.

$(window).load(function() 
{ 
    var $contents = $('#frame').contents(); 
    $contents.scrollTop($contents.height()); 
}); 

Demostración: http://jsbin.com/ujuci5/2


recomendaría ir de nuevo a la estructura div usted ha mencionado, ya que suena como lo que estamos tratando de hacer, no requiere un iframe. Descubrirá que es mucho menos dolor de cabeza trabajar con un div que con un iframe.

$(function() 
{ 
    var $mydiv = $('#mydiv'); 
    $mydiv.scrollTop($mydiv.height()); 
}); 

Demostración: http://jsbin.com/ujusa4/2


cómo puedo poner en marcha la función de desplazamiento como 3 segundos después de que se carga la página?

Use setTimeout.

$(window).load(function() 
{ 
    setTimeout(function() 
    { 
     var $contents = $('#frame').contents(); 
     $contents.scrollTop($contents.height()); 
    }, 3000); // ms = 3 sec 
}); 
+0

Gracias, pero parece que necesito ejecutar la función solo después de 1-2 segundos porque hay una caja de gritar y tarda unos 1-2 segundos antes de que se cargue, por lo que básicamente baja y luego se carga el grito y sube de nuevo, ¿alguna sugerencia? – Ricardo

+0

¿Qué shoutbox estás usando? Lo ideal es que pueda pasar una devolución de llamada al shoutbox que se ejecuta después de que se cargue el shoutbox. –

+0

Yshout 5.(

1

Si el documento actual está listo, esto significa que el DOM está listo, pero el documento dentro del marco flotante tiene que ser cargado también.

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#frame").load(function(){this.contentWindow.scrollBy(0,100000)}); 
}); 
</script> 
+0

Gracias, esto es exactamente lo que le pedí en el comentario a Matt Ball, sin embargo, como dije, hay un cuadro de diálogo que carga 1-2 segundos después, de todos modos su código tampoco funcionó. : \ – Ricardo

+1

Así que eche un vistazo a la documentación de YShout y busque si existe la posibilidad de utilizar una función de devolución de llamada cuando se haya cargado el shoutbox. Si es así, llame a 'window.scrollBy (0,100000)' –

4

Si tiene acceso al código fuente de los contenidos de iframe, un truco fácil es añadir un < un nombre = 'fin' > & nbsp; (o la última línea de su contenido) </a > (no estoy seguro si realmente necesita algo en la etiqueta <a>).

Agregue #end a la fuente iframe, p. Ej.

http://www.yourdomain.com/file.php#end 

y se desplazará automáticamente hasta el final, sin Javascript/jQuery requiere

+0

Esta es una buena solución, pero creo que puede ser cualquier elemento (span, div, a, etc.) con el atributo 'id =" end "' – jperelli

Cuestiones relacionadas