使用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 = 438JQuery解决方案：$('#div_iframe').scrollTop(438)CSS解决方案：#frame { margin-top: -438px }（单独的每个解决方案都足够了，CSS的效果有点不同，因为你无法向上滚动以查看iframed页面的顶部。）