2013-05-29 74 views
12

我已经创建了两个网页,其中一个包含iframe中的另一个。我想通过JavaScript从父页面滚动嵌入式页面。滚动来自父页面的iframe

我迄今为止尝试:

  1. $('#go').scrollTop(200);

  2. $('.footer').scrollTop(200);

  3. var frame = document.getElementById('go');
    frame.contentWindow.scrollTo(0, 200);

这些都没有工作

父网页的html:

<html> 
<body> 
. 
. 
. 
<div class="footer"> 
     <iframe id="go" src="go.html"></iframe> 
    </div> 
    </body> 
</html> 

这些网页的这两种在计算机上的本地文件和我使用谷歌浏览器与“--allow-文件访问从档案”的标志。

如何将iframe滚动到某个位置?

+0

你知道“go.html”的内容吗?你可以简单的关注其中的一个必需元素吗? –

+0

@YuriyGalanter我知道go.html的内容,但它包含另一个域上的另一个iframe,所以我无法访问它。我在iframe中做了iframe以绕过相同的原产地策略。 – stackErr

回答

7

这工作:

document.getElementById("go").contentWindow.setTimeout("this.scrollTo(0, 200);",1); 

更新。卫生署。只在IE中工作,但我认为那里有一些东西。

更新2此作品普遍:

document.getElementById("go").onload = function() { this.contentWindow.scrollTo(0, 200) }; 

你必须等待iframe中的内容完成加载的scrollTo工作。

+0

是的,在Chrome中无法使用!而且我也尝试了几个与SetTimeout的变化已经没有运气:(。 – stackErr

+0

更新的解决方案,请试试看。 –

3

您可以使用window.postMessage从您的父框架发送消息到iframe,告诉它滚动。这需要您在父框架中设置postMessage脚本,并在iframe中设置receiveMessage脚本。这是实际上滚动iframe的receiveMessage代码。

我已经非常成功地用这种填充工具:http://benalman.com/projects/jquery-postmessage-plugin/

+0

这听起来很有希望,一旦我尝试过,会更新。 – stackErr

+0

Yuriy提供的解决方案比这更容易实现。感谢您的插件,将派上用场! – stackErr