An iOS bridge for sending messages to and from javascript in a UIWebView.
Just open the Xcode project and hit run to see the example application.
See ExampleApp/* for example code. To use it in your own project:
- Drag the
WebViewJavascriptBridgefolder into your project.
In the dialog that appears:
- Uncheck "Copy items into destination group's folder (if needed)"
- Select "Create groups for any folders"
-
Import the header file:
#import "WebViewJavascriptBridge.h"
-
Instantiate a UIWebView and a WebViewJavascriptBridge:
UIWebView* webView = [[UIWebView alloc] initWithFrame:self.window.bounds]; WebViewJavascriptBridge* javascriptBridge = [WebViewJavascriptBridge javascriptBridgeForWebView:webView handler:^(id data, WVJBResponseCallback callback) { NSLog(@"Received message from javascript: %@", data); }];
-
Go ahead and send some messages from Objc to javascript:
[javascriptBridge send:@"Well hello there"]; [javascriptBridge send:[NSDictionary dictionaryWithObject:@"Foo" forKey:@"Bar"]]; [javascriptBridge send:@"Give me a response, will you?" responseCallback:^(id responseData) { NSLog(@"I got a response! %@", responseData); }];
-
Finally, set up the javascript side of things:
document.addEventListener('WebViewJavascriptBridgeReady', function onBridgeReady() { WebViewJavascriptBridge.init(function(message, responseCallback) { alert('Received message: ' + message)
if (responseCallback) { responseCallback("Right back atcha") } }) WebViewJavascriptBridge.send('Hello from the javascript') }, false)
Note: iOS4 support has not yet been tested in v2.
WebViewJavascriptBridge uses NSJSONSerialization by default. If you need iOS 4 support then you can use JSONKit, and add USE_JSONKIT to the preprocessor macros for your project.
[WebViewJavascriptBridge javascriptBridgeForWebView:(UIWebView*)webview handler:(WVJBHandler)handler]
[WebViewJavascriptBridge javascriptBridgeForWebView:(UIWebView*)webview webViewDelegate:(UIWebViewDelegate*)webViewDelegate handler:(WVJBHandler)handler]
Create a javascript bridge for the given UIWebView.
Example:
[WebViewJavascriptBridge javascriptBridgeForWebView:webView handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"Received message from javascript: %@", data);
if (responseCallback) {
responseCallback(@"Right back atcha")
}
}]
[WebViewJavascriptBridge javascriptBridgeForWebView:webView webViewDelegate:self handler:^(id data, WVJBCallback responseCallback) { /* ... */ }];
The handler's responseCallback will be a block if javascript sent the message with a function responseCallback, or nil otherwise.
Optionally, pass in webViewDelegate:(UIWebViewDelegate*)webViewDelegate if you need to respond to the UIWebView's lifecycle events.
Send a message to javascript. Optionally expect a response by giving a responseCallback block.
Example:
[bridge send:@"Hi"];
[bridge send:[NSDictionary dictionaryWithObject:@"Foo" forKey:@"Bar"]];
[bridge send:@"I expect a response!" responseCallback:^(id data) {
NSLog(@"Got response: %@", data);
}];
Register a handler called handlerName. The javascript can then call this handler with WebViewJavascriptBridge.callHandler("handlerName", function(response) { ... }).
Example:
[bridge registerHandler:@"getScreenHeight" handler:^(id data, WVJBResponseCallback responseCallback) {
responseCallback([NSNumber numberWithInt:[UIScreen mainScreen].bounds.size.height]);
}];
[bridge callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)callback]
Call the javascript handler called handlerName. Optionally expect a response by giving a responseCallback block.
Example:
[bridge callHandler:@"showAlert" data:@"Hi from ObjC to JS!"];
[bridge callHandler:@"getCurrentPageUrl" data:nil responseCallback:^(id responseData) {
NSLog(@"Current UIWebView page URL is: %@", responseData);
}];
document.addEventListener('WebViewJavascriptBridgeReady', function onBridgeReadyHandler() { ... }, false)
Always wait for the WebViewJavascriptBridgeReady DOM event before using WebViewJavascriptBridge.
Example:
document.addEventListener('WebViewJavascriptBridgeReady', function() {
// Start using WebViewJavascriptBridge
}, false)
Initialize the WebViewJavascriptBridge. This should be called inside of the 'WebViewJavascriptBridgeReady' event handler.
The messageHandler function will receive all messages sent from ObjC via [bridge send:(id)data] and [bridge send:(id)data responseCallback:(WVJBResponseCallback)responseCallback].
The responseCallback will be a function if ObjC sent the message with a WVJBResponseCallback block, or undefined otherwise.
Example:
WebViewJavascriptBridge.init(function(data, responseCallback) {
alert("Got data " + JSON.stringify(data))
if (responseCallback) {
responseCallback("Right back atcha!")
}
})
Send a message to ObjC. Optionally expect a response by giving a responseCallback function.
Example:
WebViewJavascriptBridge.send("Hi there!")
WebViewJavascriptBridge.send("Hi there!", function(response) {
alert("I got a response! "+JSON.stringify(response))
})
Register a handler called handlerName. The ObjC can then call this handler with [bridge callHandler:"handlerName" data:@"Foo"] and [bridge callHandler:"handlerName" data:@"Foo" responseCallback:^(id responseData) { ... }]
Example:
WebViewJavascriptBridge.registerHandler("showAlert", function(data) { alert(data) })
WebViewJavascriptBridge.registerHandler("getCurrentPageUrl", function(data, responseCallback) {
responseCallback(document.location.toString())
})
- @marcuswestin Marcus Westin
- @psineur Stepan Generalov
- @sergiocampama Sergio Campamá
- @stringbean Michael Stringer
- @tanis2000 Valerio Santinelli
- @drewburch Andrew Burch