{"id":667,"date":"2013-01-12T16:26:02","date_gmt":"2013-01-12T10:56:02","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=667"},"modified":"2013-01-12T16:26:02","modified_gmt":"2013-01-12T10:56:02","slug":"calling-objective-c-function-from-javascript-in-ios-applications","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/calling-objective-c-function-from-javascript-in-ios-applications\/","title":{"rendered":"Calling Objective-C code from JavaScript in iOS applications"},"content":{"rendered":"

In the last post I described how to\u00a0Create iOS Application with HTML User Interface<\/a>\u00a0. In this post I am going to describe how to access Objective-C code from JavaScript running in the WebView. It is not as easy as it is in Android. There is no direct API in UIWebView to call native code, unlike in Android which provides WebView.addJavascriptInterface<\/a>\u00a0function.<\/p>\n

However, there is a work-around. We can intercept each URL before it is being loaded in the WebView. So to call the native code, we will have to construct a URL and pass method name and argument as part of the URL. We then set this URL to window.location in the JavaScript and intercept it in our ViewController.
\nHowever most examples I have seen (including PhoneGap) create an instance of iframe and set its source to the URL –
\n<\/p>\n

function openCustomURLinIFrame(src)\n{\n    var rootElm = document.documentElement;\n    var newFrameElm = document.createElement(\"IFRAME\");\n    newFrameElm.setAttribute(\"src\",src);\n    rootElm.appendChild(newFrameElm);\n    \/\/remove the frame now\n    newFrameElm.parentNode.removeChild(newFrameElm);\n}<\/pre>\n
Following JavaScript function creates a JSON string from function name and arguments and then calls\u00a0openCustomURLinIFrame.<\/p>\n
function calliOSFunction(functionName, args, successCallback, errorCallback)\n{\n    var url = \"js2ios:\/\/\";\n\n    var callInfo = {};\n    callInfo.functionname = functionName;\n    if (successCallback)\n    {\n        callInfo.success = successCallback;\n    }\n    if (errorCallback)\n    {\n        callInfo.error = errorCallback;\n    }\n    if (args)\n    {\n        callInfo.args = args;\n    }\n\n    url += JSON.stringify(callInfo)\n\n    openCustomURLinIFrame(url);\n}<\/pre>\n
Note that I have created the url with custom protocol ‘js2ios’. This is just a marker protocol which we will intercept and process in the ViewController of iOS application. Since the code to call native method is asynchronous and does not return the result of the execution, we will have to pass success and error callback functions. These callback functions would be called from the native code.<\/p>\n
calliOSFunction(\"sayHello\", [\"Ram\"], \"onSuccess\", \"onError\");\n\nfunction onSuccess (ret)\n{\n    if (ret)\n    {\n        var obj = JSON.parse(ret);\n        document.write(obj.result);\n    }\n}\n\nfunction onError (ret)\n{\n    if (ret)\n    {\n        var obj = JSON.parse(ret);\n        document.write(obj.error);\n    }\n}<\/pre>\n
In the above code I am passing callback functions as string, which is not the best way. But we will see how to fix this later.
\nLet’s now see what we need to implement in Objective-C to execute ‘sayHello’ method, when called from JavaScript.<\/p>\n
The ViewController in our application should implement\u00a0UIWebViewDelegate protocol –<\/p>\n
\n
@interface RKViewController : UIViewController<UIWebViewDelegate>\n{\n    IBOutlet UIWebView *webView;\n}\n@end<\/pre>\n<\/div>\n
Then we implement shouldStartLoadWithRequest method of UIWebViewDelegate protocol (interface). This function would be called before loading each url in the WebView. If you return true from this function, the WebView will load the URL, else it would not. So if the url contins our custom protocol, then we would process it and return false, so that WebView does not attempt to load it.
\nFollowing code implements shouldStartLoadWithRequest\u00a0and also other functions to process our custom protocol (this code goes in ViewController.m) –
\n<\/p>\n
\n
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {\n\n    NSURL *url = [request URL];\n    NSString *urlStr = url.absoluteString;\n\n    return [self processURL:urlStr];\n\n}\n\n- (BOOL) processURL:(NSString *) url\n{\n    NSString *urlStr = [NSString stringWithString:url];\n\n    NSString *protocolPrefix = @\"js2ios:\/\/\";\n\n    \/\/process only our custom protocol\n    if ([[urlStr lowercaseString] hasPrefix:protocolPrefix])\n    {\n        \/\/strip protocol from the URL. We will get input to call a native method\n        urlStr = [urlStr substringFromIndex:protocolPrefix.length];\n\n        \/\/Decode the url string\n        urlStr = [urlStr stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];\n\n        NSError *jsonError;\n\n        \/\/parse JSON input in the URL\n        NSDictionary *callInfo = [NSJSONSerialization\n                                  JSONObjectWithData:[urlStr dataUsingEncoding:NSUTF8StringEncoding]\n                                  options:kNilOptions\n                                  error:&jsonError];\n\n        \/\/check if there was error in parsing JSON input\n        if (jsonError != nil)\n        {\n            NSLog(@\"Error parsing JSON for the url %@\",url);\n            return NO;\n        }\n\n        \/\/Get function name. It is a required input\n        NSString *functionName = [callInfo objectForKey:@\"functionname\"];\n        if (functionName == nil)\n        {\n            NSLog(@\"Missing function name\");\n            return NO;\n        }\n\n        NSString *successCallback = [callInfo objectForKey:@\"success\"];\n        NSString *errorCallback = [callInfo objectForKey:@\"error\"];\n        NSArray *argsArray = [callInfo objectForKey:@\"args\"];\n\n        [self callNativeFunction:functionName withArgs:argsArray onSuccess:successCallback onError:errorCallback];\n\n        \/\/Do not load this url in the WebView\n        return NO;\n\n    }\n\n    return YES;\n}\n\n- (void) callNativeFunction:(NSString *) name withArgs:(NSArray *) args onSuccess:(NSString *) successCallback onError:(NSString *) errorCallback\n{\n    \/\/We only know how to process sayHello\n    if ([name compare:@\"sayHello\" options:NSCaseInsensitiveSearch] == NSOrderedSame)\n    {\n        if (args.count > 0)\n        {\n            NSString *resultStr = [NSString stringWithFormat:@\"Hello %@ !\", [args objectAtIndex:0]];\n\n            [self callSuccessCallback:successCallback withRetValue:resultStr forFunction:name];\n        }\n        else\n        {\n            NSString *resultStr = [NSString stringWithFormat:@\"Error calling function %@. Error : Missing argument\", name];\n            [self callErrorCallback:errorCallback withMessage:resultStr];\n        }\n    }\n    else\n    {\n        \/\/Unknown function called from JavaScript\n        NSString *resultStr = [NSString stringWithFormat:@\"Cannot process function %@. Function not found\", name];\n        [self callErrorCallback:errorCallback withMessage:resultStr];\n\n    }\n}\n\n-(void) callErrorCallback:(NSString *) name withMessage:(NSString *) msg\n{\n    if (name != nil)\n    {\n        \/\/call error handler\n\n        NSMutableDictionary *resultDict = [[NSMutableDictionary alloc] init];\n        [resultDict setObject:msg forKey:@\"error\"];\n        [self callJSFunction:name withArgs:resultDict];\n    }\n    else\n    {\n        NSLog(@\"%@\",msg);\n    }\n\n}\n\n-(void) callSuccessCallback:(NSString *) name withRetValue:(id) retValue forFunction:(NSString *) funcName\n{\n    if (name != nil)\n    {\n        \/\/call succes handler\n\n        NSMutableDictionary *resultDict = [[NSMutableDictionary alloc] init];\n        [resultDict setObject:retValue forKey:@\"result\"];\n        [self callJSFunction:name withArgs:resultDict];\n    }\n    else\n    {\n        NSLog(@\"Result of function %@ = %@\", funcName,retValue);\n    }\n\n}\n\n-(void) callJSFunction:(NSString *) name withArgs:(NSMutableDictionary *) args\n{\n    NSError *jsonError;\n\n    NSData *jsonData = [NSJSONSerialization dataWithJSONObject:args options:0 error:&jsonError];\n\n    if (jsonError != nil)\n    {\n        \/\/call error callback function here\n        NSLog(@\"Error creating JSON from the response  : %@\",[jsonError localizedDescription]);\n        return;\n    }\n\n    \/\/initWithBytes:length:encoding\n    NSString *jsonStr = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];\n\n    NSLog(@\"jsonStr = %@\", jsonStr);\n\n    if (jsonStr == nil)\n    {\n        NSLog(@\"jsonStr is null. count = %d\", [args count]);\n    }\n\n    [webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@\"%@('%@');\",name,jsonStr]];\n}<\/pre>\n<\/div>\n
 <\/p>\n
And you need to modify viewDidLoad function to set delegate of WebView to ViewController instance –
\n<\/p>\n
\n
- (void)viewDidLoad\n{\n    [super viewDidLoad];\n\n    NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@\"index\" ofType:@\"html\" inDirectory:@\"wwwroot\"]];\n\n    NSURLRequest *req = [NSURLRequest requestWithURL:url];\n\n    \/\/Set delegate for WebView\n    [webView setDelegate:self];\n\n    [webView loadRequest:req];\n\n}<\/pre>\n<\/div>\n
When you run the application, ‘sayHello’ function would be called from the JavaScript in index.html and executed by Objective-C code above. If the function is successfully executed then success callback function of JavaScript would be called.
\nNotice that in the above code stringByEvaluatingJavaScriptFromString method of UIWebView class is called to execute JavaScript code from Objective-C code.
\nNow change the function to be called in index.html to ‘sayHello1’ and run the application. You will see error message ‘Function not found’ in the application. This is displayed by calling JavaScript error callback function.<\/p>\n
The above example shows how to call native code from JavaScript and vice versa. But the solution is not very elegant. I wanted to implement a generic solution which would make this process very easy. Also \u00a0I wanted to fix the issue of having to pass callback function as string (function name) to JavaScript function ‘calliOSFunction’. I also wanted to support inline function (closures) for success and callback functions.
\nSo I created a small framework that abstracts many of the common functionality and provides a parent class for ViewController and a JavaScript file to be included in the index.html –<\/p>\n
WebViewController.h<\/a>
\nWebViewController.m
\n<\/a>WebViewInterface.h<\/a>
\niosBridge.js<\/a><\/p>\n
WebViewController and WebViewInterface files should go in the source folder of your project, along with other .h and .m files. iosBridge.js should go in the same folder as index.html – in our example it is in wwwroot. To see newly added class files in the project navigator in Xcode, CTRL+Click on the source folder (same name as project name) and select ‘Add Files to …” option.<\/p>\n
Note that you still have to create WebView in .xib file and connect to webView outlet in WebViewController.h as described in my earlier post<\/a>.<\/p>\n
Using this framework, the index.html file looks as follows –<\/p>\n
<script src=\"iosBridge.js\" type=\"text\/javascript\"><\/script>\n\n<script type=\"text\/javascript\">\n\n    function onSuccess (ret)\n    {\n        if (ret)\n        {\n            document.write(ret.result);\n        }\n    }\n\n    calliOSFunction(\"sayHello\",[\"Ram\"],onSuccess,\n        function(ret)\n        {\n            if (ret)\n            document.write(\"Error executing native function : <br>\" + ret.message);\n        }\n    );\n\n<\/script><\/pre>\n
We use calliOSFunction to call native code. You can either pass function name or inline function for success and error callbacks.<\/p>\n
Viewcontroller.h –
\n<\/p>\n
\n
#import \"WebViewController.h\"\n\n@interface RKViewController : WebViewController\n\n@end<\/pre>\n<\/div>\n
And ViewController.m –<\/p>\n
\n
#import \"RKViewController.h\"\n\n@interface RKViewController ()\n\n@end\n\n@implementation RKViewController\n\n- (NSString *) getInitialPageName\n{\n    return @\"index.html\";\n}\n\n- (id) processFunctionFromJS:(NSString *) name withArgs:(NSArray*) args error:(NSError **) error\n{\n\n    if ([name compare:@\"sayHello\" options:NSCaseInsensitiveSearch] == NSOrderedSame)\n    {\n        if (args.count > 0)\n        {\n            return [NSString stringWithFormat:@\"Hello %@ !\", [args objectAtIndex:0]];\n        }\n        else\n        {\n            NSString *resultStr = [NSString stringWithFormat:@\"Missing argument in function %@\", name];\n            [self createError:error withCode:-1 withMessage:resultStr];\n            return nil;\n        }\n    }\n    else\n    {\n        NSString *resultStr = [NSString stringWithFormat:@\"Function '%@' not found\", name];\n        [self createError:error withCode:-1 withMessage:resultStr];\n        return nil;\n    }\n}\n\n@end<\/pre>\n<\/div>\n
You need to override two methods in the ViewController –<\/p>\n
1. – (NSString *) getInitialPageName
\nThis function should return page name to be loaded in the WebView. The framework looks for this file in wwwroot folder. You can also return a url from this function, starting with http or https.<\/p>\n
2. – (id) processFunctionFromJS:(NSString *) name withArgs:(NSArray*) args error:(NSError **) error
\nYou would write code to process function call from JavaScript here.<\/p>\n
I believe this framework would make calling Objective-C from JavaScript a bit more easier.<\/p>\n
-Ram Kulkarni<\/p>\n
UPDATE<\/strong> : See ‘Framework for interacting with embedded WebView in iOS application<\/a>‘ for the updated framework.<\/p>\n","protected":false},"excerpt":{"rendered":"
In the last post I described how to\u00a0Create iOS Application with HTML User Interface\u00a0. In this post I am going to describe how to access Objective-C code from JavaScript running in the WebView. It is not as easy as it is in Android. There is no direct API in UIWebView to call native code, unlike … <\/p>\n
Continue reading “Calling Objective-C code from JavaScript in iOS applications”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Calling Objective-C function from JavaScript in iOS applications http:\/\/wp.me\/p2g9O8-aL","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[15,20,1],"tags":[14,5,63],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-aL","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/667"}],"collection":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/comments?post=667"}],"version-history":[{"count":1,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/667\/revisions"}],"predecessor-version":[{"id":1998,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/667\/revisions\/1998"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=667"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=667"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}