iOS JavaScript bridge

Question

I'm working on an app where I'm going to use both HTML5 in UIWebView and native iOS framework together. I know that I can implement communication between JavaScript and Objective-C. Are there any libraries that simplify implementing this communication? I know that there are several libraries to create native iOS apps in HTML5 and javascript (for example AppMobi, PhoneGap), but I'm not sure if there is a library to help create native iOS apps with heavy JavaScript usage. I need to:

1. Execute JS methods from Objective-C
2. Execute Objective-C methods from JS
3. Listen to native JS events from Objective-C (for example DOM ready event)

Answer 1

There are a few libraries, but I didn't used any of these in big projects, so you might want to try them out:

• WebViewJavascriptBridge: https://github.com/marcuswestin/WebViewJavascriptBridge
• GAJavaScript: https://github.com/newyankeecodeshop/GAJavaScript

—

However, I think it's something simple enough that you might give it a try yourself. I personally did exactly this when I needed to do that. You might also create a simple library that suits your needs.

1. Execute JS methods from Objective-C

This is really just one line of code.

NSString *returnvalue = [webView stringByEvaluatingJavaScriptFromString:@"your javascript code string here"]; 

More details on the official UIWebView Documentation.

2. Execute Objective-C methods from JS

This is unfortunately slightly more complex, because there isn't the same windowScriptObject property (and class) that exists on Mac OSX allowing complete communication between the two.

However, you can easily call from javascript custom-made URLs, like:

window.location = yourscheme://callfunction/parameter1/parameter2?parameter3=value 

And intercept it from Objective-C with this:

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

This is not as clean as it should be (or by using windowScriptObject) but it works.

3. Listen to native JS events from Objective-C (for example DOM ready event)

From the above explanation, you see that if you want to do that, you have to create some JavaScript code, attach it to the event you want to monitor and call the correct window.location call to be then intercepted.

Again, not clean as it should be, but it works.

Answer 2

The suggested method of calling objective c from JS in the accepted answer isn't recommended. One example of problems: if you make two immediate consecutive calls one is ignored (you can't change location too quickly).

I recommend the following alternative approach:

function execute(url)  {   var iframe = document.createElement("IFRAME");   iframe.setAttribute("src", url);   document.documentElement.appendChild(iframe);   iframe.parentNode.removeChild(iframe);   iframe = null; } 

You call the execute function repeatedly and since each call executes in its own iframe, they should not be ignored when called quickly.

Credits to this guy.