如何在页面加载时将iframe滚动到底部？

Question

我就像在网上的每一个问题,尝试像50差异方法,首先我试图滚动div - 然后当它没有工作,我试图iframe文件与div并滚动iframe ..没有什么只是作品!

查看我设置的最后一个脚本:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var t = 100; //arbitrary time in ms
$("#frame").animate({ scrollTop: $("#frame").height()}, t);
});
</script>

<center><iframe id="frame" src="xxx.php" frameborder="0" width="630px" height="500px"></iframe></center>

我尝试了没有(#)的#frame和frame,两者都是(document).ready而没有它.似乎没有什么东西在页面上工作,它驱使我疯狂.

谢谢.:)

Answer 1

使用jQuery,您需要使用.contents()访问iframe内的任何内容.您还需要使用窗口加载事件或iframe的文档就绪事件.

$(window).load(function ()
{
    var $contents = $('#frame').contents();
    $contents.scrollTop($contents.height());
});

演示:http://jsbin.com/ujuci5/2

我建议回到你提到的div结构,因为它听起来像你想要做的不需要iframe.你会发现使用div比使用iframe要少得多.

$(function ()
{
  var $mydiv = $('#mydiv');
  $mydiv.scrollTop($mydiv.height());
});

演示:http://jsbin.com/ujusa4/2

如何在页面加载后3秒启动滚动功能？

使用setTimeout.

$(window).load(function ()
{
    setTimeout(function ()
    {
        var $contents = $('#frame').contents();
        $contents.scrollTop($contents.height());
    }, 3000); // ms = 3 sec
});

Answer 2

如果您可以访问iframe内容的源代码,一个简单的方法就是添加一个<a name='end'>  (或您内容的最后一行)</a>(不确定您是否真的需要<a>标签中的任何内容).

将#end添加到iframe源,例如

http://www.yourdomain.com/file.php#end

它会自动滚动到最后,不需要javascript/jquery