iOS中用來加載網頁，有兩個控件UIWebView（iOS8之前），WKWebView（iOS8誕生）。
此篇博文暫不討論由UIWebView轉到WKWebView適配的那些坑（Cookie問題，請求攔截問題等等）。
只是記錄一下webView與JS交互的方案調研。
UIWebView交互
- URL Scheme
攔截鏈接，從而獲取鏈接里的信息，只能進行JS專遞信息到OC。可以利用代理方法實現。
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
// NSLog(@"Scheme: %@", [url scheme]); //方案
// NSLog(@"Host: %@", [url host]); //主機
// NSLog(@"Port: %@", [url port]); //端口
// NSLog(@"Path: %@", [url path]); //路徑
// NSLog(@"Relative path: %@", [url relativePath]); //相關路徑
// NSLog(@"Path components as array: %@", [url pathComponents]); //路徑的每個組成部分
// NSLog(@"Parameter string: %@", [url parameterString]); //參數
// NSLog(@"Query: %@", [url query]); //查詢
// NSLog(@"Fragment: %@", [url fragment]); //分段
//當前的鏈接
NSURL* url = [request URL];
NSString * string = [url absoluteString];
//鏈接轉為字典，獲取我們想要的信息
NSDictionary* dic = [self dictionaryFromQuery:string usingEncoding:NSUTF8StringEncoding];
NSLog(@"%@",dic);
//return NO 不允許跳轉鏈接
return YES;
}
鏈接轉字典的工具方法
- (NSDictionary*)dictionaryFromQuery:(NSString*)query usingEncoding:(NSStringEncoding)encoding {
NSCharacterSet* delimiterSet = [NSCharacterSet characterSetWithCharactersInString:@"&;"];
NSMutableDictionary* pairs = [NSMutableDictionary dictionary];
NSScanner* scanner = [[NSScanner alloc] initWithString:query];
while (![scanner isAtEnd]) {
NSString* pairString = nil;
[scanner scanUpToCharactersFromSet:delimiterSet intoString:&pairString];
[scanner scanCharactersFromSet:delimiterSet intoString:NULL];
NSArray* kvPair = [pairString componentsSeparatedByString:@"="];
if (kvPair.count == 2) {
NSString* key = [[kvPair objectAtIndex:0]
stringByReplacingPercentEscapesUsingEncoding:encoding];
NSString* value = [[kvPair objectAtIndex:1]
stringByReplacingPercentEscapesUsingEncoding:encoding];
[pairs setObject:value forKey:key];
}
}
return [NSDictionary dictionaryWithDictionary:pairs];
}
- stringByEvaluatingJavaScriptFromString
這個是OC調用JS方法
self.navigationItem.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
直接調用就可以，缺點就是返回值只能是NSString，不夠靈活。
- JavaScriptCore框架（iOS7）
如果你的項目最低支持到iOS7，那么可以嘗試一下這個。
JavaScriptCore框架其實就是基于webkit中以C/C++實現的JavaScriptCore的一個包裝
而JavaScriptCore是webkit中用來渲染JS的引擎，Safari瀏覽器和iOS開發中的webView都是由webkit來驅動的。
所以利用這個框架可以讓 Objective-C 和 JavaScript 代碼直接的交互變得更加的簡單方便。
使用（注意：一定要在webView加載完成之后使用）
// OC調用JS方法
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
JSContext *jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
JSValue *value = [self.jsContext evaluateScript:@"document.title"];
self.navigationItem.title = value.toString;
}
// JS調用OC方法
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
self.jsContext[@"share"] = ^() {
//獲取到share里的所有參數
NSArray *args = [JSContext currentArguments];
//args中的元素是JSValue，需要轉成OC的對象
NSMutableArray *messages = [NSMutableArray array];
for (JSValue *obj in args) {
[messages addObject:[obj toObject]];
}
NSLog(@"點擊分享js傳回的參數：\n%@", messages);
};
}
- WebViewJavascriptBridge（第三方框架）
傳送門：https://github.com/marcuswestin/WebViewJavascriptBridge/
如果你的項目想要支持iOS7之前的版本，同時想要擁有更好的交互體驗，建議集成一下這個第三方框架。
作為github上8千多star的第三方框架，WebViewJavascriptBridge作為UIWebView交互工具無疑是極為優秀的，使用也極為簡單。
OC代碼
JS調用OC方法（JS給OC傳數據）
//基本設置
[WebViewJavascriptBridge enableLogging];//開啟日志
WebViewJavascriptBridge* bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
[bridge setWebViewDelegate:self];
//方法注冊，AppClosePrice為方法名
[bridge registerHandler:@"AppClosePrice" handler:^(id data, WVJBResponseCallback responseCallback) {
//data為JS傳來的數據
NSLog(@"%@", data);
[self.navigationController popViewControllerAnimated:YES];
}];
** OC調用JS方法（OC給JS傳數據，也可以接收JS傳過來的數據）**
基本設置同上，就是注冊方法的時候不同。
//AppHidden：方法名，appCurVersion：OC給JS傳的數據
[self.bridge callHandler:@"AppHidden" data:appCurVersion responseCallback:^(id responseData) {
NSLog(@"----JS傳過來的數據----%@",responseData);
}];
JS代碼（由后臺實現，可以給后臺參考）
/*這段代碼是固定的，必須要放到js中*/
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)
}
/*與OC交互的所有JS方法都要放在此處注冊，才能調用通過JS調用OC或者讓OC調用這里的JS*/
setupWebViewJavascriptBridge(function(bridge) {
var uniqueId = 1
function log(message, data) {
var log = document.getElementById('log')
var el = document.createElement('div')
el.className = 'logLine'
el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
if (log.children.length) {
log.insertBefore(el, log.children[0])
} else {
log.appendChild(el)
}
}
/* Initialize your app here */
/*注冊一個JS調用OC的方法，不帶參數*/
bridge.registerHandler('AppClosePrice', function() {
log("JS調用OC")
})
/*注冊一個JS調用OC的方法，帶參數*/
bridge.registerHandler('AppClosePrice', function(data, responseCallback) {
log("Get user information from OC: ", data)
})
/*注冊一個OC調用JS的方法*/
bridge.callHandler('AppHidden', function(responseData) {
log("JS call ObjC's getUserIdFromObjC function, and js received response:", responseData)
})
WKWebView交互
WKWebView作為UIWebView的替代品，采用自身的機制進行與JS的交互。
注意：WKWebView不支持JavaScriptCore框架的方式進行JS的交互。
JS調用OC方法（JS給OC傳數據）
交互的方法名定義好，OC，JS都需要進行注冊。
OC端注冊方法（jsCallNative）
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.userContentController = [[WKUserContentController alloc] init];
[config.userContentController addScriptMessageHandler:self name:@"jsCallNative"];
WKWebView *webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT - 14) configuration:config];
JS端注冊方法（jsCallNative）
function payClick() {
window.webkit.messageHandlers.jsCallNative.postMessage({order_no:'201511120981234',channel:'wx',amount:1,subject:'粉色外套'});
}
OC端接收數據
WKWebView的協議WKScriptMessageHandler里面的方法，JS向OC傳任何數據，OC都可以通過該方法接收，通過JS傳過來的數據，我們可以調用相應OC的方法，從而達到JS調用OC方法的目的。
/**
* JS給原生傳數據：JS調用原生的方法
*/
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
NSDictionary *dict = message.body;
NSString* action = [dict valueForKey:@"action"];
NSLog(@"----WKWebView交互----%@",action);
if ([action isEqualToString:@"action1"]) {
[self action1];
}
if ([action isEqualToString:@"action2"]) {
[self action2];
}
}
OC調JS的方法（OC向JS傳數據）
OC端代碼
payResult 為規定好的方法名，JS端用這個方法名接收數據。
// 將支付結果返回給js
//這里的payResult()是JS的語言
NSString *jsStr = [NSString stringWithFormat:@"payResult('%@')",@"支付成功"];
[self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
NSLog(@"%@----%@",result, error);
}];
注意：當JS調用OC的時候也可以用這個方法給JS進行回傳數據，和上面的WKScriptMessageHandler代理中的方法相結合，就是實現了OC和JS的數據交流
JS端代碼
function payResult(str) {
asyncAlert(str);
document.getElementById("returnValue").value = str;
}
總結
UIWebView與JS交互：
- 需要支持iOS6系統及其以下的系統：
集成WebViewJavascriptBridge三方框架就好，方便更加靈活的交互。 - 只需要支持iOS7及其以上的系統：
采用系統自帶的JavaScriptCore框架就能滿足日常的交互功能了。
WKWebView與JS交互：
根據WKWebView所提供的API代理方法就可以實現靈活的交互了。
