Display Local HTML file in UIWebView

Stefan87 asks:

Is it possible to display a HTML File which was created by the application in a UIWebview?

I would like to provide a helpfile in HTML-Format in the webview.

I’ve read the documentation, but it seems that every loadprocess requires a URL ?

I wanted to do the very same thing for displaying the instructions in LuckyWheel. After some experimentation I found the following way to be the simplest for me.

One can easily become confused by reading about requests needed by UIWebView to load something. You have loadDATA to load from an NSDATA, you have loadHTMLString to load from NSString  and loadRequests to load from URLs for which you have constructed an NSURLRequest.

So one method is to first get the HTML text from a file and then pass it into the appropriate load method.

NSString *html = [NSString stringWithContentsOfFile:path];
[myWebView loadHTMLString:html baseURL:@"www.apple.com"];

The path parameter would either be the path to the sandboxed documents directory where you can write to or the app directory the contents of which you decided in XCode. Check my article on getting standard paths to learn more.

For LuckyWheel I wrote the following code to display localized help in a UIWebView. This is in the viewDidLoad method of a viewController because this is executed when the view controller has been loaded from the XIB.

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad
{
	webView.delegate = self; // I a
	webView.backgroundColor = [UIColor colorWithRed:148.0/256.0 green:148.0/256.0 blue:148.0/256.0 alpha:0.0];
	webView.opaque = YES;
 
	// get localized path for file from app bundle
	NSString *path;
	NSBundle *thisBundle = [NSBundle mainBundle];
	path = [thisBundle pathForResource:@"instructions" ofType:@"html"];
 
	// make a file: URL out of the path
	NSURL *instructionsURL = [NSURL fileURLWithPath:path];
	[webView loadRequest:[NSURLRequest requestWithURL:instructionsURL]];
 
	[super viewDidLoad];
}
 
- (void)viewDidAppear:(BOOL)animated
{
	// need to do this every time this view appears so that the "home" link keeps working
	[webView loadRequest:[NSURLRequest requestWithURL:instructionsURL]];
}

I don’t quite know why the viewDidAppear is necessary, only that the “home” link would not work if I didn’t reload the file.

Originally I wanted to have the background behind the HTML to be transparent but then I actually stumbled accross a bug that had been only fixed in 2.1. So if you are targetting 2.0 to maximize your audience you have to be satisfied with a solid background.

And finally there is one more thing that might be useful. I don’t have any return button on the instructions view, but returning to the main menu is done via clicking on a link in the instructions. To capture this all I needed to do was to implement this method:

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
	if (navigationType!=UIWebViewNavigationTypeLinkClicked)
	{
		return YES;
	}
	else
	{
		// link in instructions html clicked
		[rootViewController showStartScreen];
		return NO;
	}
}

With the delegate properly set the shouldStartLoadWithRequest gets called every time the user taps on a link. Depending on the navigationType you can then decide if you want to permit the regular link-following behavior or do your own thing. Like I am showing the start screen. If you customize like this you have to return NO.

Categories: Q&A