Implementation principle and code of automatically hiding the address bar of mobile browsers through JS

Everyone opens Baidu and Taobao through the browser that comes with their mobile phone. After the homepage is loaded, the address bar at the top of the page will be automatically hidden. In addition, these websites are optimized for mobile browsers. At first glance, it is really difficult to distinguish them. Is this a WEB APP or a Native App? The picture on the left below shows the homepage of Taobao opened through Safari. If it weren’t for the browser toolbar underneath, it would really look like a Native App. In fact, it has an address. Drag it down and you will see the address bar, as shown in the picture on the right below.

How to hide the browser address bar? Baidu, there is a lot of information, it is very simple. It mainly uses the window.scrollTo() method to scroll the current page up on the screen, causing the address bar to exceed the field of view, as follows:

Copy code The code is as follows:

<script> <br>window.onload=function(){ <br>setTimeout(function() { <br>window.scrollTo(0, 1) <br>}, 0); <br>}; <br></script>

But if you make a simple page, for example, only In a word, with the above script, you will sadly find that the address bar is not automatically hidden ; does the window.scrollTo() method not take effect in this browser?

But if your web page contains a lot of content and exceeds the height of the screen, the address bar will be automatically hidden;

How to hide the address bar when there is less content? Before scrolling, the program needs to dynamically set the height of the body. Add the following code:

Copy the code The code is as follows:

if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) { 
bodyTag = document.getElementsByTagName('body')[0]; 
bodyTag.style.height = document.documentElement .clientWidth / screen.width * screen.height 'px'; 
}

The following is an example of a page (the address bar is hidden by default). The picture on the right is a screenshot of the address bar after pulling down. :

Copy code The code is as follows:

我是个网页，但不显示滚动条
<script> window.onload=function(){ if(document.documentElement.scrollHeight <= document.documentElement.clientHeight) { bodyTag = document.getElementsByTagName('body')[0]; bodyTag.style.height = document.documentElement.clientWidth / screen.width * screen.height 'px'; } setTimeout(function() { window.scrollTo(0, 1) }, 0); }; </script>

帐号：

密码：

Related labels：

Address Bar Browser

source：php.cn

Previous article：Block the js code copied by right-clicking on the web page and copying with ctrl c_javascript skills Next article：Javascript image processing—threshold function example application_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Implementation principle and code of automatically hiding the address bar of mobile browsers through JS_javascript skills