Dogboy Studios

Removing HTML elements from a UIWebView

Wed, 08 Feb 2012 16:42:00 -0800

I was working on a simple app to use UIWebVIews to display pages from a web site. Its a tab bar app and each tab loads a different page from the site.

The site is here: Tech Valley Mobile Developers Network

If you open that link in mobile safari you will see the extra elements added to aid browsing on the smaller screen.

The site is configured with a wordpress plug-in to better handle the mobile browser. The plug-in adds a menu, searching and the ability to toggle the mobile format on and off.

The home page looks like this:

I did not want these elements (the black bits at the top of the web view) in the app as they would circumvent the tab bar button system.

It turns out, as with most things cocoa, once you figure it out its very simple.

The trick is to inject some html into the page after you load it. In this case I injected some javascript to hide content by id

tag

Here is the code (apologies for the formatting)

- (void)hideUnwantedHTML{

[self.webView stringByEvaluatingJavaScriptFromString:@"var script = document.createElement('script');"

"script.type = 'text/javascript';"

"script.text = \"function hideID(idName) { "

"var id = document.getElementById(idName);"

"id.style.display = 'none';"

"}\";"

"document.getElementsByTagName('head')[0].appendChild(script);"];

[self.webView stringByEvaluatingJavaScriptFromString:@"hideID('headerbar');"];

[self.webView stringByEvaluatingJavaScriptFromString:@"hideID('wptouch-search');"];

[self.webView stringByEvaluatingJavaScriptFromString:@"hideID('wptouch-menu');"];

[self.webView stringByEvaluatingJavaScriptFromString:@"hideID('drop-fade');"];

[self.webView stringByEvaluatingJavaScriptFromString:@"hideID('footer');"];

}

What this method does is inject a script to find the element by name (idName) then hide any elements with that name. Call the script once for each id you want to hide.

Call this in your UIWebViewDelegate under the webViewDidFinishLoad: method and the nasty html you don't want will disappear.

- (void)webViewDidFinishLoad:(UIWebView *)webView {

NSLog(@"Finished loading");

UIApplication *application = [UIApplication sharedApplication];

application.networkActivityIndicatorVisible = NO;

[activityIndicator stopAnimating];

activityIndicator.hidden = YES;

[self hideUnwantedHTML];

}

Don't forget to add to your view controller in order to get the delegate calls.

Here is the same UIWebView after the addition of the injected javascript. Nice and clean.

Sure, web apps like this don't make the best apps but when a quick and dirty solution is needed this might just do the trick.

Dogboy Studios

Removing HTML elements from a UIWebView

Exporting is coming to CE Tracker

The Facebook Disaster

CE Tracker 1.1 almost ready to go (for real this time)

CE Tracker update now in App Store

CE Tracker 1.1 Update Coming

Proxima is Available Now

What Next is now Proxima

What Next?

CE Tracker in the App Store

CE Tracker Submitted

Xcode4: Open files where you want

Icon Design

Sad

Done... yeah sure

Working with iAd

Learning Cocos2D