Question

我使用JavaScript动态加载iframe。加载后，如何让它向下滚动特定数量的像素（即在iframe中的页面加载后，如何将iframe自身滚动到页面的指定区域？）

Answer 1

您可以使用onload事件来检测iframe何时加载完毕，并且您可以使用iframe的contentWindow上的scrollTo函数滚动到已定义的像素位置，从左上角（x，y）：

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

您可以查看一个有效的示例here。

注意：如果两个网页都位于同一个网域，这将有效。

Answer 2

受到Nelsons评论的启发，我做到了这一点。

javascript的解决方法关于在源自外部域的文档上使用.ScrollTo（）的相同原始策略。

非常简单的解决方法是创建一个虚拟html页面，在其中托管外部网站，然后在加载后在该页面上调用.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>

Answer 3

受到Nelson's和Chris'条评论的启发，我找到了一种方法，可以使用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解决方案：

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

JQuery解决方案：

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

CSS解决方案：

#frame { margin-top: -438px }

（单独的每个解决方案都足够了，CSS的效果有点不同，因为你无法向上滚动以查看iframed页面的顶部。）

Answer 4

使用框架内容的scrollTop属性将内容的垂直滚动偏移设置为特定的像素数（如100）：

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

Answer 5

jQuery解决方案：

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

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

});

Answer 6

基于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'}

Answer 7

或者，你可以在iframe上设置一个margin-top ......有点像hack但到目前为止在FF中工作。

#frame {
margin-top:200px;
}

Answer 8

我也无法使用任何类型的javascript＆＃34; scrollTo＆＃34;在iPad上的iframe中运行。终于找到了一个＆＃34; old＆＃34;问题的解决方案，只是哈希到一个锚。

在我的情况下，在ajax返回后，我的错误消息被设置为显示在iframe的顶部，但是如果用户已经向下滚动，那么提交就会消失并且出现错误＆＃34;以上折叠＆＃34;。此外，假设用户确实向下滚动，顶级页面从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会滚动并且顶部将保持隐藏状态，但它只是一点点＆＃34;跳跃＆＃34;由于超时间隔，它的工作原理。我想整个标签会允许各种各样的＆＃34; scrollTo＆＃34;分。

Answer 9

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

使用JavaScript滚动iframe？

9 个答案: