HTML5 interactions in Ios: Webviewjavascriptbridge

<span id="Label3"></p><p><p></p></p><p><p>Https://github.com/marcuswestin/WebViewJavascriptBridge</p></p><p><p></p></p>Setup & Examples (iOS & OSX)<p><p>Start with the Example apps/folder. Open either the IOS or OSX project and hit run to see it in Action.</p></p><p><p>To use a webviewjavascriptbridge in your own project:</p></p><p><p>1) Drag the <code>WebViewJavascriptBridge</code> folder into your Project.</p></p> <ul> <ul> <li>In the dialog so appears, uncheck "Copy items into destination group ' s folder" and select "Create groups for any folders "</li> </ul> </ul><p><p>2) Import the header file and declare an Ivar Property:</p></p><pre><pre>#<span class="pl-k"><span class="pl-s"><span class="pl-pds">"WebViewJavascriptBridge.h<span class="pl-pds">"</span> </span></span></span></pre></pre><p><p>...</p></p><pre><pre>@property webviewjavascriptbridge* bridge;</pre></pre><p><p>3) instantiate Webviewjavascriptbridge with a UIWebView (iOS) or WebView (OSX):</p></p><pre><pre><span class="pl-c1"><span class="pl-c1">handler:^ (<span class="pl-k">ID data, wvjbresponsecallback responsecallback) { <span class="pl-c1">NSLog (<span class="pl-s"><span class="pl-pds"><span class="pl-c1">%@<span class="pl-pds"><span class="pl-c1">responsecallback (<span class="pl-s"><span class="pl-pds">@) Right back Atcha<span class="pl-pds">");}];</span> </span></span> </span></span> </span></span></span> </span> </span></span></span></pre></pre><p><p>4) Go ahead and send some messages from OBJC to Javascript:</p></p><pre>[<span class="pl-v">Self.bridge<span class="pl-c1"><span class="pl-c1">send:<span class="pl-s"><span class="pl-pds">@ "well Hello there<span class=" pl-pds ">"];[ <span class="pl-v">self.bridge <span class="pl-c1">send:[<span class="pl-c1">nsdictionary <span class="pl-c1"> Dictionarywithobject:<span class="pl-s"><span class="pl-pds">@ "foo<span class=" pl-pds ">" <span class="pl-c1"> Forkey:<span class="pl-s"><span class="pl-pds">@ "bar<span class=" Pl-pds ">"]];[ <span class="pl-v">self.bridge <span class="pl-c1">send:<span class="pl-s"><span class="pl-pds">@ "Give me A response, would you? <span class="pl-pds"> "<span class=" pl-c1 ">responsecallback:^ (<span class=" pl-k ">id Responsedata) { <span class="pl-c1">nslog (<span class="pl-s"><span class="pl-pds">@ "OBJC got its response! <span class="pl-c1">%@<span class="pl-pds" ", responsedata);}]; < span> </span> </span> </span> </span> </span> </span> </span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> </span></span></span></span></span></span></pre><p><p>4) Finally, Set up the JavaScript side:</p></p><pre><span class="pl-k">function<span class="pl-en">Connectwebviewjavascriptbridge (<span class="pl-smi">Callback) {<span class="pl-k">if (<span class="pl-c1">Window. Webviewjavascriptbridge) {callback (webviewjavascriptbridge)}<span class="pl-k">else {<span class="pl-c1">Document.addeventlistener (<span class="pl-s"><span class="pl-pds">' Webviewjavascriptbridgeready<span class="pl-pds">‘,<span class="pl-k">function () {callback (webviewjavascriptbridge)},<span class="pl-c1">False)}}connectwebviewjavascriptbridge (<span class="pl-k">function<span class="pl-smi">Bridge) {<span class="pl-c">/* Init your app here */bridge.init (<span class="pl-k">function<span class="pl-smi">Message<span class="pl-smi">Responsecallback) {<span class="pl-c1"><span class="pl-c1">alert (<span class="pl-s"><span class="pl-pds"> ' Received message: <span class="pl-pds"> <span class="pl-k">+ message) <span class="pl-k">if (responsecallback) {responsecallback (<span class="pl-s"><span class=" Pl-pds ">" right Back Atcha<span class="pl-pds"> ")}) bridge. <span class="pl-c1">send (<span class="pl-s"><span class="pl-pds"> ' Hello from the Javascript<span class="pl-pds"> " ) Bridge. <span class="pl-c1">send (<span class="pl-s"><span class="pl-pds"> "please respond to This<span class=" Pl-pds ">", Span class= "pl-k" >function <span class="pl-en">responsecallback (<span class="pl-smi">responsedata) { <span class="pl-en">console. <span class="pl-c1">log (<span class="pl-s"><span class="pl-pds"> "Javascript got its response<span class=" Pl-pds "> ", Responsedata)}) </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>Wkwebview Support (iOS 8 & OS 10.10)<p><p>Warning:wkwebview still has many bugs and missing network APIs. It May is a simple drop-in replacement.</p></p><p><p>Webviewjavascriptbridge supports Wkwebview for IOS 8 and OSX Yosemite. In order to use Wkwebview your need to instantiate the <code>WKWebViewJavascriptBridge</code> . The rest of the <code>WKWebViewJavascriptBridge</code> API is the same as <code>WebViewJavascriptBridge</code> .</p></p><p><p>1) Import the header file:</p></p><pre><pre>#<span class="pl-k"><span class="pl-s"><span class="pl-pds">"WKWebViewJavascriptBridge.h<span class="pl-pds">"</span> </span></span></span></pre></pre><p><p>2) instantiate Wkwebviewjavascriptbridge and with a Wkwebview object</p></p><pre><pre><span class="pl-c1"><span class="pl-c1">handler:^ (<span class="pl-k">ID data, wvjbresponsecallback responsecallback) { <span class="pl-c1">NSLog (<span class="pl-s"><span class="pl-pds"><span class="pl-c1">%@<span class="pl-pds"><span class="pl-c1">responsecallback (<span class="pl-s"><span class="pl-pds">@) Right back Atcha<span class="pl-pds">");}];</span> </span></span> </span></span> </span></span></span> </span> </span></span></span></pre></pre>Contributors & Forks<p><p>Contributors:https://github.com/marcuswestin/webviewjavascriptbridge/graphs/contributors</p></p><p><p>Forks:https://github.com/marcuswestin/webviewjavascriptbridge/network/members</p></p>API Reference OBJC API<code><code>[WebViewJavascriptBridge bridgeForWebView:(UIWebView/WebView*)webview handler:(WVJBHandler)handler]</code></code><code><code>[WebViewJavascriptBridge bridgeForWebView:(UIWebView/WebView*)webview webViewDelegate:(UIWebViewDelegate*)webViewDelegate handler:(WVJBHandler)handler]</code></code><p><p>Create a JavaScript bridge for the given web View.</p></p><p><p>THE'LL is not being <code>WVJBResponseCallback</code> <code>nil</code> if the JavaScript expects a response.</p></p><p><p>optionally, Pass in <code>webViewDelegate:(UIWebViewDelegate*)webViewDelegate</code> if you need to respond to the Web view ' s lifecycle events.</p></p><p><p>Example:</p></p><pre><pre><span class="pl-c1"><span class="pl-c1">handler:^ (<span class="pl-k">ID data, wvjbresponsecallback responsecallback) { <span class="pl-c1">NSLog (<span class="pl-s"><span class="pl-pds"><span class="pl-c1">%@<span class="pl-pds"><span class="pl-k"><span class="pl-c1">responsecallback (<span class="pl-s"><span class="pl-pds">@) Right back Atcha<span class="pl-pds"><span class="pl-c1"><span class="pl-c1">webviewdelegate:<span class="pl-v"><span class="pl-c1">handler:^ (/<span class="pl-k"><span class="pl-c">* ... */});</span></span> </span></span> </span></span></span> </span></span> </span></span></span> </span></span></span> </span> </span></span></span></pre></pre><code><code>[bridge send:(id)data]</code></code> <code><code>[bridge send:(id)data responseCallback:(WVJBResponseCallback)responseCallback]</code></code><p><p>Send a message to Javascript. Optionally expect a response by giving a <code>responseCallback</code> block.</p></p><p><p>Example:</p></p><pre><pre> [<span class="pl-v">self.bridge <span class="pl-c1">send:<span class="pl-s"><span class="pl-pds">@ "Hi<span class="pl-v" "]; [<span>self.bridge <span class="pl-c1">send:[<span class="pl-c1">nsdictionary <span class="pl-c1"> Dictionarywithobject:<span class="pl-s"><span class="pl-pds">@ "foo<span class=" pl-pds ">" <span class="pl-c1"> Forkey:<span class="pl-s"><span class="pl-pds">@ "bar<span class=" Pl-pds ">"]];[ <span class="pl-v">self.bridge <span class="pl-c1">send:<span class="pl-s"><span class="pl-pds">@ "I expect a response! <span class="pl-pds"> "<span class=" pl-c1 ">responsecallback:^ (<span class=" pl-k ">id Responsedata) { <span class="pl-c1">nslog (<span class="pl-s"><span class="pl-pds">@ "Got response! <span class="pl-c1">%@<span class="pl-pds" ", responsedata);}]; < span> </span> </span> </span> </span> </span> </span> </span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> </span></span></span></span></pre></pre><code><code>[bridge registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler]</code></code><p><p>Register a handler called <code>handlerName</code> . The JavaScript can then call this handler with <code>WebViewJavascriptBridge.callHandler("handlerName")</code> .</p></p><p><p>Example:</p></p><pre><pre>[<span class="pl-v"><span class="pl-c1">registerhandler:<span class="pl-s"><span class="pl-pds">@ "getscreenheight<span class="pl-pds"><span class="pl-c1">handler:^ (<span class="pl-k"><span class="pl-c1">responsecallback ([<span class="pl-c1"><span class="pl-c1"><span class="pl-c1">mainscreen]. bounds.size.height]);}];</span></span></span> </span></span> </span></span> </span></span> </span></span></pre></pre><code><code>[bridge callHandler:(NSString*)handlerName data:(id)data]</code></code> <code><code>[bridge callHandler:(NSString*)handlerName data:(id)data responseCallback:(WVJBResponseCallback)callback]</code></code><p><p>Call the JavaScript handler called <code>handlerName</code> . Optionally expect a response by giving a <code>responseCallback</code> block.</p></p><p><p>Example:</p></p><pre><pre>[<span class="pl-v"><span class="pl-c1">callhandler:<span class="pl-s"><span class="pl-pds">@ "showalert<span class="pl-pds"><span class="pl-c1">data:<span class="pl-s"><span class="pl-pds">@" Hi from OBJC to js!<span class="pl-pds">"]; [<span class="pl-v"><span class="pl-c1">callhandler:<span class="pl-s"><span class="pl-pds">@ "getcurrentpageurl<span class="pl-pds"><span class="pl-c1">data:<span class="pl-c1"><span class="pl-c1">responsecallback:^ (<span class="pl-k"><span class="pl-c1">NSLog (<span class="pl-s"><span class="pl-pds"><span class="pl-c1">%@<span class="pl-pds">", responsedata);}];</span> </span></span></span> </span></span> </span></span> </span></span> </span></span> </span></span> </span> </span></span> </span></span> </span></span> </span></span></pre></pre>Custom Bundle<p><p><code>WebViewJavascriptBridge</code>Requires <code>WebViewJavascriptBridge.js.txt</code> file is injected into the Web view to the Create a bridge on JS Side. Standard implementation uses to search for this <code>mainBundle</code> file. If you e.g. build a the static library and you have the so file placed somewhere else you can use the This method to specify which B undle should is searched for <code>WebViewJavascriptBridge.js.txt</code> file:</p></p><code><code>[WebViewJavascriptBridge bridgeForWebView:(UIWebView/WebView*)webView webViewDelegate:(UIWebViewDelegate*)webViewDelegate handler:(WVJBHandler)handler resourceBundle:(NSBundle*)bundle</code></code><p><p>Example:</p></p><pre>[webviewjavascriptbridge<span class="pl-c1">Bridgeforwebview:_webview<span class="pl-c1"><span class="pl-c1">webviewdelegate:<span class="pl-v">self <span class="pl-c1">handler:^ (<span class="pl-k">ID data, wvjbresponsecallback responsecall Back) { <span class="pl-c1">NSLog (<span class="pl-s"><span class="pl-pds">@ "Received message from javascript: <span class="pl-c1">%@<span class="pl-pds">", data);} <span class="pl-c1">resourcebundle:[<span class="pl-c1">nsbundle <span class="pl-c1">bundlewithurl:[[<span class="pl-c1">nsbundle <span class="pl-c1">mainbundle] <span class="pl-c1">urlforresource:<span class="pl-s"><span class="pl-pds">@ " Resourcesbundle<span class="pl-pds">" <span class="pl-c1">withextension:<span class="pl-s"><span class="pl-pds">@" bundle<span class="pl-pds">"</span> </span></span> </span> </span> </span></span> </span> </span> </span> </span> ]]; </span></span></span></span></span></span></span></span></span></span></span></span></span></pre>Javascript API<code><code>document.addEventListener(‘WebViewJavascriptBridgeReady‘, function onBridgeReady(event) { ... }, false)</code></code><p><p>Always wait for the <code>WebViewJavascriptBridgeReady</code> DOM Event.</p></p><p><p>Example:</p></p><pre><pre><span class="pl-c1">Document.addeventlistener (<span class="pl-s"><span class="pl-pds">' webviewjavascriptbridgeready<span class="pl-pds"><span class="pl-k">function (<span class="pl-smi"><span class="pl-k"><span class="pl-k"><span class="pl-c1"><span class="pl-c"><span class="pl-c1">false)</span></span></span></span></span></span> </span></span> </span></span></span></pre></pre><code><code>bridge.init(function messageHandler(data, response) { ... })</code></code><p><p>Initialize the Bridge. This should is called inside of the <code>‘WebViewJavascriptBridgeReady‘</code> event Handler.</p></p><p><p>The <code>messageHandler</code> function would receive all messages sent from OBJC via <code>[bridge send:(id)data]</code> and <code>[bridge send:(id)data responseCallback:(WVJBResponseCallback)responseCallback]</code> .</p></p><p><p>The <code>response</code> object would be defined if if OBJC sent the message with a <code>WVJBResponseCallback</code> block.</p></p><p><p>Example:</p></p><pre><pre>Bridge.init (<span class="pl-k">function (<span class="pl-smi"><span class="pl-smi">responsecallback) { <span class="pl-c1">alert (<span class="pl-s"><span class="pl-pds"><span class="pl-pds"><span class="pl-k"><span class="pl-c1"><span class="pl-k">if (responsecallback) {responsecallback ( <span class="pl-s"><span class="pl-pds"> "right back atcha! <span class="pl-pds">") }})</span></span></span></span></span></span></span></span></span></span></span></span></span></pre></pre> <code><code>bridge.send("Hi there!")</code></code><code><code>bridge.send({ Foo:"Bar" })</code></code><code><code>bridge.send(data, function responseCallback(responseData) { ... })</code></code><p><p>Send a message to Objc. Optionally expect a response by giving a <code>responseCallback</code> Function.</p></p><p><p>Example:</p></p><pre><pre>Bridge. <span class="pl-c1">Send (<span class="pl-s"><span class="pl-pds">"Hi there!<span class="pl-pds">") Bridge. <span class="pl-c1">Send (<span class="pl-s"><span class="pl-pds">"Hi there! <span class="pl-pds"><span class="pl-k"> Function (<span class="pl-smi"><span class="pl-c1">alert (<span class="pl-s"><span class="pl-pds"><span class="pl-pds">"<span class="pl-k">+<span class="pl-c1">json.stringify (responsedata))})</span> </span> </span></span></span> </span></span> </span></span> </span></span> </span> </span></span></span></span></pre></pre> <code><code>bridge.registerHandler("handlerName", function(responseData) { ... })</code></code><p><p>Register a handler called <code>handlerName</code> . The OBJC can and call this handler with and <code>[bridge callHandler:"handlerName" data:@"Foo"]</code><code>[bridge callHandler:"handlerName" data:@"Foo" responseCallback:^(id responseData) { ... }]</code></p></p><p><p>Example:</p></p><pre><pre>Bridge.registerhandler (<span class="pl-s"><span class="pl-pds">"showalert<span class="pl-pds"><span class="pl-k">function" (<span class="pl-smi"><span class="pl-c1">alert (data)}) bridge.registerhandler (<span class="pl-s"><span class="pl-pds">" Getcurrentpageurl<span class="pl-pds"><span class="pl-k">function (<span class="pl-smi"><span class="pl-smi">responsecallback) {responsecallback (<span class="pl-c1">document. <span class="pl-c1"> Location. <span class="pl-c1">toString ())})</span> </span> </span> </span></span> </span></span> </span></span> </span></span> </span></span> </span></span></pre></pre>IOS4 Support (with Jsonkit)<p><p><em>Note</em>: iOS4 support have not yet been tested in v2+.</p></p><p><p>Webviewjavascriptbridge uses by <code>NSJSONSerialization</code> Default. If you need IOS 4 support then you can use jsonkit, and add to the <code>USE_JSONKIT</code> preprocessor macros for your project.</p></p><p><p> Interactions with HTML5 in ios: Webviewjavascriptbridge </p> </p></span>