WebViewJavascriptBridge－Obj-C和JavaScript互通消息的橋梁

原文地址:www.cocoachina.com/ios/20150629/12248.html?


譯者：@coderyi9

本文翻譯自Marcus Westin的開源框架WebViewJavascriptBridge的readme,英文原文鏈接https://github.com/marcuswestin/WebViewJavascriptBridge.

WebViewJavascriptBridge是Obj-C和JavaScript通過UIWebViews/WebViews互通消息的一個(gè)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：來接收J(rèn)avaScript的網(wǎng)絡(luò)請求從而實(shí)現(xiàn)調(diào)用。

正在使用WebViewJavascriptBridge的項(xiàng)目

有很多的公司和項(xiàng)目在使用WebViewJavascriptBridge.這個(gè)列表不完整,你可以隨意添加.

Facebook Messenger

Facebook Paper

Yardsale

EverTrue

Game Insight

Altralogica

Sush.io

Flutterby Labs

JD Media’s鼎盛中華

Dojo4’sImbed

CareZone

Hemlig

安裝& 例子 (iOS & OSX)

首先打開Example Apps文件夾.打開iOS或者OSX的工程然后點(diǎn)擊運(yùn)行.

在你自己的工程中用WebViewJavascriptBridge:

1) 拖動(dòng) WebViewJavascriptBridge 文件夾到你的工程中.

在出現(xiàn)的對話框中, 取消 (我覺得應(yīng)該是選中)”Copy items into destination group’s folder” 并且 選擇 “Create groups for any folders”

2) 引入頭文件并且申明一個(gè)屬性:

1

2

3#import?"WebViewJavascriptBridge.h"

...

@property?WebViewJavascriptBridge*?bridge;

3) 實(shí)例化WebViewJavascriptBridge并且?guī)弦粋€(gè)UIWebView (iOS)或者WebView (OSX):

1

2

3

4self.bridge?=?[WebViewJavascriptBridge?bridgeForWebView:webView?handler:^(id?data,?WVJBResponseCallback?responseCallback)?{

NSLog(@"Received?message?from?javascript:?%@",?data);

responseCallback(@"Right?back?atcha");

}];

4) 首先從ObjC到j(luò)avascript發(fā)送一些消息:

1

2

3

4

5[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這邊:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22functionconnectWebViewJavascriptBridge(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',functionresponseCallback(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)建一個(gè)javascript的橋梁.

假如javascript需要一個(gè)反饋,那么 WVJBResponseCallback 不能為 nil .

當(dāng)然,通過 webViewDelegate:(UIWebViewDelegate*)webViewDelegate 你可以得到web view的生命周期事件.

例子:

1

2

3

4

5

6

7[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ā)送一個(gè)消息給javascript. 并且在發(fā)送消息成功后可以通過 responseCallback block做出一 些反應(yīng).

例子:

1

2

3

4

5[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]

注冊一個(gè)叫做 handlerName 的handler. javascript能夠通過 WebViewJavascriptBridge.callHandler(“handlerName”) 調(diào)起這個(gè)handler.

例子:

1

2

3[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做出反應(yīng).

例子:

1

2

3

4[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)建一個(gè)在JS這邊的橋梁.標(biāo)準(zhǔn)的實(shí)現(xiàn)是用

mainBundle 找到這個(gè)文件.如果你建立一個(gè) 靜態(tài)庫并且你把這個(gè)文件放在其他地方,你可以用下面的方法找

WebViewJavascriptBridge.js.txt 文件:

[WebViewJavascriptBridge bridgeForWebView:

(UIWebView/WebView*)webView webViewDelegate:

(UIWebViewDelegate*)webViewDelegate handler:(WVJBHandler)handler

resourceBundle:(NSBundle*)bundle

例子:

1

2

3

4

5

6

7[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 事件.

例子:

1

2

3

4document.addEventListener('WebViewJavascriptBridgeReady',function(event)?{

varbridge?=?event.bridge

//?Start?using?the?bridge

},false)

bridge.init(function messageHandler(data, response) { … })

初始化這個(gè)橋. 這會調(diào)起 ‘WebViewJavascriptBridgeReady’ 的事件handler.

這個(gè)

messageHandler 函數(shù)會接收通過ObjC的 [bridge send:(id)data] 和 [bridge

send:(id)data responseCallback:(WVJBResponseCallback)responseCallback]

方法 發(fā)送的所有消息.

如果ObjC發(fā)送消息時(shí)有WVJBResponseCallback block,那么可以通過response對象發(fā)送消息.

例子:

1

2

3

4

5

6bridge.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ù)做出反應(yīng).

例子:

1

2

3

4bridge.send("Hi?there!")

bridge.send("Hi?there!",function(responseData)?{

alert("I?got?a?response!?"+JSON.stringify(responseData))

})

bridge.registerHandler(“handlerName”, function(responseData) { … })

注冊一個(gè)叫做

handlerName 的handler. ObjC能夠通過 [bridge callHandler:”handlerName”

data:@”Foo”] 和 [bridge callHandler:”handlerName” data:@”Foo”

responseCallback:^(id responseData) { … }] 兩個(gè)方法調(diào)起這個(gè)handler.

例子:

1

2

3

4bridge.registerHandler("showAlert",function(data)?{?alert(data)?})

bridge.registerHandler("getCurrentPageUrl",function(data,?responseCallback)?{

responseCallback(document.location.toString())

})

iOS4 支持 (包括 JSONKit)

注:iOS4支持尚未在V2 +測試.

WebViewJavascriptBridge 默認(rèn)使用 NSJSONSerialization .如果你需要iOS 4的支持,你可以用JSONKit,并且增加 USE_JSONKIT 的預(yù)處理宏到你的工程中.

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容