Load local web files & resources in WKWebView
Updated for Swift 4, Xcode 9.3
This methods allows WKWebView to properly read your hierarchy of directories and sub-directories for linked CSS, JS and most other files. You do NOT need to change your HTML, CSS or JS code.
Solution (Quick)
- Add the web folder to your project (File > Add Files to Project)
- Copy items if needed
- Create folder references *
- Add to targets (that are applicable)
Add the following code to the
viewDidLoad
and personalize it to your needs:let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "website")!webView.loadFileURL(url, allowingReadAccessTo: url)let request = URLRequest(url: url)webView.load(request)
Solution (In-Depth)
Step 1
Import the folder of local web files anywhere into your project. Make sure that you:
☑️ Copy items if needed
☑️ Create folder references (not "Create groups")
☑️ Add to targets
Step 2
Go to the View Controller with the WKWebView and add the following code to the viewDidLoad
method:
let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "website")!webView.loadFileURL(url, allowingReadAccessTo: url)let request = URLRequest(url: url)webView.load(request)
index
– the name of the file to load (without the.html
extension)website
– the name of your web folder (index.html
should be at the root of this directory)
Conclusion
The overall code should look something like this:
import UIKitimport WebKitclass ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate { @IBOutlet weak var webView: WKWebView! override func viewDidLoad() { super.viewDidLoad() webView.uiDelegate = self webView.navigationDelegate = self let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "Website")! webView.loadFileURL(url, allowingReadAccessTo: url) let request = URLRequest(url: url) webView.load(request) }}
If any of you have further questions about this method or the code, I'll do my best to answer!
This work For Me:
WKWebView *wkwebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, 1024, 768)]; wkwebView.navigationDelegate = self; wkwebView.UIDelegate = self; [wkwebView.configuration.preferences setValue:@"TRUE" forKey:@"allowFileAccessFromFileURLs"]; NSURL *url = [NSURL fileURLWithPath:YOURFILEPATH]; [wkwebView loadFileURL:url allowingReadAccessToURL:url.URLByDeletingLastPathComponent]; [self.view addSubview:wkwebView];
I was facing the same issue my condition was, I am downloading some HTML content from the server and save it to the Document directory and show it inside the application. The same controller uses the LIVE URL also I have to put the condition with url scheme. Tested on iOS 13 Xcode 11
if Url.scheme == "file" as String { wkWebView.loadFileURL(Url, allowingReadAccessTo: Url) } else { let request = URLRequest.init(url: Url, cachePolicy:.reloadIgnoringLocalCacheData, timeoutInterval:60) wkWebView.load(request) }
it worked perfect for me