An iOS/OSX bridge for sending messages between Obj-C and JavaScript in UIWebViews/WebViews.
If you like WebViewJavascriptBridge you may also want to check out WebViewProxy.
In the Wild
WebViewJavascriptBridge is used by a range of companies and projects. This list is incomplete, but feel free to add your’s and send a PR.
- Facebook Messenger
- Facebook Paper
- Yardsale
- EverTrue
- Game Insight
- Altralogica
- Sush.io
- Flutterby Labs
- JD Media’s 鼎盛中华
- Dojo4’s Imbed
- CareZone
- Hemlig
- FRIL
Setup & Examples (iOS & OSX)
Start with the Example Apps/ folder. Open either the iOS or OSX project and hit run to see it in action.
To use a WebViewJavascriptBridge in your own project:
1) Drag the WebViewJavascriptBridge
folder into your project.
- In the dialog that appears, uncheck “Copy items into destination group’s folder” and select “Create groups for any folders”
2) Import the header file and declare an ivar property:
#import "WebViewJavascriptBridge.h"
…
1
|
|
3) Instantiate WebViewJavascriptBridge with a UIWebView (iOS) or WebView (OSX):
1 2 3 4 |
|
4) Go ahead and send some messages from ObjC to javascript:
1 2 3 4 5 |
|
4) Finally, set up the javascript side:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
WKWebView Support (iOS 8 & OS 10.10)
WARNING: WKWebView still has many bugs and missing network APIs. It may not be a simple drop-in replacement.
WebViewJavascriptBridge supports WKWebView for iOS 8 and OSX Yosemite. In order to use WKWebView you need to instantiate the WKWebViewJavascriptBridge
. The rest of the WKWebViewJavascriptBridge
API is the same as WebViewJavascriptBridge
.
1) Import the header file:
1
|
|
2) Instantiate WKWebViewJavascriptBridge and with a WKWebView object
1 2 3 4 |
|
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 for the given web view.
The WVJBResponseCallback
will not be nil
if the javascript expects a response.
Optionally, pass in webViewDelegate:(UIWebViewDelegate*)webViewDelegate
if you need to respond to the web view’s lifecycle events.
Example:
1 2 3 4 5 6 7 8 |
|
[bridge send:(id)data]
[bridge send:(id)data responseCallback:(WVJBResponseCallback)responseCallback]
Send a message to javascript. Optionally expect a response by giving a responseCallback
block.
Example:
1 2 3 4 5 |
|
[bridge registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler]
Register a handler called handlerName
. The javascript can then call this handler with WebViewJavascriptBridge.callHandler("handlerName")
.
Example:
1 2 3 |
|
[bridge callHandler:(NSString*)handlerName data:(id)data]
[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:
1 2 3 4 |
|
Custom bundle
WebViewJavascriptBridge
requires WebViewJavascriptBridge.js.txt
file that is injected into web view to create a bridge on JS side. Standard implementation uses mainBundle
to search for this file. If you e.g. build a static library and you have that file placed somewhere else you can use this method to specify which bundle should be searched for WebViewJavascriptBridge.js.txt
file:
[WebViewJavascriptBridge bridgeForWebView:(UIWebView/WebView*)webView webViewDelegate:(UIWebViewDelegate*)webViewDelegate handler:(WVJBHandler)handler resourceBundle:(NSBundle*)bundle
Example:
1 2 3 4 5 6 7 |
|
Javascript API
document.addEventListener('WebViewJavascriptBridgeReady', function onBridgeReady(event) { ... }, false)
Always wait for the WebViewJavascriptBridgeReady
DOM event.
Example:
1 2 3 4 |
|
bridge.init(function messageHandler(data, response) { ... })
Initialize the bridge. 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 response
object will be defined if if ObjC sent the message with a WVJBResponseCallback
block.
Example:
1 2 3 4 5 6 |
|
bridge.send("Hi there!")
bridge.send({ Foo:"Bar" })
bridge.send(data, function responseCallback(responseData) { ... })
Send a message to ObjC. Optionally expect a response by giving a responseCallback
function.
Example:
1 2 3 4 |
|
bridge.registerHandler("handlerName", function(responseData) { ... })
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:
1 2 3 4 |
|
iOS4 support (with JSONKit)
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.