\n
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.
\nAdd the web folder to your project (File > Add Files to Project)
\nAdd the following code to the viewDidLoad
and personalize it to your needs:
let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "website")!\nwebView.loadFileURL(url, allowingReadAccessTo: url)\n
\nImport the folder of local web files anywhere into your project. Make sure that you:
\n\n\n\n☑️ Copy items if needed
\n☑️ Create folder references (not "Create groups")
\n☑️ Add to targets
\n
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")!\nwebView.loadFileURL(url, allowingReadAccessTo: url)\n
\nindex
– 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)The overall code should look something like this:
\nimport UIKit\nimport WebKit\n\nclass ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {\n\n @IBOutlet weak var webView: WKWebView!\n \n override func viewDidLoad() {\n super.viewDidLoad()\n \n webView.uiDelegate = self\n webView.navigationDelegate = self\n \n let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "Website")!\n webView.loadFileURL(url, allowingReadAccessTo: url)\n }\n \n}\n
\nIf any of you have further questions about this method or the code, I'll do my best to answer!
\n","author":{"@type":"Person","name":"JDev"},"upvoteCount":103}}}Reputation: 5558
Unlike with UIWebView and previous versions of WKWebView (iOS 10 & macOS 10.12), the default load operation for local files has moved from Bundle.main.path
to Bundle.main.url
. Similarly, loadFileURL
has also become the default function to load local resources in WKWebView.
I know that .path
and .url
are entirely different and have both worked in the past – .path
historically being the default-chosen method; however, it seems that the latest versions of Swift have broken most, if not all, .path
solutions. The .path
solutions seem to now flatten the directory hierarchy, putting all of the CSS, JS, and any other sub-directory contents, into one big directory. This causes loading errors when WKWebView attempts to load index.html, for example, with a linked, sub-folder stylesheet (ie. /css/style.css
).
After seeing numerous questions and countless uncertain/broken answers to match, is there a quick and painless solution for implementing a WKWebView that can load local resources (including linked CSS/JS files), without any workarounds?
Upvotes: 58
Views: 79981
Reputation: 5558
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.
Add the web folder to your project (File > Add Files to Project)
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)
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
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)
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)The overall code should look something like this:
import UIKit
import WebKit
class 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)
}
}
If any of you have further questions about this method or the code, I'll do my best to answer!
Upvotes: 103
Reputation: 1607
It is possible to use resources from you project and even shared libraries inside html code with WKWebView
.
For instance, I show how to load pic.png
from bundle that contains ResourceContainingBundleClassNamed
class.
NSSTring * htmlCode = @"<img src='pic.png'>";
NSBundle * bundle = [NSBundle bundleForClass:[ResourceContainingBundleClassNamed class]];
NSURL * base = bundle.resourceURL;
WKWebView * represent = [WKWebView new];
[represent loadHtmlString: htmlCode baseURL: base];
The magic is in resourceURL
bundle property. If you just get path for desired file, then convert it to URL - no success.
Upvotes: 0
Reputation: 31
1, Open project setting and got to Build Phases tab, open Link Binary with Libraries. Add Webkit framework.
2, Add the html to your project (Copy items if needed)
3, add this to your code: @IBOutlet weak var webView: WKWebView!
4, viewDidLoad viewDidLoad
Upvotes: 2
Reputation: 417
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
Upvotes: 2
Reputation: 1411
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];
Upvotes: 15