window.onload和预期的行为

时间:2018-01-14 22:29:48

标签: javascript

我在页面上有以下代码:

struct Point p1 = POINT_INITIALIZER(3);

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

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

2 个答案:

答案 0 :(得分:0)

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

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

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

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

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

这种方式window.scrollTo是"已安排"在页面加载后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 );
};

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

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

答案 1 :(得分:-1)

一旦浏览器完成解析(也就是读取)html,

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

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