UIWebView Tutorial

Have you ever wondered how apps can display web pages without exiting and opening up Safari? The magic happens because of a powerful UIKit component called UIWebView. Let’s see how to use UIWebView in our app.

UIWebViewExample

Let’s assume that we have a view based project already set up in XCode 4. Here are the steps that you will take to add a simple web view to your app:

  • Add a UIWebView from interface builder into your view
  • Add a UIWebView IBOutlet to your view controller files
  • Adopt the UIWebViewDelegate protocol in your view controller
  • Use IB to connect the UIWebView on your view to the UIWebView IBOutlet in your view controller
  • Use IB to set the UIWebView’s delegate to the File Owner
  • Use a web address to create a NSURL object
  • Use the NSURL object to create a NSURLRequest
  • Use the NSURLRequest and the UIWebView’s loadRequest message to load a webpage into the web view
  • Implement any delegate methods that feel are necessary for your app

It’s really as simple as that! You may also check out some delegate methods that could be helpful once you have the web view successfully loading up a page. For instance, webViewDidStartLoad and webViewDidFinishLoad are two places where you can intercept the process and take some additional actions.

Another more advanced thing that you can want to do is to add a UIToolbar to your view with buttons that users can use to control the web view (back, home, reload, etc).

UIWebView Sample Code

Header File

#import <UIKit/UIKit.h>
@interface samplecodeViewController : UIViewController<UIWebViewDelegate> {
     UIWebView *webView;
}

@property(nonatomic, retain) IBOutlet UIWebView *webView;

@end

Implementation File

#import "samplecodeViewController.h"
@implementation samplecodeViewController
@synthesize webView;

- (void)dealloc{
     [webView release];
     [super dealloc];
}

- (void)viewDidLoad{
     NSURL *url = [NSURL URLWithString:@"http://howtomakeiphoneapps.com"];
     NSURLRequest *requestURL = [NSURLRequest requestWithURL:url];
     [webView loadRequest:requestURL];
     [super viewDidLoad];
}
@end

17 thoughts on “UIWebView Tutorial

  1. Hello, Neat post. There is a problem with your website in internet explorer, might test this? IE nonetheless is the marketplace leader and a good portion of other folks will leave out your great writing due to this problem.

  2. Hey Matt, many thanks for the tutorial. I have one additional question – I’m trying to have my target=”_blank” links open in safari – is there an easy code addition to achieve this? I’ve tried a few solutions, but they all are limited to opening the link in the UIWebView no matter what I do.

  3. Would someone care to update this tutorial to XCode 4.2. A few things changed in 4.2 that makes all tutorials out there simply not work and I’m having a hard time figuring out why (novice developer). Thanks.

  4. Thanks for this tutorial, I am getting an error though on these lines in my sampleViewController.m

    [webView release]; I get an error saying ARC forbids explicit message send of ‘release’
    [super dealloc]; I get an error saying ARC forbids explicit message send of ‘dealloc’

    Any ideas, I am brand new to xcode programming, i am just starting today and have xcode 4.3

    Thank you!

    1. Simply do not use the dealloc method in your code. (the dealloc method is the one that says -(void)dealloc and has [webview release]; inside it.)

  5. The problem is because this example was written in the Pre-ARC days and it looks like you set up your iOS app to use ARC. To use this example as is include the code in an app without ARC enabled (leave the checkbox unchecked).

    Or to use the code with ARC remove any line that has the word “release” in it.

  6. Thanks Matt, could you tell me where the ARC checkbox is? I have looked around and can’t seem to find it! :)

    Also, I am thinking about buying your course, would it be relevant to my learnind xcode 4.3?

    1. Hi Jamie,

      The checkbox is in the first screen that you get when you create a new Xcode iOS application. You will typically have a list of things that you can include (or not) like Core Data, ARC and Unit Tests.

      Moving forward, you are better off using using ARC and ignoring the memory management issues. However, as you are finding out 90% of the examples on the web were written in the pre-ARC days so it makes things a bit tricky.

      RE: my course. I’m in the process of completely updating the course in time for the May 7th start date. Everything is being updated to take ful advantage of ARC, Core Data and Storyboards. It (as well as my current course) will be using Xcode 4.3.

  7. Actually, it looks like this tutorial is quite different, not just the ARC issue. I have a storyboard, not an xib file, and I can’t find Placeholder File Owner to connect the UIWebView. What I am finding frustrating is that when I search for Xcode 4.3 tutorials, I am finding a lot of Xcode 4 tutorials that are for iOS 4.3, and none of the Xcode 4 tutorials I have tried seem to be similar enough to 4.3, seem like a lot must have changed between versions :(

    1. Yes, Storyboards follow a completely different model than the one presented here. Both are legit. If you can find a way to focus on just the UIWebView you will get further. But, it does sound like you need a better grounding in the basics. Ideally, you would be able to use either the SB approach or the approach that uses the File Owner placeholder.

  8. Thanks for the tutorial, busy with my first non-nimblekit-app at the moment :-)
    Is there an easy setting to let the web view rotate with the iPad?

  9. hi,

    i love your tutorial :) it is simply awesome.

    actually i am facing a problem regarding ulwebview.

    i want to make an app that loads the page source (html) of the given web page.

    for example,
    if in your above tutorial if I replace the web address by “google.com”

    and what I want is that it loads the page source (html) of “google.com”

    i ll be glad if you make a tutorial regarding it as well.
    Thank you.

  10. Hi Matt,

    I followed your tutorial and works fine I really appreciate it. But I wonder if you can help me with this.

    I create my own webpage and I save it inside my App so I am trying to load my local html file inside UIWebview.

    All works fine, but my Webview is not playing javascript when runs local, if I save my html file (index) in other machine Webview is able to load it well.

    Do you have any ideas?

    Code:

    - (void)viewDidLoad
    {
    [super viewDidLoad];

    /*NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentationDirectory, NSUserDomainMask, YES);
    NSString *documentsDirectory = [paths objectAtIndex:0];
    NSLog(documentsDirectory);*/
    // Do any additional setup after loading the view, typically from a nib.

    // traditional URL
    NSString *urlAddress = @”index”;

    //Create a URL object.
    // traditional url NSURL *url = [NSURL URLWithString:urlAddress];
    // charles
    NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:urlAddress ofType:@”html”] isDirectory:NO];
    //URL Requst Object

    NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];

    //Load the request in the UIWebView.
    [self.webView loadRequest:requestObj];

    [self configureView];
    }

    - (void)didReceiveMemoryWarning
    {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
    }

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>