使用 JavaScript 滚动 iframe？答案

【问题标题】：Scrolling an iframe with JavaScript?使用 JavaScript 滚动 iframe？
【发布时间】：2010-11-14 14:26:11
【问题描述】：

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

【问题讨论】：

【解决方案1】：

编写滚动时的主要问题与将整个文档嵌入到页面中有关，请记住，Iframe 将是主文档中的整页（头部和全部），因此，在实际滚动之前，您需要获取内部文档，而不仅仅是容器，因此您实际上可以滚动到。

我们添加了对sendure兼容性的验证，contentDocument和windows的区别可以在here找到

Havign 这个，最终的代码是：

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

【讨论】：

此答案因其长度和内容而被标记为低质量。请使其更适用于 OP。

【解决方案2】：

受纳尔逊评论的启发，我做了这个。

关于在源自外部域的文档上使用 .ScrollTo( ) 的 javascript 同源策略的解决方法。

对此非常简单的解决方法是创建一个虚拟 HTML 页面，在其中托管外部网站，然后在加载后在该页面上调用 .ScrollTo(x,y)。那么你唯一需要做的就是有一个框架或一个 iframe 来打开这个网站。

还有很多其他方法可以做到这一点，这是迄今为止最简单的方法。

*注意高度必须很大才能容纳滚动条的最大值。

--home.html

<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.html

<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>

【讨论】：

可以用这个动态改变weather.htm的src吗？如“www.google.com”或“www.yahoo.com”等？
这个答案和上面的答案的组合非常聪明。

【解决方案3】：

我在 iPad 上的 iframe 中使用任何类型的 javascript“scrollTo”函数时也遇到了麻烦。终于找到了解决问题的“旧”解决方案，只需哈希到锚点即可。

在我的情况下，在 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”点。

【讨论】：

【解决方案4】：

受Nelson's 和Chris' cmets 的启发，我找到了一种使用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 的效果略有不同，因为您无法向上滚动以查看 iframe 页面的顶部。）

【讨论】：

我无法让它工作。它所做的只是滚动 div 和 div 内的 iframe 不做任何事情。你能用jsfiddle演示吗？你能解释一下 438 常数吗？
@whiteshooz，确切地说，滚动停留在 div 中，其中包含整个 iframe 和页面。这样我就可以通过 div 而不是 iframe 滚动页面，而不会违反同源策略（仅适用于 iframe）。 438 是我想要滚动的初始高度，在这个例子中（我会编辑我的答案，谢谢你的评论）。
我觉得任何带有 iframe 的东西都是 hacky，但是为了演示一个想法，我使用了这个答案来创建这个演示 jsfiddle.net/1b5s489z 在按钮单击时加载 iframe，隐藏目标内容的标题（使用 css 边距-top) 并使用 js 解决方案滚动到文档中的设定点。

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

#frame {
margin-top:200px;
}

【讨论】：

【解决方案7】：

一个jQuery解决方案：

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

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

});

【讨论】：

【解决方案8】：

您可以使用onload 事件来检测 iframe 何时完成加载，并且您可以在 iframe 的 contentWindow 上使用scrollTo 函数，从左侧和顶部滚动到定义的像素位置(x, y)：

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

您可以查看一个工作示例here。

注意：如果两个页面位于同一个域中，这将起作用。

【讨论】：

那么如果页面不在同一个域中，这将不起作用？
@Chief17 - 没错，它会违反 Javascript 的相同域策略。
您可以通过在 iframe 上加倍来规避同源策略。您的主页将 iframe 嵌入到您自己服务器上的 shim 页面中。垫片页面反过来只是嵌入了外部页面的 iframe。母版页可以滚动 shim 页面，因为它们位于同一来源。丑陋，但它有效。
如果你事先知道要在 iframe 中显示的内容的尺寸，你可以将 iframe 放在一个包含的 div 中，在其上设置溢出：隐藏，然后将 iframe 相对定位在其中.类似的效果，没有javascript。
检查了你的小提琴，它似乎不起作用。 iframe 的滚动条没有移动 :( screencast.com/t/MEvAiJA6yMCb

【解决方案9】：

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

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

【讨论】：

有什么横向的
对于水平方向，使用 scrollLeft 而不是 scrollTop
谢谢！我工作了好几个小时才能让它发挥作用！