WebViewJavascriptBridge－Obj-C和JavaScript互通消息的橋梁
WebViewJavascriptBridge是Obj-C和JavaScript通過UIWebViews/WebViews互通消息的一個iOS/OSX的橋梁. 如果你喜歡WebViewJavascriptBridge,你可能也想check outWebViewProxy.
Obj-C和JavaScript原理簡單說一下，Obj-C調(diào)用JavaScript很簡單，可以通過webview的stringByEvaluatingJavaScriptFromString:方法調(diào)用JavaScript代碼；JavaScript調(diào)用Obj-C，則是通過web view的代理方法shouldStartLoadWithRequest：來接收JavaScript的網(wǎng)絡請求從而實現(xiàn)調(diào)用。
正在使用WebViewJavascriptBridge的項目
有很多的公司和項目在使用WebViewJavascriptBridge.這個列表不完整,你可以隨意添加.
Facebook Messenger
Facebook Paper
Yardsale
EverTrue
Game Insight
Altralogica
Sush.io
Flutterby Labs
JD Media’s 鼎盛中華
Dojo4’s Imbed
CareZone
Hemlig
安裝& 例子 (iOS & OSX)
首先打開Example Apps文件夾.打開iOS或者OSX的工程然后點擊運行.
在你自己的工程中用WebViewJavascriptBridge:
1) 拖動 WebViewJavascriptBridge 文件夾到你的工程中.
在出現(xiàn)的對話框中, 取消 (我覺得應該是選中)”Copy items into destination group’s folder” 并且 選擇 “Create groups for any folders”
2) 引入頭文件并且申明一個屬性:
- #import "WebViewJavascriptBridge.h"
- ...
- @property WebViewJavascriptBridge* bridge;
3) 實例化WebViewJavascriptBridge并且?guī)弦粋€UIWebView (iOS)或者WebView (OSX):
- self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView handler:^(id data, WVJBResponseCallback responseCallback) {
- NSLog(@"Received message from javascript: %@", data);
- responseCallback(@"Right back atcha");
- }];
4) 首先從ObjC到javascript發(fā)送一些消息:
- [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) 然后,看看javascript這邊:
- 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 參考
ObjC API
- [WebViewJavascriptBridge bridgeForWebView: (UIWebView/WebView*)webview handler:(WVJBHandler)handler]
- [WebViewJavascriptBridge bridgeForWebView:
- (UIWebView/WebView*)webview webViewDelegate:
- (UIWebViewDelegate*)webViewDelegate handler:(WVJBHandler)handler]
給web view創(chuàng)建一個javascript的橋梁.
假如javascript需要一個反饋,那么 WVJBResponseCallback 不能為 nil .
當然,通過 webViewDelegate:(UIWebViewDelegate*)webViewDelegate 你可以得到web view的生命周期事件.
例子:
- 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]
發(fā)送一個消息給javascript. 并且在發(fā)送消息成功后可以通過 responseCallback block做出一 些反應.
例子:
- [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]
注冊一個叫做 handlerName 的handler. javascript能夠通過 WebViewJavascriptBridge.callHandler(“handlerName”) 調(diào)起這個handler.
例子:
- [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]
調(diào)起javascript叫做 handlerName的handler. 在調(diào)用 handler成功后可以通過responseCallback block做出反應.
例子:
- [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);
- }];
定義 bundle
WebViewJavascriptBridge 要求 WebViewJavascriptBridge.js.txt 文件嵌入到web view來創(chuàng)建一個在JS這邊的橋梁.標準的實現(xiàn)是用 mainBundle 找到這個文件.如果你建立一個 靜態(tài)庫并且你把這個文件放在其他地方,你可以用下面的方法找 WebViewJavascriptBridge.js.txt 文件:
[WebViewJavascriptBridge bridgeForWebView:
(UIWebView/WebView*)webView webViewDelegate:
(UIWebViewDelegate*)webViewDelegate handler:(WVJBHandler)handler
resourceBundle:(NSBundle*)bundle
例子:
- [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)
一直等待 WebViewJavascriptBridgeReady DOM 事件.
例子:
- document.addEventListener('WebViewJavascriptBridgeReady', function(event) {
- var bridge = event.bridge
- // Start using the bridge
- }, false)
bridge.init(function messageHandler(data, response) { … })
初始化這個橋. 這會調(diào)起 ‘WebViewJavascriptBridgeReady’ 的事件handler.
這個 messageHandler 函數(shù)會接收通過ObjC的 [bridge send:(id)data] 和 [bridge send:(id)data responseCallback:(WVJBResponseCallback)responseCallback] 方法 發(fā)送的所有消息.
如果ObjC發(fā)送消息時有WVJBResponseCallback block,那么可以通過response對象發(fā)送消息.
例子:
- 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) { …
})
給ObjC發(fā)送消息. 在發(fā)送成功后可以通過 responseCallback 函數(shù)做出反應.
例子:
- bridge.send("Hi there!")
- bridge.send("Hi there!", function(responseData) {
- alert("I got a response! "+JSON.stringify(responseData))
- })
bridge.registerHandler(“handlerName”, function(responseData) { … })
注冊一個叫做 handlerName 的handler. ObjC能夠通過 [bridge callHandler:”handlerName” data:@”Foo”] 和 [bridge callHandler:”handlerName” data:@”Foo” responseCallback:^(id responseData) { … }] 兩個方法調(diào)起這個handler.
例子:
- bridge.registerHandler("showAlert", function(data) { alert(data) })
- bridge.registerHandler("getCurrentPageUrl", function(data, responseCallback) {
- responseCallback(document.location.toString())
- })
iOS4 支持 (包括 JSONKit)
注:iOS4支持尚未在V2 +測試.
WebViewJavascriptBridge 默認使用 NSJSONSerialization .如果你需要iOS 4的支持,你可以用JSONKit,并且增加 USE_JSONKIT 的預處理宏到你的工程中.
