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

Solution 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.

Solution 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.

Solution 3

You need to set this:

myWebView.dataDetectorTypes = UIDataDetectorTypeLink

Comments

[Aisha]

This is Laura. I was stuck in the same problem and when tried to use ur solution then in my case "path" returns nil. Though I added the html files and resources in the same manner by using the second option "Create Folder References for any added folders." What am I missing out. Please help me. I would be really grateful.

[Ramin]

Hi Laura. If the "pathForResource" method is returning nil it means it can't find the file. One thing to try is to find the binary .app file in your "build" directory in the finder then right click on it and do a "Show Package contents." This shows what the app's main bundle contains. Look inside for your HTML file. If it's in a folder, that folder name needs to be in the "inDirectory" parameter of the pathForResource call. If it's on the top-level then you don't have a folder reference. Either delete & re-drag it into project or use the pathForResource version without inDirectory. HTH.