使用JavaScript滚动iframe？

Question

使用JavaScript滚动iframe？我用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);}

你可以在这里查看一个工作示例。

注意：如果两个页面都位于同一个域中，则此方法有效。

Answer 2

我找到了一种解决同一起源政策的方法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页面的顶部。）