有人可以解释这个脚本的作用吗？

Question

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

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

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

当我删除此脚本时，描述的行为消失了。 但我不知道这个脚本是做什么的，为什么会这样。 有人可能会建议，如果可以删除它吗？

Answer 1

让我们分解吧。

首先，代码是向窗口添加一个监听器。 加载窗口时，它将触发传递给addEventListener的函数。

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

然后代码定义了一个名为hideURLbar的函数，该函数在调用时将从顶部滚动到一个像素（使用window.scrollTo ）。 这似乎适用于移动设备，因为它们会显示URL栏，直到用户向下滚动一点。 1px必须足够。 但是，不会立即调用此函数。

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

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

setTimeout(hideURLbar, 0);

使用带有零超时的setTimeout告诉浏览器尽快调用hideURLbar ，但它应该完成其hideURLbar其他操作。 这通常用于在浏览器中将某些东西“踢”到后台，这样它们就不会中断浏览器可能正在做的其他事情。

等待加载事件和使用setTimeout的组合意味着在浏览器完成加载其他所有操作之前，不会触发此代码。 到那时，如果你向下滚动，你将会弹出回到页面顶部。

这是糟糕的代码，如果滚动位置位于最顶端，更好的方法是只执行类似这样的操作，如下所示：

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

Answer 2

我认为这是移动设备的黑客攻击。 请注意，当您在移动设备上加载网站时，网址栏位于屏幕顶部，占用了15％的空间。 这个（设计不佳）黑客攻击使网络自动滚动一点点来隐藏这个网址栏。 你应该删除这个代码，它很简单，会引起一些问题，比如你提到的问题。

Answer 3

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

我99.99％肯定它没有做任何其他事情，所以如果它给你带来问题，我建议你删除它。