altinkonlineConcrete5 Xcode

Load and use jQuery in your UIWebview

A fast, concise, library that simplifies how to traverse HTML documents, handle events, perform animations, and add AJAX.

In this tutorial you would learn to load and use jQuery in a UIWebView.

Start Xcode and create a new project based on the 'Empty Application' template.


Creat a new file based on the 'UIViewController subclass' template. Give the new class a name (we use 'MyWebViewController') and select subclass of UIViewController.


Open the AppDelegate.m, and import the "MyWebViewController.h".

// Add this line on top of your AppDelegate.m
#import "MyWebViewController.h"

Change the application:didFinishLaunchingWithOptions: method in your 'AppDelegate.m' with the code below. First of all create a 'MyWebViewController'. Then create a UINavigationController with the 'Web' as the RootViewController.

Now we need to add the UINavigationController as a subview of the UIWindow.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    self.window = [[[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]] autorelease];
    // Override point for customization after application launch.
    self.window.backgroundColor = [UIColor whiteColor];
    MyWebViewController *myWebViewController = [[MyWebViewController alloc] 
                                                    bundle:[NSBundle mainBundle]];
    UINavigationController *nav = [[UINavigationController alloc] 
    [[self window] addSubview:[nav view]];
    [self.window makeKeyAndVisible];
    return YES;

Open your 'MyWebViewController.xib'. Add a UIWebView with the Interface Builder.


Now we need to set the delegate of the added UIWebView. Ctrl-click the webview and drag a line from the delegate to the 'File's owner'.


Switch to the 'Assistant Editor'. Insert an outlet for the added object. Give it a name (we use webView). You could create outlets by 'ctrl-clicking' a object and drag it to the left side of the 'Assistant Editor'.

Now create a new file 'doc.js' based on the 'Empty' template.


Open the target of your project, drag the new 'doc.js' from the 'Compile Sources' to the 'Copy Bundle Resources'.


Fill the 'doc.js' with jQuery related code. We have inserted the code below.

$(document).ready(function() {
function foo() {
    jQuery("h1").animate({opacity: 0}, {duration: 3000}).animate({opacity: 1.0}, {duration: 3000})
    .animate({opacity: 0}, {duration: 3000})
    .animate({opacity: 1.0}, {duration: 3000, complete: foo})

Change the viewDidLoad: method in your 'MyWebViewController.m' with the code below. Load your html in the UIWebView.

- (void)viewDidLoad
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    NSMutableString *htmlString = [[NSMutableString alloc] initWithString:@"<!DOCTYPE html><html><head>"];
     appendString:@"</head><body><h1 style='text-align: center;'></h1></body></html>"];
    [webView loadHTMLString:htmlString baseURL:nil];

Then load jQuery and your 'doc.js'.

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSString *jqueryCDN = @"";
    NSData *jquery = [NSData dataWithContentsOfURL:[NSURL URLWithString:jqueryCDN]];
    NSString *jqueryString = [[NSMutableString alloc] initWithData:jquery encoding:NSUTF8StringEncoding];
    [webView stringByEvaluatingJavaScriptFromString:jqueryString];
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"doc" ofType:@"js" inDirectory:@""];
    NSData *fileData = [NSData dataWithContentsOfFile:filePath];
    NSString *jsString = [[NSMutableString alloc] initWithData:fileData encoding:NSUTF8StringEncoding];
    [webView stringByEvaluatingJavaScriptFromString:jsString];

Now you're ready to run your project with jQuery in a UIWebView.