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

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

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.

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.

You need to set this:
myWebView.dataDetectorTypes = UIDataDetectorTypeLink

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.

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

My attempt was to run an entire web page out of the Xcode project file. To do that you must:
When importing the file select "Create folder references for any added folders".
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];

Related

Loading a UIWebview with a local HTML file from a nested folder structure

Specifically, I have a folder structure that looks like the below:
about (main folder)
css (this sub-folder contains the css files)
img (this sub-folder contains the img files)
js (this sub-folder contains the js files)
page (this subfolder contains the index.html file)
If I click on the index.html file from a normal computer browser, everything works as expected.
However, I am trying to load this index.html into a UIWebView.
So far, what I've done is I dragged the "about" folder to XCode and copied it there as I would any other file. Then I tried the following code:
NSString *htmlFile = [[NSBundle mainBundle] pathForResource:#"index" ofType:#"html"];
NSData *htmlData = [NSData dataWithContentsOfFile:htmlFile];
NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] resourcePath]];
[webView loadData:htmlData MIMEType:#"text/html" textEncodingName:#"UTF-8" baseURL:baseURL];
The webview loads the index.html, however it doesnt load the images/css/js, as I presume it can't find them within the folder structure.
Any help would be appreciated! Thank you!
oops, I actually found the answer here: Load resources from relative path using local html in uiwebview
I was able to use the actual folder structure as is with the following code:
NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:#"index" ofType:#"html" inDirectory:#"/about/page"]];
[webView loadRequest:[NSURLRequest requestWithURL:url]];
Instead of using images/css/js use only sample.js.

Using Local Resource and Relative Link in the same UIWebView

I have a problem with a WebView. I'm loading an Html String into a web view. As base URL I need to use my site URL (because there are some relative link inside the html and I cannot modify it).
The problem is that I also need to use some images and css that are stored inside the Application bundle.
So I'm creating a reference to the local resource using this code (the result string is used as src in html file):
NSString *cssUrl = [NSString stringWithString:#"file:"];
cssUrl = [cssUrl stringByAppendingString:[[NSBundle mainBundle] resourcePath]];
cssUrl = [cssUrl stringByAppendingString:#"/story.css"];
Then I've also added:
cssUrl = [cssUrl stringByReplacingOccurrencesOfString:#"/" withString:#"//"];
cssUrl = [cssUrl stringByReplacingOccurrencesOfString:#" " withString:#"%20"];
Any idea how to solve the problem and how to create a reference to a file that can be used inside a web view?
Thanks
Francesco
First, import a directory, e.g. one called web, into your project where all the files reside. Make sure you select "Create Group References For Any Folders" when Xcode asks you.
Now you can load your initial string like this after putting it into a file inside web, say index.html:
NSString* path = [[NSBundle mainBundle] pathForResource:
#"index" ofType:#"html" inDirectory:#"web"];
if (path)
[self.webView loadRequest:
[NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]]];
Now all relative source URLs in your string will work as expected, including <img>, <a> etc.
How about this?
NSString *resourcePath = [[NSBundle mainBundle] pathForResource:#"story" ofType:#"css"];
NSURL *url = [NSURL fileURLWithPath:resourcePath];
NSString *theMagicalURLString = [url absoluteString];
It seems that what I was trying to do it's not possible. To use the bundled resource you have to set the base URL of your web view to the resource path.
Thanks to everyone for your help
Francesco

Use a local CSS file in UIWebView

I have searched the web and tried this a couple ways now but I have a CSS file within my XCode project and a UIWebView which has the html written in it's controller.
I need to get the WebView to recognize the CSS file and use it when the view is shown to the user. I cannot depend on the application having access to internet so I have tried every method I have seen which does not depend on it. The following is what I have so far and it does not work:
style.css is located in supporting files
NSString *html = #"<html><head><link rel=\"stylesheet\" type=\"text/css\"
href=\"style.css\" ><title>Words</title><link rel=\"stylesheet\" type=\"text/css\"
href=\"style.css\" /></head><body><table cellpadding=\"0\" cellspacing=\"0\"
border=\"0\"
width=\"100%\" class=\"resource-table\"><tr><th width=\"20%\">Reference/Performance
Level</th><th width=\"20%\">Words</th><th width=\"20%\">Words</th><th
width=\"20%\">Words</th><th width=\"20%\">Highly Effective</th></tr><tr><td><p
class=\"bold\">Words</p><p>Words</p></td><td><ul class=\"normal\"><li>Words</li></ul>
</td><td><ul class=\"normal\"><li>Words</li></ul></td><td><ul class=\"normal\">
<li>Words</li></ul></td><td><ul class=\"normal\"><li>Words</li></ul></td></tr><tr><td>
<p class=\"bold\">Domain 4f P. 107</p><p>4-Decision Making</p></td><td><ul
class=\"normal\"><li>Words</li></ul></td><td><ul class=\"normal\"><li>Words</li></ul>
</td><td><ul class=\"normal\"><li>Words</li></ul></td><t<ul class=\"normal\">
<li>Words</li></ul></td></tr><tr><td><p class=\"bold\">Words</p></td><td></td><td>
</td><td></td><td><ul class=\"normal\"><liWords</li><li>Words</li></ul></td></tr>
</table></body></style></html>";
NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
[webView loadHTMLString:html baseURL:baseURL];
Must Include Relative Path for Files in Folder References
Is your css file located at the root of the app? If so, I don't know why your code is not working. My guess is that your css file exists inside a "folder reference" (blue folder) in which case you must also include the folder path in the baseURL (or change html to href=\"someFolder/style.css\").
Note that resources (images, etc...) inside of folder groups will get flattened into the same folder when you compile your app, but folder references maintain their folder heirarchy.
Double Check File Location
Find your app (MyCoolProj.app file). You can do this from XCode by expanding "Products". Under this should be your .app file. If you bring up a context menu for this file, you should be able to "Show in Finder".
Now that you found your .app file in finder, select it and again bring up the context menu. Now select "Show Package Contents".
You should now see all files inside your app. Find where your css file is. If it is inside a folder, then it is definitely in a folder reference in your project and to reference it you MUST include the relative folder path you traversed to get to it.
Side Note: You should also notice that all images and other resources that were in folder groups (not folder references) all exist inside the same folder at the root of your .app file. They no longer have no folder hierarchy. This is why you can find images with only their name using [UIImage imageNamed:] like: [UIImage imageNamed:#"someImageName.png"]. If they existed in a folder reference, again you would have to include that path.
You can implement the style directly into the HTML code, with an style tag, instead of a separated file.
I hope it helps you!!
Also you can create the html file and load it in the UIWebview inside the app, something like this:
NSString *resources = [[NSBundle mainBundle] resourcePath];
NSString *filePath = [resources stringByAppendingPathComponent:#"infotext.html"];
NSError *error = nil;
NSString * resourceFileContent = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:&error];
if (error != nil) {
#throw [NSException exceptionWithName:[error domain] reason:[error localizedDescription] userInfo:[error userInfo]];
}
NSURL *baseURL = [NSURL fileURLWithPath:resources];
[self.mWebView loadHTMLString:resourceFileContent baseURL:baseURL];

To test working of xml in iphone?

HI can i place both xml files and images that the xml file transports in xcode to test the working since i don't have the internet ? If it can be done , what should be the path name for the xml to be coded in program and images to be typed in xml.?
NSString *stringToXML = [[NSBundle mainBundle] pathForResource:#"theXMLDoc" ofType:#"xml"];
NSURL *XMLURL = [NSURL fileURLWithPath:stringToXML];
Using that you can get XML documents from the resource folder and use them.
Just substitute your url in your code for the variable XMLURL and you should be fine. Its the same for images, you just need to make an NSURL out of the path resource.

iPhone dev: load a file from resource folder

I'm writing an iPhone app with a UIWebView which should display various html files I have in the app resource folder. In xcode my project overview, these html files are displayed like this:
dirA
|---> index.html
|---> a1.html
|---> a2.html
|---> my.css
|---> dirB
|---> b1.html
|---> b2.html
|---> dirC
|---> c1.html
|---> c2.html
These resources where added to the project as such:
Checked "Copy items into destination groups folder (if needed)".
Reference type: Default.
Text encoding: Unicode (utf-8).
Recursively create groups for any added folders.
The links in my html are relative, meaning they look like this:
a1
a2
b2
c1
In order to display the index.html when the app starts up, I use the following code:
NSString *path = [[NSBundle mainBundle] pathForResource:#"index" ofType:#"html"];
NSURL *url = [NSURL fileURLWithPath:path];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[webView loadRequest:request];
This works fine. Following links from the index file also works fine, as long as the html files requested are directly under dirA. If the link followed points to a file in a sub-directory, then didFailLoadWithError will catch the situation and report that the requested file does not exist.
Also,
[webView loadHtmlString:myHtml];
cannot be part of the solution, as I need back and forward buttons to work in my web view.
So the question is: How can I follow a relative link to an html file in a sub directory within my resources?
I've been all over stackoverflow and the rest of the tubes for the past few days trying to figure this one out, but nowhere have I come across the solution to this exact problem. Any insight at all would be very, very much appreciated!
EDIT: Yoohoo! I figured it out! What joy! Here is what I did:
Imported my resources anew, choosing "Create folder references for any added folders" instead of "Recursively create groups for any added folders."
Specified the root directory for resource, like so: NSString *path = [[NSBundle mainBundle] pathForResource:#"index" ofType:#"html" inDirectory:#"dirA"];
To create folders in the app bundle drag the folder to Xcode and select the radio button: "Create Folder References for any added folders".
The subdirectories you use in XCode are groups not actual folders. all of the resources are likely being flattened out to the output folder. If you create actual folders outside of XCode that might work. Try creating the folder and file heirarchy and drag/dropping into XCode. Also check your build folder using Finder to see exactly how XCode is deploying your files.
I managed to use HTML files containing resources and links using relative paths by using the +fileURLWithPath: initializer instead of +URLWithString: when loading an HTML string and passing a baseURL in the web view.
NSString* path = [[NSBundle mainBundle] pathForResource:#"index" ofType:#"html" inDirectory:#"HTMLContent"];
NSString* htmlString = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:&error];
[self.webView loadHTMLString:htmlString baseURL:[NSURL fileURLWithPath:path]];
"HTMLContent" is my equivalent for your "dirA". No other changes were required.