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 control 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 site, RSS feed, or Twitter.
As always. Thank’s for sharing this code. 😉
Thank’s for sharing this code. 😉
You’re welcome!
HTH!
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?
uh, my name is Kyle not spadicte , not sure what happened there lol
Sure. Sorry, I forgot to link a reference to the problem. Here you have a thread on stackoverflow discussing the problem. I have also updated the post with this information.
http://stackoverflow.com/questions/2890673/iphone-uiwebview-width-does-not-fit-after-zooming-operation-uiinterfaceorienta
Thanks!
Pingback: In-App web browser control for iPhone apps | Indie Dev Stories | iPhone And iPad News
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
Updated!
Thanks!! 🙂
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?
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.
Awesome job, totally going to use this as my foray into App Development, just a browser that points to the site for now. My only problem is that the toolbar is covering the top of the site in iOS7. I tried adding just the first part of the code above, but once I move into the TSMiniWebBrowser the title comes back in white (I suppose it never left, was just hidden). Any suggestions? Thanks
Nevermind, it wasn’t the title bar that was staying it was the carrier text and other top bar info. Was able to adjust the web view size to compensate! Thanks!
It looks pretty good!! Thanks for sharing!!
Is there plan to adding support to iPad?
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 🙂
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.
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?
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” ?
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
Very nice code, Thank you.
I have one query, is it possible to make blue progress bar at address bar like mobile safari ?
its only thing which need other are very nice.
Thank you.
To be honest I have no plans to include such a feature to the component. If you are so inclined, you may fork the project on github and make a contribution.
Thanks!
Hi, im new to Xcode, i am trying to build an app for use in my local sports club, i have built one, but browsing id very slow, i stumbled across example code, its very good, one question i have, or could you please show, i am struggling to add additional buttons to the xib, with another web link, could you please show me how to use this, once i have an example i think i can manage this, thanks in advance
Paul
thank you so much
I love this control! Great work, easy and it works!!!
I do have one question – I want to change the color of the top nav bar to something other than the default or black. I want it to be darkgray. I figured out how to change the bottom bar but not the top. Is this possible? What am I missing 🙁
Thanks so much!