延迟后（仅一次）或页面上的 iFrame 第一次加载后滚动到页面顶部

Question

我有一个父页面，其中包含页面中间的 iFrame（同一个域，可以访问两者）。我的 iFrame 标签如下所示：

<iframe name="Survey" onload="parent.location='https://www.example.com/ParentPage#SurveyTop';" scrolling="no" src="https://www.example.com/ChildPage" width="100%" id="iFrameResizer0">

iFrame 可以变得非常高，所以我在 iFrame 标记中添加了 onload 命令，它使页面在每次刷新/加载 iFrame 时自动回到 iFrame 的顶部。

问题在于，第一次加载父页面时它也会立即向下滚动到 iFrame 的顶部，因为 iFrame 的内容在父页面之后一两秒加载。因此，访问者永远不会看到 iFrame 上方的所有重要页面名称/介绍/英雄图片。

是否有一些 javascript 可以让我最初将父页面显示在页面顶部，但是每当刷新 iFrame 中的内容时，它就会像现在一样滚动到 iFrame 的顶部？

我尝试在 iFrame 之后放置各种 javascript 方法，认为它会加载并滚动到 iFrame，但如果页面再向上滚动到顶部，但它从未起作用。例如：

document.body.scrollTop = document.documentElement.scrollTop = 0;

或

window.scrollTo(x-coord, y-coord);

我也尝试过延迟三秒，但它仍然没有滚动到顶部。 （我的脚本很糟糕）。让页面跳到 iFrame 然后回到顶部并不理想，但这只会在第一次发生，这是我愿意做出的妥协！谢谢！

Answer 1

当您说“尝试延迟 3 秒”时，您使用的是什么代码？然后在您的评论中，您询问如何造成延迟......目前尚不清楚您尝试的哪种方法无效。无论如何，要在 Javascript 执行中添加 3 秒延迟，使用的标准方法是 window.setTimeout(function(){YOURCODE;}, 3000);。正如您所指出的，这将是一种妥协，而不是您真正想要的解决方案。

更好的方法是在父窗口上设置 onload 处理程序，这将设置 iFrame 的 onload 处理程序：window.addEventListener("load", function(event) {YOURCODE;}, false);。在处理程序的代码中，您将使用 window.frames["iFrameResizer0"] 引用 iFrame。

因为 iFrame onload 处理程序将在父页面和 iFrame 加载后设置，所以 iFrame onload 代码只会在 iFrame 重新加载时运行，而不是在第一次加载父时运行，从而解决您的问题。