jQuery 页面加载时如何将 iframe 滚动到底部?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6316250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 20:41:04  来源:igfitidea点击:

How to scroll an iframe to the bottom when page loads?

jqueryiframe

提问by Ricardo

I was like on every question about this on the net, tried like 50 diff methods, first i tried to scroll the div - then when its not worked i've tried to iframe the file with the div and scroll the iframe.. nothing just works!

我就像在网上关于这个的每个问题一样,尝试了 50 种差异方法,首先我尝试滚动 div - 然后当它不起作用时,我尝试使用 div 对文件进行 iframe 并滚动 iframe .. 什么都没有作品!

Look on the last script i have set up:

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

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

I tried both #frame and frame without the (#), both with (document).ready and without it. Nothing seems to work on the page and its driving me nutz.

我尝试了 #frame 和不带 (#) 的框架,带 (document).ready 和不带 (#)。页面上似乎没有任何效果,这让我发疯。

Thanks. :)

谢谢。:)

回答by Matt Ball

With jQuery you need to use .contents()to access whatever's inside the iframe. You also need to use either the window load event, or the iframe's document ready event.

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

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

Demo: http://jsbin.com/ujuci5/2

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



I would recommend going back to the div structure you mentioned, since it sounds like what you're trying to do doesn't require an iframe. You'll find that it's a lot less headache to work with a div than an iframe.

我建议回到你提到的 div 结构,因为听起来你想要做的事情不需要 iframe。您会发现使用 div 比使用 iframe 少很多麻烦。

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

Demo: http://jsbin.com/ujusa4/2

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



how can i launch the scroll function like 3 seconds after the page loads?

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

Use setTimeout.

使用setTimeout.

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

回答by Ben Holness

If you have access to the source code of the iframe contents, one easy trick is to add an <a name='end'>&nbsp; (or the last line of your content)</a> (not sure if you really need anything in the <a> tag).

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

Add #end to the iframe source, e.g.

将#end 添加到 iframe 源,例如

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

and it will automatically scroll to the end, no javascript/jquery required

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

回答by Dr.Molle

If the current document is ready, this means that the DOM is ready, but the document inside the iframe has to be loaded too.

如果当前文档已准备好,这意味着 DOM 已准备好,但 iframe 内的文档也必须加载。

<script type="text/javascript">
$(document).ready(function() {
  $("#frame").load(function(){this.contentWindow.scrollBy(0,100000)});
});
</script>