How to load local html files with images, js and css on WebView Cocoa / Mac OS

Question

I have code to make this work on iOS. Using whatever I found here and around the Web I managed to get somewhere making the Cocoa Mac Os version, but the images do not load. CSS and Javascript doesn't seem to be loading either. The directory for the HTML is being added to the Resources group but it's being added as Folder References (blue folder) which makes Xcode respect the directory structure of the HTML App.

Here's the code I'm trying to use:

NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"index" 
                                                     ofType:@"html" 
                                                inDirectory:@"/Patient_eMMR_HTML5" ];
NSString *html = [NSString stringWithContentsOfFile:htmlPath 
                                           encoding:NSUTF8StringEncoding 
                                              error:nil];

[[webView mainFrame] loadHTMLString:html baseURL:[NSURL fileURLWithPath:
                                                   [NSString stringWithFormat:@"%@/Patient_eMMR_HTML5/", 
                                                   [[NSBundle mainBundle] bundlePath]]]];

This is the iOS version of the code from which I based the code I use above:

NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"index" 
                                                     ofType:@"html" 
                                                inDirectory:@"/Patient_eMMR_HTML5" ];

NSString *html = [NSString stringWithContentsOfFile:htmlPath 
                                           encoding:NSUTF8StringEncoding 
                                              error:nil];

[webView loadHTMLString:html 
                baseURL:[NSURL fileURLWithPath:
                         [NSString stringWithFormat:@"%@/Patient_eMMR_HTML5/", 
                          [[NSBundle mainBundle] bundlePath]]]];

Any help is greatly appreciated. Thanks.

score 14 · Accepted Answer · answered Jul 27 '11 at 05:11

14

There's no need to muck about with base URLs if you load the HTML via an NSURLRequest rather than as a string:

NSString* filePath = [[NSBundle mainBundle] pathForResource:@"index" 
                                                     ofType:@"html"
                                                inDirectory:@"Patient_eMMR_HTML5"];
NSURL* fileURL = [NSURL fileURLWithPath:filePath];
NSURLRequest* request = [NSURLRequest requestWithURL:fileURL];
[[webView mainFrame] loadRequest:request];

Note that you should specify the directory name only in the ‑pathForResource:… method, don't prefix it with a forward slash. It is assumed that the named directory is rooted in the main bundle's directory.

Note that UIWebView also has a ‑loadRequest: method, so you could use almost the same code on iOS.

answered Jul 27 '11 at 05:11

Rob Keniger

45,830
6
101
134

Thanks very much Rob, it worked. I still have a problem where Canvas is not drawing. I'm not going to use this approach at this point because we can't re-test everything so now I'm doing a silly link which opens Safari, but I did wanted to learn this. Thanks Again. – HotFudgeSunday Jul 27 '11 at 13:39
As far as Canvas goes, are you sure that JavaScript is enabled for the WebView? – Rob Keniger Jul 27 '11 at 14:10
Well, I haven't enabled anything or disabled anything. The code is exactly what you gave me there. Still, a lot of things that are being fired via Javascript work. It's just Canvas that seems to fail. I even have some CSS animations which are created programatically and are working. I'll do a search for this. – HotFudgeSunday Jul 27 '11 at 15:32
`fileURLWithPath:` was exactly what I need - `URLWithString:` wasn't returning what I wanted. – ArtOfWarfare May 12 '13 at 05:07

score 3 · Answer 2 · answered Mar 02 '14 at 04:17

3

This worked for me with resourceURL on Mac OSX

[webView loadHTMLString:htmlContent baseURL:[[NSBundle mainBundle] resourceURL]]

answered Mar 02 '14 at 04:17

real 19

748
8
32

Just what I needed, thanks! Here it is in Swift 4: `webView.mainFrame.loadHTMLString(html, baseURL: Bundle.main.resourceURL!)` – Clifton Labrum Mar 08 '18 at 05:49

score 1 · Answer 3 · edited May 23 '17 at 11:53

mserin, this question was directed at the Cocoa Framework for Mac Os X. You are using a UIWebView which is part of UIKit for Cocoa Touch. If you're trying to build this for iPhone / iPad you should look at this post.

If you're trying to do this fon Mac use the code we're using here but you need to include the WebKit framework like this:

#import <WebKit/WebKit.h>

And then subclass WebView, not UIWebView:

WebView *webView;

With a property like this:

@property (nonatomic, retain) IBOutlet WebView *webView;

How to load local html files with images, js and css on WebView Cocoa / Mac OS

3 Answers3