項(xiàng)目中遇到需要在 UIVWebView 中添加幾個(gè)按鈕、點(diǎn)擊事件以及改變一些文字，在 GitHub 上看到 WebViewJavascriptBridge 可以用于處理 OC 與 JS 間的交互，就嘗試使用它做了一些簡單的操作谎脯。
按照官方說明，需要做以下幾步操作進(jìn)行初始化配置：
1.導(dǎo)入頭文件并聲明一個(gè) WebViewJavascriptBridge 的實(shí)例屬性：
#import "WebViewJavascriptBridge.h"
@property WebViewJavascriptBridge* bridge;
2.使用 UIWebView 對(duì) bridge 進(jìn)行初始化：
self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
3.在 OC 中注冊(cè)一個(gè) Handler 供 JS 調(diào)用，或調(diào)用 JS 中的一個(gè) Handler：
[self.bridge registerHandler:@"ObjC Echo" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"ObjC Echo called with: %@", data);
responseCallback(data);
}];
[self.bridge callHandler:@"JS Echo" responseCallback:^(id responseData) {
NSLog(@"ObjC received response: %@", responseData);
}];
4.然后在 JS 中加一些默認(rèn)代碼：
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
setupWebViewJavascriptBridge(function(bridge) {
/* Initialize your app here */
// JS 注冊(cè) handler 供 OC 調(diào)用蒋纬，以及調(diào)用 OC handler 的例子，注意調(diào)用方法和被調(diào)用方法必須同名坚弱。
bridge.registerHandler('JS Echo', function(data, responseCallback) {
console.log("JS Echo called with:", data)
responseCallback(data)
})
bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
console.log("JS received response:", responseData)
})
})
因?yàn)樾枨蟊容^簡單蜀备，所以需要做的步驟不多，只需要在 JS 中動(dòng)態(tài)添加按鈕荒叶，然后為按鈕的 onclick 添加 handler碾阁，在 OC 中實(shí)現(xiàn)對(duì)應(yīng)的方法即可。
在 toolbar 中添加一個(gè)按鈕及handler些楣，實(shí)現(xiàn)如下：
var likeButton = document.getElementById('toolbar').appendChild(document.createElement('input'))
likeButton.id = 'like'
likeButton.type = 'image'
likeButton.src='heart.png'
likeButton.onclick = function(e) {
e.preventDefault()
// handler
bridge.callHandler('likeNews', {'foo': 'bar'}, function(response) {
likecount.innerHTML = response
likeButton.src='heart_selected.png'
})
}
在 OC 中添加對(duì)應(yīng)方法：
- (void)likeNews
{
[self.bridge registerHandler:@"likeNews" handler:^(id data, WVJBResponseCallback responseCallback) {
[Comment topicWithContentId:self.contentID result:^(SSResponseState state, id<ISSCTopic> topic, NSError *error) {
if (![topic liked]) {
[Comment likeWithContentId:self.contentID title:self.contentDict[@"title"] comment:nil user:nil result:^(SSResponseState state, NSError *error) {
if (state == 1) {
responseCallback([NSString stringWithFormat:@"%ld", (long)[topic likeCount]]);
}
}];
} else {
responseCallback([NSString stringWithFormat:@"%ld", (long)[topic likeCount]]);
}
}];
}];
}
這里使用了 ShareSDK 來進(jìn)行分享脂凶，即 Comment，獲取對(duì)應(yīng)的評(píng)論并進(jìn)行點(diǎn)贊操作愁茁。
其實(shí)這個(gè)項(xiàng)目中對(duì) HTML 的處理有更方便的方法蚕钦，不過之前由于使用 Json 來傳遞 HTML 數(shù)據(jù)，然后本地處理鹅很、添加 CSS 等嘶居，處理的比較麻煩，不過最后的效果都差不多促煮。
最后感謝一下富士233邮屁。
