diff --git a/README.md b/README.md index cd8e6294..c5c103d1 100644 --- a/README.md +++ b/README.md @@ -36,54 +36,64 @@ To use a WebViewJavascriptBridge in your own project: 2) Import the header file and declare an ivar property: - #import "WebViewJavascriptBridge.h" +```objc +#import "WebViewJavascriptBridge.h" +``` ... - @property WebViewJavascriptBridge* bridge; +```objc +@property WebViewJavascriptBridge* bridge; +``` 3) Instantiate WebViewJavascriptBridge with 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"); - }]; +```objc +self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView handler:^(id data, WVJBResponseCallback responseCallback) { + NSLog(@"Received message from javascript: %@", data); + responseCallback(@"Right back atcha"); +}]; +``` 4) Go ahead and 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); - }]; +```objc +[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); +}]; +``` 4) Finally, set up the javascript side: - function connectWebViewJavascriptBridge(callback) { - if (window.WebViewJavascriptBridge) { +```javascript +function connectWebViewJavascriptBridge(callback) { + if (window.WebViewJavascriptBridge) { + callback(WebViewJavascriptBridge) + } else { + document.addEventListener('WebViewJavascriptBridgeReady', function() { callback(WebViewJavascriptBridge) - } else { - document.addEventListener('WebViewJavascriptBridgeReady', function() { - callback(WebViewJavascriptBridge) - }, false) - } + }, false) } +} + +connectWebViewJavascriptBridge(function(bridge) { - 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) - }) + /* 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) + }) +}) +``` WKWebView Support (iOS 8 & OS 10.10) ------------------------------------ @@ -95,16 +105,18 @@ WebViewJavascriptBridge supports [WKWebView](http://nshipster.com/wkwebkit/) for 1) Import the header file: -``` +```objc #import "WKWebViewJavascriptBridge.h" ``` 2) Instantiate WKWebViewJavascriptBridge and with a WKWebView object - WKWebViewJavascriptBridge* bridge = [WKWebViewJavascriptBridge bridgeForWebView:webView handler:^(id data, WVJBResponseCallback responseCallback) { - NSLog(@"Received message from javascript: %@", data); - responseCallback(@"Right back atcha"); - }]; +```objc +WKWebViewJavascriptBridge* bridge = [WKWebViewJavascriptBridge bridgeForWebView:webView handler:^(id data, WVJBResponseCallback responseCallback) { + NSLog(@"Received message from javascript: %@", data); + responseCallback(@"Right back atcha"); +}]; +``` Contributors & Forks -------------------- @@ -127,15 +139,17 @@ The `WVJBResponseCallback` will not be `nil` if the javascript expects a respons Optionally, pass in `webViewDelegate:(UIWebViewDelegate*)webViewDelegate` if you need to respond to the [web view's lifecycle events](http://developer.apple.com/library/ios/documentation/uikit/reference/UIWebViewDelegate_Protocol/Reference/Reference.html). 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) { /* ... */ }]; + +```objc +[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]` @@ -144,11 +158,13 @@ Send a message to javascript. Optionally expect a response by giving a `response 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); - }]; +```objc +[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]` @@ -156,9 +172,11 @@ Register a handler called `handlerName`. The javascript can then call this handl Example: - [self.bridge registerHandler:@"getScreenHeight" handler:^(id data, WVJBResponseCallback responseCallback) { - responseCallback([NSNumber numberWithInt:[UIScreen mainScreen].bounds.size.height]); - }]; +```objc +[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]` @@ -167,10 +185,12 @@ Call the javascript handler called `handlerName`. Optionally expect a response b 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); - }]; +```objc +[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); +}]; +``` #### 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: @@ -179,8 +199,7 @@ Example: Example: - -``` +```objc [WebViewJavascriptBridge bridgeForWebView:_webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) { @@ -198,10 +217,12 @@ Always wait for the `WebViewJavascriptBridgeReady` DOM event. Example: - document.addEventListener('WebViewJavascriptBridgeReady', function(event) { - var bridge = event.bridge - // Start using the bridge - }, false) +```javascript +document.addEventListener('WebViewJavascriptBridgeReady', function(event) { + var bridge = event.bridge + // Start using the bridge +}, false) +``` ##### `bridge.init(function messageHandler(data, response) { ... })` @@ -213,12 +234,14 @@ The `response` object will be defined if if ObjC sent the message with a `WVJBRe Example: - bridge.init(function(data, responseCallback) { - alert("Got data " + JSON.stringify(data)) - if (responseCallback) { - responseCallback("Right back atcha!") - } - }) +```javascript +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" })` @@ -228,10 +251,12 @@ Send a message to ObjC. Optionally expect a response by giving a `responseCallba Example: - bridge.send("Hi there!") - bridge.send("Hi there!", function(responseData) { - alert("I got a response! "+JSON.stringify(responseData)) - }) +```javascript +bridge.send("Hi there!") +bridge.send("Hi there!", function(responseData) { + alert("I got a response! "+JSON.stringify(responseData)) +}) +``` ##### `bridge.registerHandler("handlerName", function(responseData) { ... })` @@ -239,11 +264,12 @@ Register a handler called `handlerName`. The ObjC can then call this handler wit Example: - bridge.registerHandler("showAlert", function(data) { alert(data) }) - bridge.registerHandler("getCurrentPageUrl", function(data, responseCallback) { - responseCallback(document.location.toString()) - }) - +```javascript +bridge.registerHandler("showAlert", function(data) { alert(data) }) +bridge.registerHandler("getCurrentPageUrl", function(data, responseCallback) { + responseCallback(document.location.toString()) +}) +``` iOS4 support (with JSONKit) ---------------------------