滚动使用JavaScript的iframe？(Scrolling an iframe with Ja

我动态加载JavaScript的iframe中。它的加载后，我怎样才能使它向下滚动像素的具体数量（即在iframe页面加载后，我怎样才能使iframe的滚动本身的页面的指定区域？）

Answer 1:

您可以使用onload事件来检测当iframe中完成加载，在那里你可以使用scrollTo功能的iframe的contentWindow，滚动到像素的规定的位置，从左边和顶部（X，Y）：

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

您可以检查工作的例子在这里。

注：如果这两个网页位于同一个域这将工作。

Answer 2:

由尼尔森启发评论我做了这个。

解决方法的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:

灵感来自尼尔森和克里斯的评论，我已经找到一种方法来解决办法与同源策略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 */
}

现在假设我想跳过第438（垂直）的iframe页面的像素，滚动到该位置。

JS的解决方案：

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

JQuery的解决方案：

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

CSS的解决方案：

#frame { margin-top: -438px }

（单独每个解决方案是不够的，CSS的一个效果是有点不同，因为你不能向上滚动看到的iFrame网页的顶部。）

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:

根据克里斯的评论

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 ...一个黑客位，但到目前为止，在FF的作品。

#frame {
margin-top:200px;
}

Answer 8:

我一直在使用任何类型的javascript“scrollTo”功能在iPad上的iframe中也遇到了麻烦。终于找到一个“老”问题的解决，只是散列为锚。

在AJAX后，我的情况给我回的错误信息被设定在iframe的顶部显示，但如果用户已在什么是一个公认的多头形态向下滚动提交熄灭，并出现“首屏”的错误。此外，假设用户做了滚动一路下跌顶级页从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”点。

Answer 9:

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

文章来源: Scrolling an iframe with JavaScript?