How to use Web View to work with static HTML content

Home » iOS Control » How to use Web View to work with static HTML content

Thursday, January 1, 2015

30 How to use Web View to work with static HTML content

From developer.apple.com: "A web view object displays web-based content. It is an instance of the UIWebView class that enables you to integrate what is essentially a miniature web browser into your app’s user interface. The UIWebView class makes full use of the same web technologies used to implement Safari in iOS, including full support for HTML, CSS, and JavaScript content..."

A web view is not only useful for loading websites on the internet within your application but also can load local html files as well.

In this tutorial, we want to introduce you how to use a web view to display a static html string and some tasks with this string like change font type, font size, font color...

Here is a result of this tutorial:

May be we use this to display content of a page of book like the way of Kindle :)

1. Create a new project

2. Design Main.storyboard like this

In that, we have a web view to display html content, one toolbar contain a button to show the UIView when touch on it and a UIView(we call it fontView) contain some controls are buttons, tableview to work with html string on web view

3. Display html string on web view
- Create a html string sample:

NSString * htmlString = @"<br><b>this is text in bold</b><br><i>this is text in italic</i> this is normal text<br>This is the third line of string";

- Then create a css string and append those string into NSMutableString, finally call loadHTMLString to load this string into web view

NSString *css = [NSString stringWithFormat:
                 @"<html><head><style>body { background-color: transparent; text-align: %@; font-size: %fpx; color: %@; font-family: %@; -webkit-text-size-adjust: none;} a { color: #172983; } </style></head><meta name=\"viewport\" content=\"width=device-width; initial-scale=1.0; maximum-scale=1.0;\"><body>",
                 @"justify",
                 fontsize, @"black",[fontArray objectAtIndex:1]];
NSMutableString *desc = [NSMutableString stringWithFormat:@"%@%@<br><br>%@ ",
                         css,
                         htmlString,
                         @"</body></html>"];
[self.webviewContent loadHTMLString:desc baseURL:nil];

4. From fontView add some codes to process the html string on web view. We can change font type, font size and font color of that string

- For font size:

- (IBAction)upFontSizeTap:(id)sender{
    if (fontsize < MAX_FONTSIZE) {
        fontsize += 1;
        NSString *str = [NSString stringWithFormat:@"document.body.style.fontSize = '%f'",fontsize];
        [self.webviewContent stringByEvaluatingJavaScriptFromString: str];
    }
}
- (IBAction)downFontSizeTap:(id)sender{
    if (fontsize > MIN_FONTSIZE) {
        fontsize -= 1;
        NSString *str = [NSString stringWithFormat:@"document.body.style.fontSize = '%f'",fontsize];
        [self.webviewContent stringByEvaluatingJavaScriptFromString: str];
    }
}

- For font type: we choose font type show on table view

#pragma mark - Table view delegate
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    NSString *str = [NSString stringWithFormat:@"document.body.style.fontFamily = '%@'",[fontArray objectAtIndex:indexPath.row]];
    [self.webviewContent stringByEvaluatingJavaScriptFromString: str]; 
}

You can also get all system fonts by this code:

for(NSString* family in [UIFont familyNames]) {
        NSLog(@"%@", family);
        for(NSString* name in [UIFont fontNamesForFamilyName: family]) {
            NSLog(@"  %@", name);
        }
}

- For font color:

- (IBAction)chooseBG1Tap:(id)sender{
    self.photoImageView.image = [UIImage imageNamed:@"whitebg.png"];
    NSString *str = @"document.body.style.color = 'black'";
    [self.webviewContent stringByEvaluatingJavaScriptFromString: str];
}
- (IBAction)chooseBG2Tap:(id)sender{
    self.photoImageView.image = [UIImage imageNamed:@"blackbg.png"];
    NSString *str = @"document.body.style.color = 'white'";
    [self.webviewContent stringByEvaluatingJavaScriptFromString: str];
}

5. Run Demo Application