WebViewJavascriptBridge－Bridge between Obj-C and JavaScript

[[138163]]

WebViewJavascriptBridge is an iOS/OSX bridge for Obj-C and JavaScript to communicate via UIWebViews/WebViews. If you like WebViewJavascriptBridge, you might also want to check out WebViewProxy.

Let me briefly explain the principles of Obj-C and JavaScript. It is very simple for Obj-C to call JavaScript. You can call JavaScript code through the stringByEvaluatingJavaScriptFromString: method of webview; JavaScript calls Obj-C by receiving JavaScript network requests through the web view's proxy method shouldStartLoadWithRequest: to implement the call.

Projects using WebViewJavascriptBridge

There are many companies and projects using WebViewJavascriptBridge. This list is not complete, feel free to add to it.

Facebook Messenger

Facebook Paper

Yardsale

EverTrue

Game Insight

Altralogica

Sush.io

Flutterby Labs

JD Media's China

Dojo4's Imbed

CareZone

Hemlig

Installation & Examples (iOS & OSX)

First open the Example Apps folder. Open the iOS or OSX project and click Run.

To use WebViewJavascriptBridge in your own project:

1) Drag the WebViewJavascriptBridge folder into your project.

In the dialog box that appears, uncheck (I think it should be checked) "Copy items into destination group's folder" and select "Create groups for any folders"

2) Import the header file and declare a property:

 # import   "WebViewJavascriptBridge.h"  
 ...
 @property WebViewJavascriptBridge* bridge;

3) Instantiate WebViewJavascriptBridge and bring a UIWebView (iOS) or WebView (OSX):

 self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView handler:^(id data, WVJBResponseCallback responseCallback) {
 NSLog(@ "Received message from javascript: %@" , data);
 responseCallback(@ "Right back atcha" );
 }];

4) First send some messages from ObjC to javascript:

 [self.bridge send:@ "Well hello there" ];
 [self.bridge send:[NSDictionary dictionaryWithObject:@ "Foo" forKey:@ "Bar" ]];
 [self.bridge send:@ "Give me a response, will you?" responseCallback:^(id responseData) {
 NSLog(@ "ObjC got its response! %@" , responseData);
 }];

5) Then, look at the javascript side:

 function connectWebViewJavascriptBridge(callback) {
 if (window.WebViewJavascriptBridge) {
 callback(WebViewJavascriptBridge)
 } else {
 document.addEventListener('WebViewJavascriptBridgeReady', function() {
 callback(WebViewJavascriptBridge)
 }, false)
 }
 }
 connectWebViewJavascriptBridge(function(bridge) {
 /* Init your app here */
 bridge.init(function(message, responseCallback) {
 alert('Received message: ' + message)
 if (responseCallback) {
 responseCallback("Right back atcha")
 }
 })
 bridge.send('Hello from the javascript')
 bridge.send('Please respond to this', function responseCallback(responseData) {
 console.log("Javascript got its response", responseData)
 })
 })

Contributors & Forks

Contributors: https://github.com/marcuswestin/WebViewJavascriptBridge/graphs/contributors

Forks: https://github.com/marcuswestin/WebViewJavascriptBridge/network/members

API Reference

ObjC API

 [WebViewJavascriptBridge bridgeForWebView: (UIWebView/WebView*)webview handler:(WVJBHandler)handler] 
 
 [WebViewJavascriptBridge bridgeForWebView: 
 
 (UIWebView/WebView*)webview webViewDelegate: 
 
 (UIWebViewDelegate*)webViewDelegate handler:(WVJBHandler)handler]

Create a javascript bridge to the web view.

If the javascript needs a response, then WVJBResponseCallback cannot be nil.

Of course, you can get the life cycle events of the web view through webViewDelegate:(UIWebViewDelegate*)webViewDelegate.

example:

 WebViewJavascriptBridge bridgeForWebView:webView handler:^(id data, WVJBResponseCallback responseCallback) {
 NSLog(@ "Received message from javascript: %@" , data);
 if (responseCallback) {
 responseCallback(@ "Right back atcha" );
 }
 }]
 [WebViewJavascriptBridge bridgeForWebView:webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) { /* ... */ }]; 
 
 [bridge send:(id)data] 
 
 [bridge send:(id)data responseCallback:(WVJBResponseCallback)responseCallback]

Send a message to javascript. And after the message is sent successfully, you can make some response through the responseCallback block.

example:

 [self.bridge send:@ "Hi" ];
 [self.bridge send:[NSDictionary dictionaryWithObject:@ "Foo" forKey:@ "Bar" ]];
 [self.bridge send:@ "I expect a response!" responseCallback:^(id responseData) {
 NSLog(@ "Got response! %@" , responseData);
 }]; 
 
 [bridge registerHandler:(NSString*)handlerName handler: (WVJBHandler)handler]

Register a handler called handlerName. JavaScript can call this handler via WebViewJavascriptBridge.callHandler("handlerName").

example:

 [self.bridge registerHandler:@ "getScreenHeight" handler:^(id data, WVJBResponseCallback responseCallback) {
 responseCallback([NSNumber numberWithInt:[UIScreen mainScreen].bounds.size.height]);
 }]; 
 
 [bridge callHandler:(NSString*)handlerName data:(id)data] 
 
 [bridge callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)callback]

Calls the handler named handlerName in javascript. After the handler is successfully called, a response can be made through the responseCallback block.

example:

 [self.bridge callHandler:@ "showAlert" data:@ "Hi from ObjC to JS!" ];
 [self.bridge callHandler:@ "getCurrentPageUrl" data:nil responseCallback:^(id responseData) {
 NSLog(@ "Current UIWebView page URL is: %@" , responseData);
 }];

Defining a bundle

WebViewJavascriptBridge requires the WebViewJavascriptBridge.js.txt file to be embedded in the web view to create a bridge on the JS side. The standard implementation uses mainBundle to find this file. If you build a static library and you put this file somewhere else, you can find the WebViewJavascriptBridge.js.txt file as follows:

[WebViewJavascriptBridge bridgeForWebView:

(UIWebView/WebView*)webView webViewDelegate:

(UIWebViewDelegate*)webViewDelegate handler:(WVJBHandler)handler

resourceBundle:(NSBundle*)bundle

example:

 [WebViewJavascriptBridge bridgeForWebView:_webView
 webViewDelegate:self
 handler:^(id data, WVJBResponseCallback responseCallback) {
 NSLog(@ "Received message from javascript: %@" , data);
 }
 resourceBundle:[NSBundle bundleWithURL:[[NSBundle mainBundle] URLForResource:@ "ResourcesBundle" withExtension:@ "bundle" ]]
 ];

Javascript API

document.addEventListener('WebViewJavascriptBridgeReady',

function onBridgeReady(event) { … }, false)

Waiting for the WebViewJavascriptBridgeReady DOM event.

example:

 document.addEventListener('WebViewJavascriptBridgeReady', function(event) {
 var bridge = event.bridge
 // Start using the bridge
 }, false)

bridge.init(function messageHandler(data, response) { … })

Initialize the bridge. This will invoke the 'WebViewJavascriptBridgeReady' event handler.

This messageHandler function will receive all messages sent through the ObjC [bridge send:(id)data] and [bridge send:(id)data responseCallback:(WVJBResponseCallback)responseCallback] methods.

If there is a WVJBResponseCallback block when ObjC sends a message, the message can be sent through the response object.

example:

 bridge.init(function(data, responseCallback) {
 alert( "Got data " + JSON.stringify(data))
 if (responseCallback) {
 responseCallback( "Right back atcha!" )
 }
 })

bridge.send("Hi there!")

bridge.send({ Foo:"Bar" })

bridge.send(data, function responseCallback(responseData) { …

})

Send a message to ObjC. After the message is sent successfully, you can react through the responseCallback function.

example:

 bridge.send( "Hi there!" )
 bridge.send( "Hi there!" , function(responseData) {
 alert( "I got a response! " +JSON.stringify(responseData))
 })

bridge.registerHandler(“handlerName”, function(responseData) { … })

Register a handler called handlerName. ObjC can call this handler via [bridge callHandler:"handlerName" data:@"Foo"] and [bridge callHandler:"handlerName" data:@"Foo" responseCallback:^(id responseData) { … }]

example:

 bridge.registerHandler( "showAlert" , function(data) { alert(data) })
 bridge.registerHandler( "getCurrentPageUrl" , function(data, responseCallback) {
 responseCallback(document.location.toString())
 })

iOS4 support (including JSONKit)

NOTE: iOS4 support has not been tested in V2+.

WebViewJavascriptBridge uses NSJSONSerialization by default. If you need iOS 4 support, you can use JSONKit and add the USE_JSONKIT preprocessor macro to your project.