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);

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

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

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

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

Answer 2

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

Answer 3

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

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

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

3 个答案: