window.onload和预期的行为

Question

我在页面上有以下代码：

struct Point p1 = POINT_INITIALIZER(3);

我的预期行为是，每次显示页面时，页面都会滚动到window.onload = function () { window.scrollTo(0, 0); } （左上角）。但事实并非如此，只有在我“重新加载”页面时才会这样做。例如，如果我转到页面它滚动到顶部，但如果我离开并返回它不起作用。不知怎的，没有触发onload。

由于我只是在学习，我假设我期待的是一些不正确的事情。有些人可以为我解释一下吗？

Answer 1

当您返回已访问的页面时，浏览器会将页面滚动到您上次离开时​​的位置。

在scrollTo处调用的window.onload会被忽略，或者在浏览器进入之前执行并恢复滚动位置。

这旨在为用户提供更好的浏览体验，实际上这通常是用户期望的，特别是当通过＆＃34;返回＆＃34;导航回页面时。按钮。

但是，如果您真的想要，可以通过在onload之后和代码将页面滚动到(0,0)之前让时间过去来覆盖浏览器行为：

window.onload = function () {
    setTimeout( function () {
        window.scrollTo(0, 0);
    }, 500 );
};

这种方式window.scrollTo是＆＃34;已安排＆＃34;在页面加载后0.5秒执行。

...并成功。

另见Prevent automatic browser scroll on refresh

注意：，因为当{strong>整个页面已加载（包含图片，链接，框架...）时，window.onload会触发事件（并随后滚动到(0,0）可能会被过度延迟或根本不会被解雇（如果资源加载失败）。

我建议使用（或至少尝试）document.onload在解析页面时触发，DOM结构准备好并且链接的资源开始加载。

您的代码变为：

document.onload = function () {
    setTimeout( function () {
        window.scrollTo(0, 0);
    }, 500 );
};

由于如果您遇到问题会很早触发，您可能会将延迟值提高到750或1000毫秒。

供您参考，您可能会觉得有用：window.onload vs document.onload

Answer 2

一旦浏览器完成解析（也就是读取）html，

window.onload就会被调用。每当你加载页面时，浏览器只需要解析一次html，所以它只能被调用一次。

如果您希望在重新聚焦选项卡时调用它，则可以使用window.onfocus属性。