UIWebView display locally stored website (HTML, images, Javascript)

Question

I've looked EVERYWHERE for this, can't find anything. I basically need to store an entire website inside of my iPhone for some interesting reasons. Regardless I can't figure out how to display it correctly in my UIWebView.

EDIT: I should clarify, I can load the original HTML file, and I have chagned all of the pathing to be local, except nothing gets linked in.

Here is the code

self.dataDetectorTypes = UIDataDetectorTypeLink;
NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSURL *url = [NSURL fileURLWithPath:path];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[self loadRequest:request];

index.html has a bunch of <script type="text/javascript" src="somescript.js">

None of the JS code gets executed

Answer 1

Looks like you're loading the HTML from inside your bundle. This means that all the additional files (.js, .css, and any media files) also need to be present in your bundle. So the first thing to check is to look inside the contents of your executable and make sure the js, etc. files are included.

If that looks fine the next thing to check is if the html, js, or css files reference content via relative or absolute URLs. If there's an absolute path reference in the web content then UIWebView is going to try to download that content each time so it'll only work when you have a net connection. If the path is relative then it's going to look in the bundle to see if such a file exists.

When you included the html and content into the XCode project file you probably dragged the file(s) over to the project side-bar and were asked whether to "Recursively create groups for any added folders" or to "Create Folder References for any added folders."

The default is the first one which means XCode creates a yellow folder in your project, but it'll ignore the directory hierarchy on disk when time comes to generate the output bundle. If you choose the second option then the folder is blue and if you look in your output bundle you'll see that the whole folder hierarchy has been replicated.

The first works for simple web pages where everything is at the same folder level and you can use the method you list above to load it. The second case works better if your web page is complex and references content in sub-folders in which case you need to load the web pages from a relative path (say, the 'webpages' folder):

NSString *path = [[NSBundle mainBundle] 
                 pathForResource:@"index" ofType:@"html" 
                     inDirectory:@"webpages"];

The last thing to check for is if there are any BASE tags in the html file. This is a way to specify a default address or target for all links on a page, but it can muck up webview links.

Answer 2

The problem is that this call:

NSURL *url = [NSURL fileURLWithPath:path];

doesn't setup a baseURL and so relative paths in the .html file for things like javascript, css, images etc don't work.

Instead use this:

url = [NSURL URLWithString: [path lastPathComponent] 
             relativeToURL: [NSURL fileURLWithPath: [path stringByDeletingLastPathComponent] 
                                       isDirectory: YES]];

and then things like "styles.css" in the index.html file will be found IFF they are copied into the bundle next to the .html file.

Answer 3

You need to set this:

myWebView.dataDetectorTypes = UIDataDetectorTypeLink