使用JavaScript滚动iframe？
我用JavaScriptdynamic加载一个iframe。 加载后，我怎样才能让它向下滚动一个特定数量的像素（即在加载iframe中的页面之后，如何使iframe自身滚动到页面的指定区域？）
您可以使用onload事件来检测iframe何时完成加载，并且您可以使用iframe的contentWindow上的scrollTo函数滚动到从左侧和顶部（x，y）定义的像素位置：
var myIframe = document.getElementById('iframe'); myIframe.onload = function () { myIframe.contentWindow.scrollTo(xcoord,ycoord); }
你可以在这里查看一个实例。
注意：如果两个页面都位于同一个域，这将起作用。
受到Nelsons评论的启发，我做了这个。
JavaScript的解决方法相同的来源策略，关于在源自外部域的文档上使用.ScrollTo（）。
非常简单的解决方法是创build一个虚拟html页面，在其中托pipe外部网站，然后在加载页面时调用该页面上的.ScrollTo（x，y）。 那么你唯一需要做的是有一个框架或一个iframe带来这个网站。
还有很多其他方法可以做到这一点，这是迄今为止最简单的方法。
*注意高度必须大，以容纳滚动条的最大值。
–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>
受尼尔森和克里斯的评论的启发，我find了一种方法来解决与div和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 */ }
现在假设我想跳过iframe页面的第一个438（垂直）像素，通过滚动到该位置。
JS解决scheme：
document.getElementById('div_iframe').scrollTop = 438
JQuery解决scheme：
$('#div_iframe').scrollTop(438)
CSS解决scheme：
#frame { margin-top: -438px }
（每个解决scheme都是足够的，CSS的效果有点不同，因为你不能向上滚动来查看iframed页面的顶部。）
一个jQuery解决scheme：
$("#frame1").ready( function() { $("#frame1").contents().scrollTop( $("#frame1").contents().scrollTop() + 10 ); });
使用框架内容的scrollTop属性将内容的垂直滚动偏移设置为特定数量的像素（如100）：
<iframe src="foo.html" onload="this.contentWindow.document.documentElement.scrollTop=100"></iframe>
基于克里斯的评论
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'}
或者，你可以在iframe上设置一个margin-top …有点破解，但是在FF中工作到目前为止。
#frame { margin-top:200px; }
我在使用iPad的iframe中的任何types的javascript“scrollTo”函数时也遇到了麻烦。 最后find了一个“老”的解决scheme，只是哈希到一个锚点。
在我的情况下，ajax返回后，我的错误信息被设置为显示在iframe的顶部，但如果用户已经滚动下来，以确定的长forms提交出去，错误出现“上方”。 此外，假设用户确实向下滚动，顶层页面从0,0滚动，并且也被隐藏。
我补充说
<a name="ptop"></a>
到我的iframe文档的顶部
<a name="atop"></a>
到我的顶级页面的顶部
然后
$(document).ready(function(){ $("form").bind("ajax:complete", function() { location.hash = "#"; top.location.hash = "#"; setTimeout('location.hash="#ptop"',150); setTimeout('top.location.hash="#atop"',350); } ) });
在iframe中。
您必须在顶部页面之前对iframe进行散列，否则只有iframe将滚动，顶部将保持隐藏状态，但是由于超时间隔的原因，它会有点“跳跃”。 我想象标签将允许各种“scrollTo”点。
var $iframe = document.getElementByID('myIfreme'); var childDocument = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document; childDocument.documentElement.scrollTop = 0;
