javascript 如何在 iOS 7 Web 应用程序中完全隐藏状态栏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21059239/
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 do I hide the status bar completely in an iOS 7 web app?
提问by user3180068
I'm building a single page JavaScript/PHP web app that currently hides the url barand stays in full screen successfullywith the following code:
我正在构建一个单页 JavaScript/PHP Web 应用程序，该应用程序当前隐藏了url 栏并使用以下代码成功保持全屏：
<meta name="apple-mobile-web-app-capable" content="yes">
What I need to do nowis hide the actual status bar. I've tried the following meta tags to no avail:
我现在需要做的是隐藏实际的状态栏。我尝试了以下元标记无济于事：
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
Is there some other meta tag or JavaScript/PHP code I could use to hide the status bar completely? I noticed that the Belly Card iPad mini web app (www.bellycard.com) does this successfully and I'm not sure how. Any insight is genuinely appreciated.
是否有其他一些元标记或 JavaScript/PHP 代码可以用来完全隐藏状态栏？我注意到 Belly Card iPad mini 网络应用程序 (www.bellycard.com) 成功地做到了这一点，但我不确定是如何做到的。任何见解都非常感谢。
Cheers!
干杯!
回答by staticVoidMan
There is no direct method for this (see: similar question) but... this link seems promising:
对此没有直接的方法（请参阅：类似问题）但是......这个链接似乎很有希望：
The summary of the link is as below:
链接摘要如下：
Key Comments (at link):
主要评论（在链接）：
When viewing sites in Safari you do not have the ability to customize the status bar in any way. Previous versions of iOS offered the ability to view sites in full screen mode, but that was removed in iOS7, see
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review.
在 Safari 中查看站点时，您无法以任何方式自定义状态栏。以前版本的 iOS 提供了以全屏模式查看站点的功能，但在 iOS7 中已删除，请参阅
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review。
Key Notes (in link):
主要说明（在链接中）：
StatusBar Cordova Plugin
With iOS7 Apple introduced some native Objective C APIs to control the status bar. Because of Cordova, we have the ability to bridge these native APIs directly into JavaScript APIs.
Luckily for us @shazron has already done this with the StatusBar plugin.After adding the plugin to your application, you are given a StatusBar object with a number of methods to manipulate the status bar in JavaScript directly.
...
You can hide the status bar using StatusBar.hide(), or even change its background color with StatusBar.backgroundColorByName() or StatusBar.backgroundColorByHexString().
For example, the following sets the status bar to green.<script> document.addEventListener('deviceready', function() { StatusBar.overlaysWebView(false); StatusBar.backgroundColorByName('green'); }, false); </script>...
Outstanding IssuesWhile the web has come up with workarounds for most of the iOS7 status bar issues, there are still a few that remain unresolved.
- The status bar still overlays content displayed in a cordova InAppBrowser. There is no known workaround, but a fix is slated for cordova 3.2.
- The StatusBar plugin does not work in apps that lock the device into landscape mode.
状态栏 Cordova 插件
在 iOS7 中，Apple 引入了一些原生的 Objective C API 来控制状态栏。由于 Cordova，我们能够将这些原生 API 直接桥接到 JavaScript API。
幸运的是，@shazron 已经使用StatusBar 插件做到了这一点。将插件添加到您的应用程序后，您将获得一个 StatusBar 对象，其中包含许多直接在 JavaScript 中操作状态栏的方法。
...
您可以使用StatusBar.hide()隐藏状态栏，甚至可以使用StatusBar.backgroundColorByName()或StatusBar.backgroundColorByHexString()更改其背景颜色。
例如，以下将状态栏设置为绿色。<script> document.addEventListener('deviceready', function() { StatusBar.overlaysWebView(false); StatusBar.backgroundColorByName('green'); }, false); </script>...
悬而未决的问题虽然 Web 已经为大多数 iOS7 状态栏问题提出了解决方法，但仍有一些尚未解决。
- 状态栏仍然覆盖在cordova InAppBrowser 中显示的内容。没有已知的解决方法，但已针对 cordova 3.2 进行了修复。
- StatusBar 插件在将设备锁定为横向模式的应用程序中不起作用。
Key Critic Comment (at link):
关键评论家评论（在链接）：
These solutions seem to be working only for Phonegap applications, for us who don't use this and simply wrap our apps in a webview it seems the only easy solution is to set the webview's top property to 20 instead of zero and that takes care of the issue at hand.
这些解决方案似乎只适用于 Phonegap 应用程序，对于我们不使用它而只是将我们的应用程序包装在 webview 中的我们来说，似乎唯一简单的解决方案是将 webview 的 top 属性设置为 20 而不是零，这样就可以了手头的问题。
