目前iOS Hybrid APP通信方式可以使用WebViewJavascriptBridge第三方庫(kù)、JavaScriptCore.framework（iOS7.0及以上）、WebKit.framework（iOS8.0及以上）及其它解決方案。但隨著越來(lái)越多的App只支持iOS7以上的系統(tǒng)，使用JavaScriptCore.framework和WebKit.framework的方式來(lái)解決WebView與JavaScript通信會(huì)越來(lái)越普遍。
關(guān)于WKWebView的使用可以查看另一篇文章：OC/Swift與JavaScript交互—WKWebView高級(jí)使用
另外JSPatch也是使用JavaScriptCore作為JS引擎，使用JavaScriptCore可以避免使用攔截協(xié)議的方式。
因?yàn)?strong>攔截協(xié)議的方式傳值不方便，DOM原生方法無(wú)法攔截（如History對(duì)象的back()方法，即history.back()方法無(wú)法攔截）。
所以盡量少用攔截協(xié)議的方式進(jìn)行UIWebView與JavaScript交互，盡量多使用JavaScriptCore或WebKit交互，是一種比較優(yōu)雅的方式。
本文主要使用JavaScriptCore進(jìn)行UIWebView和JavaScript交互。
一、相關(guān)方法
// UIWebView的方法
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
// JavaScriptCore中JSContext的方法
- (JSValue *)evaluateScript:(NSString *)script;
二、相關(guān)使用
// 獲取當(dāng)前頁(yè)面的title
NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"];
evaluateScript方法使用場(chǎng)景相對(duì)比較復(fù)雜
對(duì)于這部分的使用，寫了個(gè)Demo放入GitHub倉(cāng)庫(kù)：https://github.com/xiaoL0204/UIWebViewDemo
三、Demo的主要實(shí)現(xiàn)如下：
#pragma mark - javascript上下文
-(void)getJsContext{
self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
}
#pragma mark - 返回按鈕
-(void)changeJavascriptBackMethod:(JSContext *)context{
NSString *jsString1 = @"function historyBack(){}";
NSString *jsString2 = @"window.history.back=function(){historyBack();}";
[context evaluateScript:jsString1];
[context evaluateScript:jsString2];
__weak __block typeof(self) weakSelf = self;
context[@"historyBack"] = ^{
[weakSelf performSelectorOnMainThread:@selector(popSelf) withObject:nil waitUntilDone:NO];
// [weakSelf popSelf];
};
}
#pragma mark - document狀態(tài)改變
-(void)changeJavaScriptStateChangeMethod:(JSContext *)context{
NSString *jsString1 = @"function onreadystatechange(){}";
NSString *jsString2 = @"document.onreadystatechange=function(){onreadystatechange();}";
[context evaluateScript:jsString1];
[context evaluateScript:jsString2];
WeakSelf(ws);
self.jsContext[@"onreadystatechange"] = ^{
JSValue *readyStateValue = [context evaluateScript:@"document.readyState"];
if ([[readyStateValue toString] isEqualToString:@"interactive"]) {
if ([ws respondsToSelector:@selector(changeJsMethodAddLike:)]) {
[ws changeJsMethodAddLike:context];
}
}
};
}
上面的這段代碼做了以下工作：
一、首先會(huì)通過(guò)KVO的方式獲取JavaScript的context，即JavaScript的執(zhí)行上下文環(huán)境，當(dāng)JavaScript文件被WebView載入后，默認(rèn)最先進(jìn)入的是一個(gè)全局的執(zhí)行上下文。
二、context加載兩個(gè)JavaScript函數(shù)。作用分別是：
1.聲明1個(gè) historyBack()函數(shù)，函數(shù)內(nèi)什么都不用做；
2.覆蓋window.history.back函數(shù)，將其指向一個(gè)匿名函數(shù)，匿名函數(shù)內(nèi)部調(diào)用historyBack()函數(shù)；
三、然后在OC中，對(duì)JavaScript的context的historyBack函數(shù)，使用block方式綁定OC方法（更新UI時(shí)確保在主線程執(zhí)行）
實(shí)現(xiàn)方法中使用了JavaScript函數(shù)的替換和增加，有一個(gè)好處，就是HTML5不需要額外自定義JSON對(duì)象。HTML5在不考慮iOS和Android端的前提下，iOS和Android端能完成本地App應(yīng)用和HTML5交互的任務(wù)。
四、UIWebView錯(cuò)誤的注入時(shí)機(jī)
最開(kāi)始是將這幾個(gè)方法的調(diào)用放在webViewDidFinishLoad中，交互邏輯沒(méi)有問(wèn)題，卻會(huì)遇到點(diǎn)擊HTML5中的返回按鈕無(wú)效的情況。
經(jīng)常仔細(xì)觀察，現(xiàn)象是這樣的：
HTML5頁(yè)面加載出來(lái)了，但XCode控制臺(tái)還沒(méi)有打印webViewDidFinishLoad加載完成信息，這時(shí)候點(diǎn)擊HTML5的返回按鈕無(wú)法pop controller；再過(guò)三四秒等webViewDidFinishLoad加載完成信息打印在控制臺(tái)以后，返回按鈕點(diǎn)擊就可以響應(yīng)了。
推測(cè)應(yīng)該是HTML5的body加載完后，HTML5頁(yè)面都已經(jīng)渲染好了，還有某些未加載完的文件或標(biāo)簽，因此UIWebView還沒(méi)有調(diào)用到 webViewDidFinishLoad，也就沒(méi)有注入這3個(gè)方法，交互鏈就斷開(kāi)了。
顯然將webViewDidFinishLoad方法作為JavaScript注入時(shí)機(jī)，已經(jīng)非常滯后了。
五、UIWebView什么時(shí)候創(chuàng)建JSContext環(huán)境
兩個(gè)時(shí)機(jī)：
1.渲染網(wǎng)頁(yè)時(shí)遇到<script>標(biāo)簽，UIWebView會(huì)創(chuàng)建JSContext環(huán)境；
2.執(zhí)行方法[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]，UIWebView會(huì)創(chuàng)建JSContext環(huán)境，而且和遇到<script>標(biāo)簽時(shí)創(chuàng)建的環(huán)境是同一個(gè)；
六、UIWebView什么時(shí)候注入JavaScript函數(shù)對(duì)象
在代理方法webViewDidFinishLoad中注入JavaScript函數(shù)對(duì)象顯然不合適。
較為優(yōu)雅的方式是實(shí)現(xiàn)一個(gè)NSObject的擴(kuò)展，并實(shí)現(xiàn)webView:didCreateJavaScriptContext:forFrame:方法。在這個(gè)方法內(nèi)注入JavaScript對(duì)象。
Demo中為了防止相互引用，使用了一個(gè)類WebViewDelegateManager來(lái)防止內(nèi)存泄露。
實(shí)現(xiàn)的Demo已經(jīng)上傳到我的GitHub倉(cāng)庫(kù)。
