WKWebView in Interface Builder

Question

It seems that the IB object templates in XCode 6 beta are still creating old-style objects (UIWebView for iOS and WebView for OSX). Hopefully Apple will update them for the

Answer 1

Info.plist

add in your Info.plist transport security setting

 <key>NSAppTransportSecurity</key>
 <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
 </dict>

Xcode 9.1+

Using interface builder

You can find WKWebView element in the Object library.

Add view programmatically with Swift 5

let webView = WKWebView(frame: .zero, configuration: WKWebViewConfiguration())
view.addSubview(webView)
webView.translatesAutoresizingMaskIntoConstraints = false
webView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
webView.rightAnchor.constraint(equalTo: view.safeAreaLayoutGuide.rightAnchor).isActive = true
webView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
webView.leftAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leftAnchor).isActive = true

Add view programmatically with Swift 5 (full sample)

import UIKit
import WebKit

class ViewController: UIViewController {

    private weak var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        initWebView()
        webView.loadPage(address: "http://apple.com")
    }

    private func initWebView() {
        let webView = WKWebView(frame: .zero, configuration: WKWebViewConfiguration())
        view.addSubview(webView)
        self.webView = webView
        webView.translatesAutoresizingMaskIntoConstraints = false
        webView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
        webView.rightAnchor.constraint(equalTo: view.safeAreaLayoutGuide.rightAnchor).isActive = true
        webView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
        webView.leftAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leftAnchor).isActive = true
    }
}

extension WKWebView {
    func loadPage(address url: URL) { load(URLRequest(url: url)) }
    func loadPage(address urlString: String) {
        guard let url = URL(string: urlString) else { return }
        loadPage(address: url)
    }
}

Answer 2

You are correct - it doesn't seem to work. If you look in the headers, you'll see:

- (instancetype)initWithCoder:(NSCoder *)coder NS_UNAVAILABLE;

which implies that you can't instantiate one from a nib.

You'll have to do it by hand in viewDidLoad or loadView.

Answer 3

In XCode Version 9.0.1 WKWebView is available on Interface Builder.

Answer 4

I've linked WebKit, now it's working!

Answer 5

This worked for me in Xcode 7.2...

First add the web view as a UIWebView outlet in the storyboard / IB. This will give you a property like this:

@property (weak, nonatomic) IBOutlet UIWebView *webView;

Then just edit your code to change it to a WKWebView.

@property (weak, nonatomic) IBOutlet WKWebView *webView;

You should also change the custom class to WKWebView in the Identity inspector.

Answer 6

Not sure if this helps but I solved the problem for me by including the WebKit framework for the target. Don't embed it just link the reference. I still use the WebView object in IB and drop it on the ViewController I'm embedding it in and I've never had a problem...

I've worked on 4 WKWebView MacOS projects now and the WebView has worked properly in each project.