iPad loading local HTML into web view with images and javascript

Question

Edit:

So the answer was in this post: Loading javascript into a UIWebView from resources

You'll find everything you need to know for loading an HTML5 app with directories there, just make sure you drop files on your Xcode project clicking the radio button that reads "Create folder references for any added folders". Then just use the code on that links I've added up there.

Thanks to Sergio for the help.

---

I've been through StackOverflow several times already and none of the code I find there can display the images of my html5 App. The hard part seems to be loading files from different subdirectories. I do not want to throw everything in the root and then use the groups in Xcode because I would have to re-factor a lot of the HTML5 code.

I'd like to build this in as a light container, not have to use PhoneGap. Besides PhoneGap comes with a bigger bagage of bugs (I tested our app and it crashed on the iPad and worked on the iPhone). It's hard enough to deal with the HTML5 side of things and Cocoa Touch.

So here's how I load the HTML page:

[webView loadRequest:[NSURLRequest requestWithURL:
       [NSURL fileURLWithPath:[[NSBundle mainBundle] 
       pathForResource:@"index" ofType:@"html"]isDirectory:NO]]]; 

I have found some solution that it's getting me closer to "Create folder references for any added folders" when adding the files to the resources folder, I can now see some of the images being loaded. The JS doesn't seem to be working properly. I have tested this app loading it from a URL running on a local server and it does work in that case.

So CSS is obviously working, images too but JS seems to be an issue.

Hopefully I'll find the answer soon.

---

Old

(this is when I was including the folders the wrong way)

So as you guys don't have to be wondering what am I seeing ( it looks to me like js and images are not loading and I do have subdirectories on the HTML5 app ):

---

Interesting posts which are related to this:

Loading javascript into a UIWebView from resources Link to resources inside WebView - iPhone

Answer 1

Indeed, you can load a local HTML in a UIWebView by means of:

– loadHTMLString:baseURL:

The only thing you should be aware of is how to specify the baseURL so that it goes to your local resources directory. So, if you add in your HTML:

<img src="localImage.png" />
<link rel="stylesheet" type="text/css" href="theme.css" />
<script type="text/javascript" src="filename.js"></script>

this will be found among your project resources.

It definitely works. Possibly there is some "issue" with your HTML and javascript source (like, e.g., using subdirectories or absolute URLs).

EDIT:

If you need to organize your resources (images and scripts) in directories inside of the Resources directory of your app, see this S.O. topic.

To get the path to your Resources directory, use:

 NSString* filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];  

An alternative could be hosting all of your file in the Documents directory of your app (which is reserved for user content). In this case, I suppose you could download an archive of your app and install it in the document directory.