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

13 浏览
0 Comments

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

我在网络上对此问题进行了详尽的研究，尝试了大约50种不同的方法，最初我尝试了滚动div，然后当它不起作用时，我尝试使用iframe将文件与div结合，并滚动iframe...但什么都没起作用！看看我最后设置的脚本：

我尝试了#frame和frame两种写法，都使用了(document).ready和没有使用。

页面上似乎什么都不起作用，这让我很困扰。

谢谢。 🙂

0

3 答案

0 Comments

问题的出现原因：

问题是如何在页面加载时将iframe滚动到底部。这可能是因为用户想要确保iframe的内容在加载时自动滚动到底部，以便他们可以立即看到最新的内容。

解决方法：

如果您可以访问iframe内容的源代码，一种简单的解决方法是在内容的最后一行添加一个<a name='end'>&nbsp;（或您内容的最后一行）</a>（不确定<a>标签中是否真的需要任何内容）。

在iframe源代码中添加#end，例如：

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

这样它将自动滚动到底部，无需使用JavaScript/jQuery。

这是一个不错的解决方法，但我认为它可以是具有id="end"属性的任何元素（span、div、a等）。

0
0 Comments

问题的原因是当前文档加载完成后，iframe内的文档还没有完全加载，因此无法滚动到底部。解决方法是在文档加载完成后，通过监听iframe的加载事件，在iframe加载完成后滚动到底部。

具体代码如下：

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

如果代码中存在问题，可以尝试使用YShout文档中的回调函数来判断是否加载完成，如果加载完成则调用window.scrollBy(0,100000)函数。

0
0 Comments

问题的出现原因是需要在页面加载完成后将iframe滚动到底部，而解决方法是使用jQuery的scrollTop()函数来实现滚动，并使用setTimeout()函数延迟执行滚动操作。

首先，在使用jQuery的scrollTop()函数之前，需要使用.contents()方法来访问iframe内部的内容。然后，可以使用window的load事件或iframe的document ready事件来触发滚动操作。具体代码如下：

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

如果需要在页面加载后的3秒钟再执行滚动操作，可以使用setTimeout()函数来延迟执行。具体代码如下：

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

除了使用iframe，还可以考虑使用div来实现相同的效果。使用div的好处是更加灵活，操作起来也更加简单。具体代码如下：

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

总结起来，根据具体需求和使用的组件，可以选择使用iframe或div来实现页面加载后滚动到底部的效果。使用jQuery的scrollTop()函数和setTimeout()函数可以实现滚动操作的延迟执行。

0