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

Question

When I visit the homepage of the Rails website that I'm building, it takes a few seconds to load. Let's say after 2 seconds it has loaded the visuals after which for some reason it's busy for 2 more seconds (I think loading JavaScripts). If I scroll down between second 2 and 4, then after second 4 it automatically pops back to the top of the page. So that's a bit annoying, especially since this happens everytime you visit the homepage (not just the first time you visit it).

After trying to remove various parts of the page I found out the cause. I'm using a website template to develop my website. This template at the top of the homepage uses the following script:

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

When I remove this script the described behaviour is gone. But I don't know what this script does and why it's there. Could someone perhaps advice if it's okay to remove it?

Answer 1

Let's break it down.

First, the code is adding a listener to the window. When the window is loaded it will trigger the function passed to addEventListener .

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

Then the code defines a function called hideURLbar which will scroll to one pixel from the top when called (using window.scrollTo ). This appears to be for mobile devices since they show the URL bar until the user scrolls down a little. 1px must be enough. This function is not called immediately, however.

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

After loading the page the function hideURLbar is passed to setTimeout with a timeout of zero milliseconds.

setTimeout(hideURLbar, 0);

Using setTimeout with a zero timeout tells the browser to call hideURLbar as soon as it can, but that it should finish whatever else its doing first. This is often used to sort of "kick" things to the background in the browser so they don't interrupt other things the browser may be doing.

The combination of waiting for the load event and using setTimeout means this code isn't triggered until your browser is done loading everything else. By that time if you have scrolled down you will be popped back to the top of the page.

This is poor code and a better approach would be to only execute something like this if the scroll position is at the very top, like this:

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

Answer 2

I believe that is a hack for mobile devices. See, when you have a website load on the mobile, the url bar is on the top of the screen and eats up 15% of your space. This (poorly designed) hack make the web scroll automatically just a tiny bit to hide this url bar. You should remove this code, it's plain dirty and will cause some problems, like the one you mention.

Answer 3

This seems to be quite a common way to try and hide the address bar on mobile browsers such as iOS Safari or Chrome on Android. It waits for the page to load and then scrolls down slightly in order to trigger the auto-hide feature most touch device browsers have.

I'm 99.99% sure it doesn't do anything else so if it's causing issues for you, I'd recommend just removing it.