有人能解释一下这个脚本是做什么的吗？

Question

当我访问正在构建的Rails网站的主页时，需要几秒钟才能加载。假设在2秒后，它已经加载了可视化内容，之后由于某些原因繁忙了2秒钟（我认为是加载JavaScript）。如果我在第2秒和第4秒之间向下滚动，那么在第4秒之后它会自动弹回到页面顶部。所以这有点烦人，特别是每次访问主页时都会发生这种情况（不仅仅是第一次访问）。

尝试删除页面的各个部分后，我找到了原因。我正在使用一个网站模板来开发我的网站。该模板在主页顶部使用以下脚本：

<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

当我删除这个脚本时，所描述的行为就消失了。但是我不知道这个脚本是做什么的，以及为什么它在那里。有人能否建议是否可以将其删除？

- Nick

Answer 1

让我们来分析一下。

首先，代码在窗口上添加了一个监听器。当窗口加载完成时，它将触发传递给addEventListener的函数。

addEventListener("load", function() {
  // Code here will run when the page loads
});

接下来，代码定义了一个名为hideURLbar的函数，当调用该函数时（使用window.scrollTo），它将滚动到距离顶部一像素的位置。这似乎是针对移动设备的，因为它们会显示URL栏，直到用户向下滚动一点。1像素应该足够了。然而，此函数不会立即被调用。

function hideURLbar(){
  window.scrollTo(0,1);
}

加载页面后，将函数hideURLbar传递给setTimeout并设置超时时间为零毫秒。

setTimeout(hideURLbar, 0);

使用零延迟的setTimeout告诉浏览器尽快调用hideURLbar，但它应该先完成其他任务。这经常用于将浏览器中的某些内容“踢到”后台，以便它们不会干扰浏览器可能正在执行的其他任务。

等待加载事件和使用setTimeout的组合意味着此代码直到您的浏览器完成加载所有其他内容后才会触发。那时如果您向下滚动，您将被弹回页面顶部。

这是糟糕的代码，更好的方法是仅在滚动位置位于最顶部时执行此类操作，如下所示：

function hideURLbar(){
  if (window.scrollY == 0) window.scrollTo(0,1);
}

- Carl Zulauf

---

谢谢您提供这么好的解释和改进后的代码，Carl。这个新代码完美运行： - Nick

Answer 2

我认为这是针对移动设备的黑客技巧。当你在移动设备上加载网站时，url栏位于屏幕顶部并占用了15%的空间。这个（设计不良的）黑客技巧会使网页自动滚动一点点，以隐藏这个url栏。你应该删除这段代码，它很糟糕并且会引起一些问题，比如你提到的那个问题。

- Johan LAJILI lajili.com

---

谢谢，我认为隐藏URL栏的概念听起来不错，但显然这个实现并不好。我会寻找更好的脚本来替换它。 - Nick

Answer 3

这似乎是一种常见的方法，用于尝试隐藏移动浏览器（如iOS Safari或Android上的Chrome）上的地址栏。它等待页面加载，然后稍微向下滚动，以触发大多数触摸设备浏览器具有的自动隐藏功能。

我99.99%确定它不会做其他任何事情，因此如果它给您带来问题，我建议您将其删除。

- Tom Dyer