In-App web browser control for iOS apps

In today’s post I would like to share with you a little piece of code. If you need to integrate in-app web browser support into your iPhone apps, this handy module will save you some time.

There are already some solutions to this problem out there but non of them offers the features I needed. First, the solution I present in this article uses a work-around for the well-known UIWebView bug that causes erratic behavior when combining “zooming operations” and “landscape orientation”. Moreover, the solution presented is highly customizable.

I have called it TSMiniWebBrowser. You can download the source code at the end of the article.

Features

TSMiniWebBrowser offers the following features:

  • Back and forward buttons
  • Reload button (optional)
  • Activity indicator while page is loading
  • Action button to open the current page in Safari (optional)
  • Displays the page title at the navigation bar (optional)
  • Displays the current URL at the top of the “Open in Safari” action sheet (optional)
  • Customizable bar style: default, black, black translucent.

As you can see, there are some items that are “optional”. That means that you can configure the browser to display or not those items, depending on your app needs.

Moreover, TSMiniWebBrowser supports 2 presentation modes:

  • Navigation controller mode. Using this mode you can push the browser to your navigation controller.
  • Modal mode. Using this mode you can present the browser modally. A title bar with a dismiss button will be automatically added.

Usage

If you are OK with the TSMiniWebBrowser defaults, you can simply use this snippet to create and display the browser:

TSMiniWebBrowser *webBrowser = [[TSMiniWebBrowser alloc] initWithUrl:[NSURL URLWithString:@"http://indiedevstories.com"]];
[self.navigationController pushViewController:webBrowser animated:YES];

If you prefer, you may customize the browser behavior. There is also a simple Demo app within the project.

TSMiniWebBrowser *webBrowser = [[TSMiniWebBrowser alloc] initWithUrl:[NSURL URLWithString:@"http://indiedevstories.com"]];
    webBrowser.showURLStringOnActionSheetTitle = YES;
    webBrowser.showPageTitleOnTitleBar = YES;
    webBrowser.showActionButton = YES;
    webBrowser.showReloadButton = YES;
    webBrowser.isModal = NO;

    webBrowser.barStyle = UIBarStyleBlack;

    if (webBrowser.isModal) {
        [self presentModalViewController:webBrowser animated:YES];
    } else {
        [self.navigationController pushViewController:webBrowser animated:YES];
    }

As usual, very easy to use 😉

Adding TSMiniWebBrowser into your Xcode 4 project

To add the TSMiniWebBrowser component to your project you simply need to drag & drop the entire “TSMiniWebBrowser” folder. In the image below, you can see the files included in this folder. Only two files, apart from the icon images.

Conclusion

TSMiniWebBrowser has been created to easily add in-app browser capabilities to your iPhone apps.

Here you can download the source code.

Hope this helps! 🙂

This post is part of iDevBlogADay, a group of indie iOS development blogs. You can keep up with iDevBlogADay through the web siteRSS feed, or Twitter.

Advertisements

About Toni Sala

Indie game designer and developer
This entry was posted in Home, idevblogaday, Tutorials and tagged , , , , , , , , , , , . Bookmark the permalink.

17 Responses to In-App web browser control for iOS apps

  1. As always. Thank’s for sharing this code. 😉

  2. Thank’s for sharing this code. 😉

  3. Toni Sala says:

    You’re welcome!

    HTH!

  4. Great work, I will have to check this out, looks very handy.

    Out of interest, can you share more info on the “zoom bug” you mentioned or point me to a forum discussion on the topic?

  5. Pingback: In-App web browser control for iPhone apps | Indie Dev Stories | iPhone And iPad News

  6. scorePro says:

    Great work, thanks for this. I’m gonna put this in to the next version of my app scorePro Golf!!

    One tweak is to put [self toggleBackForwardButtons]; at the end of ‘webViewDidFinishLoad’ so that the back button gets toggled properly.

    Kind Regards

    Adrian

  7. Atovn says:

    Thank’s for sharing this code but I don’t want to see the NavigationBar in the RootView. How can I remove or hidden this?

  8. Toni Sala says:

    You can add this code to viewWillAppear: method of your view controller:

    self.navigationController.navigationBar.hidden = YES;

    Then when pushing the TSMiniWebBrowser do the opposite:

    self.navigationController.navigationBar.hidden = NO;

    You can animate the navigation bar alpha to have a nice and smooth transition.

  9. Marcel says:

    It looks pretty good!! Thanks for sharing!!

    Is there plan to adding support to iPad?

  10. Toni Sala says:

    Hello @Marcel,

    TSMiniWebBrowser doesn’t support iPad explicitly yet. However, meanwhile, you can use it on iPad in “iPhone style” if it is ok with your app UI design.

    For example, you can use TSMiniWebBrowser on iPad in Modal mode using this snippet:

    TSMiniWebBrowser *webBrowser = [[TSMiniWebBrowser alloc] initWithUrl:[NSURL URLWithString:@”http://indiedevstories.com”]];
    webBrowser.mode = TSMiniWebBrowserModeModal;
    [self presentModalViewController:webBrowser animated:YES];

    This code will present the browser modally in fullscreen on iPad.

    I plan to add universal support on the example project but meanwhile maybe this snippet does the work 🙂

  11. Knut J. says:

    Just a question, theoretically not bound to the TSMiniWebBrowser directly…

    If I want to transmit data from my “mother” app into a field inside the TSMiniWebBrowser-“Element” … is that possible?

    Greetings Knut J.

  12. Toni Sala says:

    Hi @Knut,

    I don’t know exactly what you want to do, but you can subclass TSMiniWebBrowser and customize its behavior. You can add a property and set its value from your mother app and do whatever you want with it from inside TSMiniWebBrowser class.

    What are you looking after exactly?

    • Knut J. says:

      i want to integrate a piece of hardware which delivers data/text to the controlling app.. this data/text/string should be filled into a form, specifically into the “current” field inside a generic form inside the TSMiniWebBrowser … this form may be different, the fields may change, so no hardwired variable=value would work.

      is there a way to pass a string from the controlling app (mother) to the TSMiniWebBrowser (child) in a way that the currently active(has focus/cursor) field gets the data, then does a “nextField” ?

  13. Toni Sala says:

    So, you mean manipulating the HTML of the page loaded into de TSMiniWebBrowser. I’m not an expert about it, but the “stringByEvaluatingJavaScriptFromString” of the UIWebView is probably what you are looking for.

    HTH

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s