WKwebview content covers the top status bar

Question

I followed this tutorial to create a WKwebview which worked but with one problem. The top status bar is covered by the content of the webView.

Since the webView IS the containerView, how then can the webView go under the status bar in code. Thanks

import UIKit
import WebKit

class ViewController: UIViewController {
@IBOutlet var mainView : UIView?
var webView: WKWebView?

override func loadView() {
    super.loadView() // call parent loadView
    self.webView = WKWebView() // instantiate WKWebView
    self.view = self.webView! // make it the main view
}

override func viewDidLoad() {
    super.viewDidLoad() // run base class viewDidLoad
    let url = NSURL(string:"https://www.google.com") // make a URL
    let req = NSURLRequest(URL:url!) // make a request w/ that URL
    self.webView!.loadRequest(req) // unwrap the webView and load the request.
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

}

Answer 1

Here's what ended up working for me (very similar to Herbert Bay's answer).

Swift:

class ViewController: UIViewController, WKNavigationDelegate {

    let webView = WKWebView()

    override func viewDidLoad() {
        // Get height of status bar (iPhone X introduced a new status bar)
        let statusBarHeight = UIApplication.shared.statusBarFrame.height
        // Initialize the frame
        webView.frame = CGRect.init(x: 0, y: statusBarHeight, width: view.bounds.maxX, height: view.bounds.maxY)
        // Set background color of status bar (optional)
        self.view.backgroundColor = UIColor(red: 248/255.0, green: 248/255.0, blue: 248/255.0, alpha: 1.0)
    }
}

Setting y in CGRect.init() to the height of the status bar eliminates any overlapping of your web view and the status bar.

Answer 2

I would add the WKWebView as subview of the container view and use the size of the status bar to init the WKWebView with initWithFrame. Happy to learn if there is a better approach.

WKWebViewConfiguration *webViewConfiguration = [[WKWebViewConfiguration alloc] init];
CGFloat heightStatusBar = [UIApplication sharedApplication].statusBarFrame.size.height;
self.webView = [[WKWebView alloc] initWithFrame:CGRectMake(0.0, heightStatusBar,
                                                           self.view.frame.size.width,
                                                           self.view.frame.size.height-heightStatusBar)
                                  configuration:webViewConfiguration];
[self.view addSubview:_webView];