Friday, October 12, 2012

iOS Pass Values to Native App from JavaScript in Webviews (Xcode)

Hello,

Recently I was working on a native iOS application for iPAD. There are several web views in app which loads some sencha touch forms in web views. Web views are in modal window. Requirement was to notify native app to close web views upon certain user actions.  So how to do that?  Here is the trick

Add following to your modal view controller header file.



#import

@interface iPadCatalogFormMoalController : UIViewController{
    IBOutlet UIWebView *webView;
}
@property (nonatomic, retain) UIWebView *webView;
@property (nonatomic) IBOutlet UIActivityIndicatorView  *webviewLoadingIndicator;
@end

Now synthesize this properties in .m file

@synthesize webView,webviewLoadingIndicator;

Following code should be added in viewDidLoad method.

    NSString *urlAddress = @"http://myappurl.com";
    
    NSURL *url = [NSURL URLWithString:urlAddress];
    
    NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];

    webView.delegate= self;
    [self.webView loadRequest:requestObj];

Now add few delegate functions for web views.

-(void)webViewDidStartLoad:(UIWebView *)webView{
    [webviewLoadingIndicator startAnimating];
}

-(void)webViewDidFinishLoad:(UIWebView *)webView{
    [webviewLoadingIndicator stopAnimating];
}

- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType {
    NSURL *URL = [request URL]; 
    if ([[URL scheme] isEqualToString:@"closeWebView"]) {
        // parse the rest of the URL object and execute functions
        [self dismissModalViewControllerAnimated: YES];
        return NO;
    } 
    return YES;
}

Most important function for is the third one. This is called when web view url is assigned. Here we can check url schemes and do the necessary action. 

Now in your JS code when you want to notify native app. Just add following code.

window.location.href = 'closeWebView://param=value';

Here when you add this it will again fire shouldStartLoadWithRequest delegate function of web view and there we are checking the the URL scheme. 

Also you can pass ay number of params to native app if needed. Please note that this isn't the most efficient method. But it works in major scenarios.

Hope this helps you.