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.

Rob Keniger · Accepted Answer · 2011-07-27 05:11:19Z

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, 2011 at 5:11

Rob Keniger

46k6 gold badges106 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

HotFudgeSunday Over a year ago

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.

Rob Keniger Over a year ago

As far as Canvas goes, are you sure that JavaScript is enabled for the WebView?

HotFudgeSunday Over a year ago

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.

ArtOfWarfare Over a year ago

fileURLWithPath: was exactly what I need - URLWithString: wasn't returning what I wanted.

real 19 · Accepted Answer · 2014-03-02 04:17:08Z

3

This worked for me with resourceURL on Mac OSX

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

answered Mar 2, 2014 at 4:17

real 19

7488 silver badges32 bronze badges

1 Comment

Clifton Labrum Over a year ago

Just what I needed, thanks! Here it is in Swift 4: webView.mainFrame.loadHTMLString(html, baseURL: Bundle.main.resourceURL!)

Community · Accepted Answer · 2017-05-23 11:53:51Z

1

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;

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Aug 4, 2011 at 11:38

HotFudgeSunday

1,4032 gold badges24 silver badges29 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related