如何在javascript中正确地将IFrame滚动到底

How to properly scroll IFrame to bottom in javascript

本文关键字：IFrame 滚动 正确地 javascript      更新时间：2023-09-26

对于用于研究网站交互的模拟网页，我使用JavaScript创建了一个模拟消息流。此消息流加载在IFrame中，应以预设的间隔显示图像，并在页面底部放置新图像后滚动到页面底部。使用所提供的脚本可以很好地显示图像。然而，Chrome和IE似乎都很难将页面滚动到底。我想在附上图像后立即滚动到页面底部，但现在添加了5毫秒的延迟，因为这有时似乎有效。我的问题是：

  • 可以使用document.body.scrollHeight吗
  • 我可以直接滚动吗？还是在滚动之前需要一个小的间隔
  • 如何在添加图像后直接将代码滚动到IFrame的底部

使用以下函数，并在加载时启动锥虫（）：

function scrollToBottom(){
  window.scrollBy(0,document.body.scrollHeight);
}
function trypost(){
  point = point + 1;
  if(point < interval.length){
    //create and append a new image
    var newImg = document.createElement("IMG");
    newImg.src = "images/"+images[point]+".png";
    document.getElementById('holder').appendChild(newImg);
    //create and append a return
    var br = document.createElement("br");
    document.getElementById('holder').appendChild(br);
    //time scroll to bottom (after an arbitrary 5 seconds)
    var stb = window.setTimeout(scrollToBottom, 5);
    //time next post
    var nextupdate = interval[point]*400;
    var tp = window.setTimeout(trypost, nextupdate);
  }
}

我的脚本部分至少包含以下变量：

var point = -1;
var interval = [10, 10, 15];
var images = ["r1", "a1", "r2"];

这个问题是"如何正确使用IE中的setTimeout？"中描述的项目的延续？

要回答您的一个问题，document.body.scrollHeight适用于此目的，但如果您实际调用document，则不适用。这将为您提供文档的滚动高度，iFrame是中的，而不是iFrame的文档。iFrame的文档可以由[insert variable for iFrame here].contentDocument调用。

以下是我是如何做到的（我的意思是，我用自己的东西测试了它，以确保它有效）：

let i = document.querySelector('iframe')
i.contentWindow.scrollTo(0, i.contentDocument.body.scrollHeight);

话虽如此，托马斯·厄本的另一个答案在大多数情况下也会奏效。区别在于，只有当您的页面具有非常长的滚动高度时。大多数页面都不会超过999999（据我所知，这是不可能的，这就是他们选择这个数字的原因），但如果你有一个页面比这个长，我在这里展示的方法会滚动到底部，999999会滚动到还不在底部的地方。

还要注意，如果你有多个iFrame，你会想用与我不同的方式来查询它，比如ID。

向下滚动总是像滚动到一些大得离谱的顶部偏移，例如999999。

iframe.contentWindow.scrollTo( 0, 999999 );

此外，请参阅以下文章：使用javascript滚动iframe？

如果滚动发生得太早，可能是因为图像尚未加载。因此，您必须在加载添加的图像后立即滚动，而不是在放置图像时。添加

newImg.onload = function() { triggerScrolling(); };

在创建newImg之后但在分配属性src之前。

如果需要几个事件来触发滚动，您可能需要使用一些"事件收集器"。

function getEventCollector( start, trigger ) {
    return function() {
        if ( --start == 0 ) { trigger(); )
    };
}

然后你可以这样使用它：

var collector = getEventCollector( 2, function() { triggerScrolling(); } );
newImg.onload = collector;
window.setTimeout( collector, 100 );

通过这种方式，triggerScrolling()至少在100ms后调用，并且在为collector加载图像后必须调用两次才能最终调用triggerScrolling（）。

相关文章：