如何在向下滑动 UIWebView 以修复 iOS7 状态栏覆盖问题后更改 UIWebView 背景颜色？

Posted 2023-04-18

【中文标题】如何在向下滑动 UIWebView 以修复 iOS7 状态栏覆盖问题后更改 UIWebView 背景颜色？

【英文标题】：How can I change the UIWebView background color after sliding down UIWebView to fix the iOS7 status bar overlay issue?

【发布时间】：2013-10-25 08:56:44

【问题描述】：

我正在编写一个 Phonegap 3.0+ 应用程序。

用户Ludwig Kristoffersson provided a working answer hereios7 中的状态栏重叠视图存在问题

现在我的 UIWebView 的上边距为 20px，如何更改 UIWebView 背景颜色？我需要状态栏后面的区域与“人物”工具栏的背景颜色相同。

我几乎没有 Objective C 方面的经验，并且一直在寻找可能的 SO 问题以找到可行的解决方案，但没有成功。

UIWebView background colorUIWebView background is set to Clear Color, but it is not transparent 以下是我到目前为止尝试过的代码：

- (void)viewWillAppear:(BOOL)animated 
    //Lower screen 20px on ios 7
    if([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) 
        CGRect viewBounds = [self.webView bounds];
        viewBounds.origin.y = 20;
        viewBounds.size.height = viewBounds.size.height - 20;
        self.webView.frame = viewBounds;
        [self.webView setOpaque:YES];

        //neither of these seem to work when uncommented:
  //    [self.webView setBackgroundColor:[UIColor grayColor]];
  //    self.webView.backgroundColor=[UIColor grayColor];
        
    [super viewWillAppear:animated];
    

---

更新 1

- (void)viewWillAppear:(BOOL)animated

//Lower screen 20px on ios 7
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) 
    CGRect viewBounds = [self.webView bounds];
    viewBounds.origin.y = 20;
    viewBounds.size.height = viewBounds.size.height - 20;
    self.webView.frame = viewBounds;

    self.webView.backgroundColor = [UIColor grayColor];
    self.webView.opaque=NO;

[super viewWillAppear:animated];

这似乎仍然给了我状态栏后面的白色背景，而不是灰色。

我希望的结果是这样的：

【参考方案1】：

将 Opaque 属性更改为 NO 并像这样检查：

self.webView.backgroundColor = [UIColor grayColor];
self.webView.opaque=NO;

它对我来说很好用。

【讨论】：

请看我上面的“更新1”

更改颜色并检查/

奇怪...我更改为 grayColor 和 greenColor 只是为了测试。我曾多次尝试在我的 iPad、iPhone 和模拟器上清理项目，但只能让背景显示为白色。会不会是 Phonegap 稍后在某个地方设置的东西？

您是否以编程方式添加 Web 视图？

此代码将在加载 URL 时设置 Web 视图的背景颜色。一旦内容被加载到 Web 视图中，Web 视图背景将根据 URL 内容发生变化。

【参考方案2】：

所以我意识到代码将 UIWebView 向下推 20px。这意味着根据定义，空格不能是 UIWebView。空白是我通过执行以下操作更改背景颜色的主视图：

1.转到 MainViewController.xib：2.选择主视图：3.显示属性检查器并更改颜色。完成。 现在想起来很明显，但希望这对将来的人有所帮助。

【参考方案3】：

这适用于 Cordova 3 和 Cordova 2.9

因此，在您通过 CSS 设置应用的背景颜色后，如下所示：

 body
   background-color: #000;
 

转到您的 CordovaXlib.xcode.proj 并查找您的“类”文件夹 主视图控制器.m 第 142 行

取消注释“webViewDidStartLoad”方法或函数并添加

  self.webView.opaque=NO;

所以你会有这样的东西：

 - (void) webViewDidStartLoad:(UIWebView*)theWebView
 
    self.webView.opaque=NO;
    return [super webViewDidStartLoad:theWebView];
 

【参考方案4】：

Cordova 3.5 在MainViewController.m 的(void)webViewDidFinishLoad:(UIWebView*)theWebView 中设置背景颜色：

theWebView.backgroundColor = [UIColor blackColor];

成功更改或注释掉该行允许我更改 web 视图后面的 iOS 屏幕的颜色。

感谢bar54 描述此解决方案。

【参考方案5】：

或者，在 UIWebView 内的 html 正文上设置 20px 的边距，然后在 CSS 中设置的背景颜色将一直到顶部。

function onDeviceReady() 
    if (parseFloat(window.device.version) === 7.0) 
          document.body.style.marginTop = "20px";
    


document.addEventListener('deviceready', onDeviceReady, false);

请注意，您的应用需要添加设备插件才能正常工作。

【讨论】：

谢谢山姆。这就是我最初使用的。我的一些视图的性质（可滚动，文本区域也可滚动）意味着额外的正文边距有时会向上滑动。我尝试将溢出-y 设置为隐藏，但仍然无法绕过它。感谢您的意见。

【参考方案6】：

添加以下 CSS 定义：

#ios7statusbar 
  width:100%;
  height:20px;
  background-color:white;
  position:fixed;
  z-index:10000;

.ios7 .ui-page, .ios7 .ui-header, .ios7 .ui-pane 
  margin-top: 20px;

在您的应用初始化中添加基于 javascript 的用户代理检测：

if (navigator.userAgent.match(/(iPad.*|iPhone.*|iPod.*);.*CPU.*OS 7_\d/i)) 
  $("body").addClass("ios7");