Load HTML File Into WKWebView Programmatically

In this tutorial, I’ll show you how to load an HTML file into a WKWebView programmatically in an iOS application.

Step 1: Create WKWebView Programmatically

First, let’s create an instance of WKWebView programmatically. Then initialize the WKWebView with a frame that matches the size of the device’s screen, and then add it to a view hierarchy.

Here is how you create a WKWebView:

var webView: WKWebView!

override func viewDidLoad() {
    super.viewDidLoad()
    
    webView = WKWebView(frame: CGRect(x:  0, y:  0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))
    self.view.addSubview(webView)
}

Step 2: Implement WKNavigationDelegate Functions

Next, you need to implement the WKNavigationDelegate protocol in your view controller. This protocol allows you to respond to various events that occur during the loading of a webpage. Specifically, you will implement webViewDidStartLoad and webViewDidFinishLoad.

Here’s how to set up the delegate and implement these methods:

class ViewController: UIViewController, WKNavigationDelegate {
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // ... webView initialization code ...
        
        webView.navigationDelegate = self
    }
    
    // WKNavigationDelegate methods
    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        print("Started to load")
    }
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        print("Finished loading")
    }
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        print("Failed to load with error: \(error)")
    }
}

Step 3: Load the HTML File into WKWebView Programmatically

After setting up the WKWebView, you can load an HTML file from your app bundle.

To do this, you need to get the URL of the HTML file and then create a URLRequest with that URL. Finally, call load(_:) on your WKWebView instance to start loading the HTML content. Also, you can load HTML files from web URLs.

Here’s how to load an HTML file named “index.html”:

override func viewDidLoad() {
    super.viewDidLoad()
    
    // ... webView initialization and delegate setup ...
    
    if let htmlFileURL = Bundle.main.url(forResource: "index", withExtension: "html") {
        let htmlURLRequest = URLRequest(url: htmlFileURL)
        webView.load(htmlURLRequest)
    } else {
        print("Local HTML file not found.")
    }
}

Complete Code Example

Putting it all together, here’s the complete code example for loading an HTML file into a WKWebView programmatically:

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate {
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        webView = WKWebView(frame: CGRect(x:  0, y:  0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))
        self.view.addSubview(webView)
        webView.navigationDelegate = self
        
        if let htmlFileURL = Bundle.main.url(forResource: "index", withExtension: "html") {
            let htmlURLRequest = URLRequest(url: htmlFileURL)
            webView.load(htmlURLRequest)
        } else {
            print("Local HTML file not found.")
        }
    }
    
    // WKNavigationDelegate methods
    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        print("Started to load")
    }
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        print("Finished loading")
    }
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        print("Failed to load with error: \(error)")
    }
}

Load HTML File Into WKWebView Programmatically

Conclusion

I hope this tutorial was helpful to you.

For more Swift Code examples and tutorials, please check the Swift Code Examples page on this website.

Happy coding!