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)
}
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)
}
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)")
}
}
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)")
}
}
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.")
}
}
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.")
}
}
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)")
}
}
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)")
}
}
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)")
}
}
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!