Desplazamiento de un iframe con JavaScript?

Cargo dinámicamente un iframe con JavaScript. Después de que se carga, ¿cómo puedo hacer que desplazarse hacia abajo un número específico de píxeles (es decir. Después de la página en el iframe se haya cargado, ¿cómo puedo hacer que el desplazamiento de marco flotante por sí mismo a la una región determinada de la página?)Desplazamiento de un iframe con JavaScript?

Fuente

2009-07-28 rawrrrrrrrr

utilizar la propiedad scrollTop del contenido del marco para establecer vertical del contenido de desplazamiento offset a un número específico de píxeles (como 100):

<iframe src="foo.html" onload="this.contentWindow.document.documentElement.scrollTop=100"></iframe>

Fuente

2009-08-04 20:42:49

¿Hay algo para horizontal – Rafee

para horizontal, use scrollLeft en lugar de scrollTop –

MUCHAS GRACIAS! ¡Estuve trabajando demasiado tiempo tratando de hacer que esto funcione! –

Usted puede utilizar el evento onload para detectar cuando el iframe ha terminado de cargar, y allí puede usar la función scrollTo en el contentWindow del iframe, para desplazarse a una posición definida de píxeles, desde la izquierda hasta la parte superior (x, y):

var myIframe = document.getElementById('iframe'); 
myIframe.onload = function() { 
    myIframe.contentWindow.scrollTo(xcoord,ycoord); 
}

Puede consultar un ejemplo de trabajo here.

Nota: Esto funcionará si ambas páginas residen en el mismo dominio.

Fuente

2009-08-04 20:53:46 CMS

Entonces, si las páginas no están en el mismo dominio, ¿esto no funcionará? – vimist

@ Chief17 - eso es, violaría la misma política de dominio para Javascript. –

+1 muy simple, javascript –

solución A jQuery:

$("#frame1").ready(function() { 

    $("#frame1").contents().scrollTop($("#frame1").contents().scrollTop() + 10); 

});

Fuente

2010-10-25 13:58:31

Inspirado por Nelson comentario que hice esto.

Solución para Javascript política del mismo origen con respecto al uso de .ScrollTo() en el documento se origina en un dominio externo.

Un trabajo muy simple para esto implica la creación de una página html ficticia que aloja el sitio web externo dentro de ella, y luego llama a .ScrollTo (x, y) en esa página una vez cargada. Entonces, lo único que debe hacer es tener un marco o un iframe para abrir este sitio web.

Hay muchas otras maneras de hacerlo, esto es, con mucho, la forma más simplificada para hacerlo.

* cuenta la altura debe ser grande para acomodar las barras de desplazamiento máximo valor.

--home.htm

<html> 
<head> 
<title>Home</title> 
</head> 

<frameset rows="*,170"> 
<frame src=body.htm noresize=yes frameborder=0 marginheight=0 marginwidth=0 scrolling=no> 
<frame src="weather.htm" noresize=yes frameborder=0 marginheight=0 marginwidth=0 scrolling=no> 
</frameset> 
</html>

--weather.htm

<html> 
<head> 
<title>Weather</title> 
</head> 

<body onLoad="window.scrollTo(0,170)"> 

<iframe id="iframe" src="http://forecast.weather.gov/MapClick.php?CityName=Las+Vegas&state=NV&site=VEF&textField1=36.175&textField2=-115.136&e=0" height=1000 width=100% frameborder=0 marginheight=0 marginwidth=0 scrolling=no> 
</iframe> 

</body> 
</html>

Fuente

2012-01-18 06:20:25 Greg

ser posible cambiar dinámicamente src of weather.htm con esto? como en "www.google.com" o "www.yahoo.com", etc.? – user1869558

jsFiddle demo [aquí] (http://jsfiddle.net/mblase75/ktRr6 /) – Blazemonger

La combinación de esta respuesta y la respuesta anterior es increíblemente astuta. – merlin2011

O bien, se puede establecer un margen superior en el marco flotante ... un poco de un truco, pero las obras en FF hasta ahora.

#frame { 
margin-top:200px; 
}

Fuente

2013-07-12 16:26:09 mostlyliquid

-1

var $iframe = document.getElementByID('myIfreme'); 
var childDocument = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document; 
childDocument.documentElement.scrollTop = 0;

Fuente

2013-11-07 23:42:45 user2958869

Esta respuesta se ha marcado como de baja calidad por su longitud y contenido. Hágalo más aplicable al OP. – paqogomez

Basado en Chris's comment

CSS

.amazon-rating { 
    width: 55px; 
    height: 12px; 
    overflow: hidden; 
} 

.rating-stars { 
    left: -18px; 
    top: -102px; 
    position: relative; 
}

HAML

.amazon-rating 
    %iframe.rating-stars{src: $item->ratingURL, seamless: 'seamless', frameborder: 0, scrolling: 'no'}

Fuente

2015-03-29 04:23:57 Chloe

Inspirado por Nelson's y Chris' comentarios, he encontrado una manera de solucionar la política del mismo origen con una div y un iframe: HTML

<div id='div_iframe'><iframe id='frame' src='...'></iframe></div>

CSS:

#div_iframe { 
    border-style: inset; 
    border-color: grey; 
    overflow: scroll; 
    height: 500px; 
    width: 90% 
} 

#frame { 
    width: 100%; 
    height: 1000%; /* 10x the div height to embrace the whole page */ 
}

Ahora supongamos que quiero saltar los primeros 438 (vertical) píxeles de la página iframe, desplazándose a esa posición . solución

JS:

solución

document.getElementById('div_iframe').scrollTop = 438

JQuery:

$('#div_iframe').scrollTop(438)

solución CSS:

#frame { margin-top: -438px }

(Cada solución por sí sola es suficiente, y el efecto de la CSS es una poco diferente ya que no puede desplazarse hacia arriba para ver la parte superior de la página iframed.)

Fuente

2015-05-07 20:16:11

No pude hacer que esto funcione. Todo lo que hace es desplazar el div y el iframe dentro del div no hace nada. ¿Podrías demostrar en un jsfiddle? ¿Podrías así que explica la constante 438? – whiteshooz

@whiteshooz, exacto, el desplazamiento permanece en el div, que contiene todo el iframe con la página. De esta forma, puedo desplazar la página a través del div en lugar del iframe, sin violar la política del mismo origen (que solo se aplica al iframe). 438 es la altura inicial que quiero desplazar, en este ejemplo (voy a editar mi respuesta, gracias por su comentario). –

La única solución de trabajo real para mí. Gracias. – greywolf82

También he tenido problemas para usar cualquier tipo de función "scrollTo" de javascript en un iframe en un iPad. Finalmente encontró una solución "vieja" para el problema, simplemente hash para un ancla.

En mi situación después de un retorno de ajax, mis mensajes de error se configuraron para mostrarse en la parte superior del iframe pero si el usuario se desplazó hacia abajo en una forma largamente larga, el envío finaliza y aparece el error "arriba del pliegue ". Además, suponiendo que el usuario se desplazara hacia abajo, la página de nivel superior se desplazó desde 0,0 y también se ocultó.

que añade

<a name="ptop"></a>

a la parte superior de mi documento de marco flotante y

<a name="atop"></a>

a la parte superior de la página de nivel superior

continuación

$(document).ready(function(){ 
     $("form").bind("ajax:complete", 
     function() { 
      location.hash = "#"; 
      top.location.hash = "#"; 
      setTimeout('location.hash="#ptop"',150); 
      setTimeout('top.location.hash="#atop"',350); 
     } 
    ) 
    });

en el iframe

Tienes que ajustar el iframe antes de la página superior o solo el iframe se desplazará y la parte superior permanecerá oculta, pero mientras está un poco "nervioso" debido a los intervalos de tiempo de espera funciona. Me imagino que las etiquetas en todo permitirían varios puntos "scrollTo".

Fuente

2015-10-29 13:08:20

Desplazamiento de un iframe con JavaScript?

Respuesta

Cuestiones relacionadas