iPhone native app with HTML and CSS in UIWebView

Question

I have added my Html, CSS and image files in the bundle of my Xcode application.

In my project I loaded the Html content in the UIWebView like this,

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

NSURL *Url = [NSURL fileURLWithPath:htmlString];
[self.webView loadHTMLString:htmlString baseURL:Url];

The Html file is loaded, but CSS and Images are missing.

In my Html file add the CSS and images as follows,

<link href="/css/myCss.css" type="text/css" rel="stylesheet"/>

   <img class"icon" alt="" src="/img/icon.png" />

Need help to resolve this problem.

try adding tow dots before first '/' in addresses eg. "../css/myCss.css" . — Abhinav Gauniyal
– Abhinav Gauniyal, Commented Jul 28, 2014 at 7:29
Does it work if you remove the folders in the paths? So that /css/myCss.css becomes myCss.css and /img/icon.png becomes icon.png. I believe that's how i got it to work in my app a while ago, despite the fact that the files were in folders & groups. — TheQ
– TheQ, Commented Jul 28, 2014 at 8:01
Oh, sorry, just checked the code, and the app i was thinking about didn't even use an WebView :/ — TheQ
– TheQ, Commented Jul 28, 2014 at 8:17

Dandalf · Accepted Answer · 2014-07-28 19:37:19Z

1

First, get rid of the initial / in the file paths in the html so you have:

<link href="css/myCss.css" type="text/css" rel="stylesheet"/>

<img class"icon" alt="" src="img/icon.png" />

Make sure when you are adding the files you are using the Folders option: "Create folder references for any added folders".

The code loading the html in the webview can be simplified to look like:

NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"myFile" ofType:@"html" inDirectory:nil];

[self.webView loadRequest:[NSURLRequest requestWithURL:url]];

I also suggest putting your html assets into a "www" or "html" folder instead of the base folder.

answered Jul 28, 2014 at 19:37

Dandalf

2,4331 gold badge20 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

iPhone native app with HTML and CSS in UIWebView

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related