UIWebView baseURL and absolute path

Question

I have an HTML page that is constructed like this:

<html>
  <head>
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>

  </body>
</html>

It is stored in my documents directory:

/Users/username/Library/Application Support/iPhone Simulator/5.1/Applications/12345-ID/Documents/mysite/index.html

I have also stored the style.css in the documents directory:

/Users/username/Library/Application Support/iPhone Simulator/5.1/Applications/12345-ID/Documents/mysite/style.css

But now, when I try to load the html into my webview using this:

NSURL *test = [NSURL URLWithString:@"file:///Users/username/Library/Application Support/iPhone%20Simulator/5.1/Applications/12345-ID/Documents/mysite/"]
[myWebView loadHTMLString:<the content retrieved from index.html> baseURL:test];

The css is not loaded, when I intercept the request to the stylesheet with a NSURLProtocol I can see the request is wrong. It is trying to request:

file:///style.css

instead of the full baseURL. Now I can solve this by removing the / in front of /style.css in the html file. But is there an easy way to resolve this in native code without modifying the html?

Have you tried taking the '/' off of the end of the NSURL *test = [NSURL ....... line. You may have a double slash condition occuring, which may be causing it to default to the user location, just a thought. — trumpetlicks
OK in a last attempt, try the answer I have provided. It should work, as I have used this method in my own apps to display tons of images using relative paths. The only difference is in my HTML I don't have the slash in front of the filename, which does mean that your "/style.css" would have to change to "style.css". Is there a reason you are so against that??? — trumpetlicks
No there is not a particular reason I am against removing the / in front, but the HTML is not created by me. So I wanted to see if there was a way to solve this in native so I would have to bother the creator to remove the / — Thizzer
Sidenote: You can get a local URI using pathForResource:ofType: from NSBundle and then reference using file://<local_uri> in your own HTML. For example, for jquery-2.1.1.min.js, I use: NSString *jQueryFile = [[NSBundle mainBundle] pathForResource:@"jquery-2.1.1.min" ofType:@"js"]; NSString *jQueryUri = [@"file://" stringByAppendingString:jQueryFile]; and then I simply add it to my HTML: NSString *html = [NSString stringWithFormat:@"<some_html><script type=\"text/javascript\" src=\"%@\"></script></some_html>", jQueryUri];. Finally: [myWebView loadHTMLString:html baseURL:nil]; — Alejandro Iván

trumpetlicks trumpetlicks · Accepted Answer · 2012-06-28T06:26:16

Generate your path and base url the following way:

NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
[webView loadHTMLString:htmlString baseURL:baseURL];

A great blog on the subject:

http://iphoneincubator.com/blog/windows-views/uiwebview-revisited

A SO QA on the subject

UIWebView and local css file

UIWebView baseURL and absolute path

2 Answers