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 ):

enter image description here

Interesting posts which are related to this:

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

you say that your images don't display; is the rest of the HTML (i.e, text) rendered? — sergio
– sergio, Commented May 30, 2011 at 19:05
Yes, the text loads. Sorry about that. I haven't tested if links work, though. I've did too many tests and I forgot to test that on the latest ones. — HotFudgeSunday
– HotFudgeSunday, Commented May 30, 2011 at 19:08
Are you including all of your images in the resources group of you project? Or where are they hosted? — sergio
– sergio, Commented May 30, 2011 at 19:13
Yes, I am. The duplicate ones I had to delete because they're giving me error messages. Still, those duplicates are just small things. I only see images and I think this is because the rest of the code uses js heavily and that's not loading either. — HotFudgeSunday
– HotFudgeSunday, Commented May 30, 2011 at 19:22

Community · Accepted Answer · 2017-05-23 12:22:31Z

6

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.

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered May 30, 2011 at 18:55

sergio

69k11 gold badges105 silver badges123 bronze badges

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

4 Comments

HotFudgeSunday Over a year ago

I am using subdirectories on my paths for the HTML5 App. Will this be an issue? Maybe that is the problem. I have a ton of images and some have duplicate names (I'm using someboady elses code) which will be an issue, I know. I wonder how does phonegap do it. Do they just search through the directories looking for files or something like that? On Phonegap you don't even need to put your files as resources. All you need is the index.html.

sergio Over a year ago

I reviewed my answer to include more info that could help you. Also, a hint at how you can create directories inside of your Resources folder.

HotFudgeSunday Over a year ago

I'll give it a shot, thanks a lot Sergio. I'll post my results.

HotFudgeSunday Over a year ago

I don't really have an issue with the organization, the problem is I would have to refactor a LOT of the HTML5 app to move the images out of the images folder. But I will do more tests before I drive everyone crazy with questions. Thx.

Collectives™ on Stack Overflow

iPad loading local HTML into web view with images and javascript

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related