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 fig

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

My attempt was to run an entire web page out of the Xcode project file. To do that you must:

1. When importing the file select "Create folder references for any added folders".

2. Set up the web view, but make sure you set the relative path as previously mentioned.
   

   NSString *path = [[NSBundle mainBundle] pathForResource:@"filename" 
                                           ofType:@"html" 
                                           inDirectory:@"Directory"];
   
   NSURL *url = [NSURL URLWithString:[path lastPathComponent] relativeToURL:
         [NSURL fileURLWithPath: [path stringByDeletingLastPathComponent] 
                isDirectory:YES]];
   
   NSURLRequest *request = [NSURLRequest requestWithURL:url];
   
   [self.currentWebView loadRequest:request];
   

Answer 3

When adding pathFor resource in Dictionary , it displays a nil string error.

Answer 4

Make sure that the .js files are in your copy to resource bundle section and not in the compile section. Xcode places them in the compile group by default.

Answer 5

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 6

You need to set this:

myWebView.dataDetectorTypes = UIDataDetectorTypeLink