Javascript 如何隐藏手机浏览器的地址栏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37395561/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide a mobile browser's address bar?
提问by Corey Ogburn
Safari and Chrome on mobile devices both include a visible address bar when a page loads. As the bodyof the page scrolls, these browsers will scroll the address bar off screen to give more real estate to the website as shown in this image:
移动设备上的 Safari 和 Chrome 在页面加载时都包含一个可见的地址栏。当body页面滚动时，这些浏览器会将地址栏滚动到屏幕外，为网站提供更多空间，如下图所示：
I'm running into a bit of an issue with my site allowing this. I'm working on a Pokedex that contains a very long list of all the Pokemon. However, with the way I've set up the page it doesn't want to scroll the address bar out of sight.
我的网站允许这样做时遇到了一些问题。我正在制作一个 Pokedex，其中包含很长的所有 Pokemon 列表。但是，按照我设置页面的方式，它不想将地址栏滚动到看不见的地方。
My html looks like:
我的 html 看起来像：
<body>
<app> <!-- My Angular2 tag for the app, no special styles for this -->
<nav>...</nav> <!-- The red nav bar and hamburger menu, default bootstrap -->
<div class="fluid-container">...</div> <!-- The container for all pokemon entries -->
</app>
</body>
If I scroll to the absolute bottom of the list (that's 721 entries) then any more scrolling will move the address bar off the top of the screen. If I touch the navbar and drag it upward then the address bar moves off screen. Both of these seem unintuitive ways to do this.
如果我滚动到列表的绝对底部（即 721 个条目），则更多滚动会将地址栏移出屏幕顶部。如果我触摸导航栏并将其向上拖动，则地址栏会移出屏幕。这两种方法似乎都不直观。
I imagine there's some way I scroll the body of the page using javascript that will hide it but what I've tried so fardoesn't work. No visible scrolling took place when I did that.
我想我可以通过某种方式使用 javascript 滚动页面的主体来隐藏它，但是到目前为止我尝试过的方法不起作用。当我这样做时，没有发生可见的滚动。
How can I scroll the page enough to hide a mobile browser's address bar shortly after the page loads?
如何在页面加载后不久滚动页面以隐藏移动浏览器的地址栏？
EDIT: The more I look into this, the more impossible it seems to do it without user interaction. If I require user interaction, would it be possible for a user's touch in the center of the screen to first attempt to scroll the body before attempting to scroll the div with all the entries in it? If this works the way I'm thinking then it would first slide the address bar out of the way before sliding through the list. It's kind of the reverse of the default browser behavior so it may not be possible/easy/reliable, but I'm willing to try and see if anybody has any ideas.
编辑：我研究得越多，如果没有用户交互，它似乎就越不可能做到。如果我需要用户交互，用户在屏幕中央的触摸是否有可能在尝试滚动包含所有条目的 div 之前首先尝试滚动主体？如果这像我想的那样工作，那么它会在滑动列表之前先将地址栏滑开。这有点与默认浏览器行为相反，因此它可能不可能/容易/可靠，但我愿意尝试看看是否有人有任何想法。
回答by Tony
I know this is old, but I have to add this in here..
我知道这是旧的，但我必须在这里添加它..
And while this is not a full answer, it is an 'IN ADDITION TO'
虽然这不是一个完整的答案，但它是一个“除了”
The address bar will not disappear if you're NOT using https.
如果您不使用 https，地址栏不会消失。
ALSO
还
If you are using https and the address bar still won't hide, you might have some https errors in your webpage (such as certain images being served from a non-https location.)
如果您使用 https 并且地址栏仍然不会隐藏，则您的网页中可能存在一些 https 错误（例如从非 https 位置提供的某些图像。）
Hope this helps..
希望这可以帮助..
回答by Ant Kennedy
Have a look at this HTML5 rocks post - http://www.html5rocks.com/en/mobile/fullscreen/basically you can use JS, or the Fullscreen API (better option IMO) or add some metadata to the head to indicate that the page is a webapp
看看这个 HTML5 摇滚帖子 - http://www.html5rocks.com/en/mobile/fullscreen/基本上你可以使用 JS，或者 Fullscreen API（更好的选项 IMO）或者在头部添加一些元数据来表明该页面是一个 webapp
回答by NiallMitch14
This should be the code you need to hide the address bar:
这应该是隐藏地址栏所需的代码：
window.addEventListener("load",function() {
setTimeout(function(){
// This hides the address bar:
window.scrollTo(0, 1);
}, 0);
});
Also nice looking Pokedex by the way! Hope this helps!
顺便说一下，图鉴也很好看！希望这可以帮助！
回答by Oleg
In my case problem was in css and html layout.
Layout was something like html - body - root - ...
htmland bodywas overflow: hidden, and rootwas position: fixed, height: 100vh.
就我而言，问题出在 css 和 html 布局中。布局类似于 html-body-root-...
html和body是overflow: hidden，root是position: fixed, height: 100vh。
Whith this layout browser tabs on mobile doesnt hide.
For solve this I delete overflow: hiddenfrom htmland bodyand delete position: fixed, height: 100vhfrom root.
移动设备上的此布局浏览器选项卡不会隐藏。为了解决这个问题我删除overflow: hidden从HTML和身体，并删除position: fixed，height: 100vh从根。
回答by Mārcis P
The easiest way to archive browser address bar hiding on page scroll is to add "display": "standalone",to manifest.jsonfile.
存档隐藏在页面滚动中的浏览器地址栏的最简单方法是添加"display": "standalone",到manifest.json文件。
