How to make Webkit webView with Swift with safe area constraints for iPhone X?

Question

This is the configuration of the storyboard: see the image

*Take a look above the link for the image, support from iOS9 to iOS11

Following is the working code solution:

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate, UIApplicationDelegate, WKNavigationDelegate   {

    @IBOutlet weak var webViewContainer: UIView!

    let requestURLString = "http://google.com/“

    var webView: WKWebView!

    override func viewDidLoad() {        

        super.viewDidLoad()
        let webConfiguration = WKWebViewConfiguration()

        let customFrame = CGRect.init(origin: CGPoint.zero, size: CGSize.init(width: 0.0, height: self.webViewContainer.frame.size.height))
        self.webView = WKWebView (frame: customFrame , configuration: webConfiguration)
        webView.translatesAutoresizingMaskIntoConstraints = false
        self.webViewContainer.addSubview(webView)
        webView.topAnchor.constraint(equalTo: webViewContainer.topAnchor).isActive = true
        webView.rightAnchor.constraint(equalTo: webViewContainer.rightAnchor).isActive = true
        webView.leftAnchor.constraint(equalTo: webViewContainer.leftAnchor).isActive = true
        webView.bottomAnchor.constraint(equalTo: webViewContainer.bottomAnchor).isActive = true
        webView.heightAnchor.constraint(equalTo: webViewContainer.heightAnchor).isActive = true  

        webView.uiDelegate = self
        webView.navigationDelegate = self
        webView.scrollView.bounces = false  
        self.openUrl()
    }

    func openUrl() {
        let url = URL (string: requestURLString)
        let request = URLRequest(url: url!)
        webView.load(request)

    }
}

I am sharing the link which contains this project: https://github.com/kiril6/iPhoneX-webkitWebView

source: http://delovski.net/webkitwebview/

Answer 1

class ViewController:UIViewController,WKNavigationDelegate,WKUIDelegate 
{
@IBOutlet weak var webViewContainer: UIView!
fileprivate var requestURLString: URL?
var webView: WKWebView!

override func viewDidLoad() {
    super.viewDidLoad()
    loadUrl()
}

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

func loadUrl() {
    requestURLString = URL(string: "https://www.apple.com/in/")!
    guard let url = requestURLString else { return }

    webView = WKWebView()
    webView.navigationDelegate = self
    webView.allowsLinkPreview = true
    webView.uiDelegate = self

    webViewContainer.addSubview(webView)
    webViewContainer.sendSubview(toBack: webView)
    addConstraints(to: webView, with: webViewContainer)
    webView.load(NSURLRequest(url: url) as URLRequest)
}

func addConstraints(to webView: UIView, with superView: UIView) {
    webView.translatesAutoresizingMaskIntoConstraints = false
    let leadingConstraint = NSLayoutConstraint(item: webView, attribute: .leading, relatedBy: .equal, toItem: superView, attribute: .leading, multiplier: 1, constant: 0)
    let trailingConstraint = NSLayoutConstraint(item: webView, attribute: .trailing, relatedBy: .equal, toItem: superView, attribute: .trailing, multiplier: 1, constant: 0)
    let topConstraint = NSLayoutConstraint(item: webView, attribute: .top, relatedBy: .equal, toItem: superView, attribute: .top, multiplier: 1, constant: 0)
    let bottomConstraint = NSLayoutConstraint(item: webView, attribute: .bottom, relatedBy: .equal, toItem: superView, attribute: .bottom, multiplier: 1, constant: 0)
    superView.addConstraints([leadingConstraint, trailingConstraint, topConstraint, bottomConstraint])
}
}

Hope this will work for you, please check. Also, I am sharing the link which contains the project for loading an URL using WKWebView in Swift 4.0: https://github.com/ipran/WebViewTestApp