javascript - vertical - no scrolling
¿Desplazar un iframe con JavaScript? (9)
Cargo dinámicamente un iframe con JavaScript. Después de cargarlo, ¿cómo puedo hacer que se desplace un número específico de píxeles (es decir, después de que la página en el iframe se haya cargado, cómo puedo hacer que el iframe se desplace solo a la región especificada de la página?)
Basado en Chris''
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''}
Inspirado por Chris'' comentarios de Nelson''s y Chris'' , he encontrado una forma de resolver la misma política de origen con un 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 */
}
Supongamos ahora que quiero omitir los primeros 438 píxeles (verticales) de la página de iframe, desplazándome a esa posición.
Solución JS:
document.getElementById(''div_iframe'').scrollTop = 438
Solución JQuery:
$(''#div_iframe'').scrollTop(438)
Solución CSS:
#frame { margin-top: -438px }
(Cada solución por sí sola es suficiente, y el efecto del CSS es un poco diferente ya que no puede desplazarse hacia arriba para ver la parte superior de la página iframed).
Inspirado por el comentario de Nelson, hice esto.
Solución para JavaScript. La misma política de origen con respecto al uso de .ScrollTo () en el documento que se origina en un dominio externo.
Un trabajo muy simple para esto implica crear una página html ficticia que aloje el sitio web externo dentro de ella, y luego llamar a .ScrollTo (x, y) en esa página una vez que esté 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, esta es de lejos la forma más simplificada de hacerlo.
* tenga en cuenta que la altura debe ser grande para acomodar el valor máximo de barras de desplazamiento.
--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>
O bien, puede establecer un margen superior en el iframe ... un poco de un truco pero funciona en FF hasta el momento.
#frame {
margin-top:200px;
}
También tuve 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 conocida, 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ó.
yo añadí
<a name="ptop"></a>
al principio de mi documento iframe y
<a name="atop"></a>
a la parte superior de mi página de nivel superior
entonces
$(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".
Una solución jQuery:
$("#frame1").ready( function() {
$("#frame1").contents().scrollTop( $("#frame1").contents().scrollTop() + 10 );
});
Use la propiedad scrollTop del contenido del marco para establecer el desplazamiento vertical de desplazamiento del contenido a un número específico de píxeles (como 100):
<iframe src="foo.html" onload="this.contentWindow.document.documentElement.scrollTop=100"></iframe>
Puede utilizar el evento onload para detectar cuándo el iframe ha terminado de cargarse, 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 y desde la parte superior (x, y):
var myIframe = document.getElementById(''iframe'');
myIframe.onload = function () {
myIframe.contentWindow.scrollTo(xcoord,ycoord);
}
Puede verificar un ejemplo de trabajo here .
Nota: Esto funcionará si ambas páginas residen en el mismo dominio.
var $iframe = document.getElementByID(''myIfreme'');
var childDocument = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document;
childDocument.documentElement.scrollTop = 0;