原文鏈接：
iOS中UIWebView與WKWebView、JavaScript與OC交互、Cookie管理看我就夠（上）
iOS中UIWebView與WKWebView、JavaScript與OC交互、Cookie管理看我就夠（中）
iOS中UIWebView與WKWebView、JavaScript與OC交互、Cookie管理看我就夠（下）
一、前言
在前面的文章中，我們介紹了UIWebView、WKWebView一些使用，與JS的交互和一些坑，相信看過的小伙伴們，已經大概清楚了吧，如果有問題，歡迎提問。
本文是本系列文章的最后一篇，主要為小伙伴們分享下Safari調試、與前端的配合以及實際應用中一些需求的實現等：
- iOS中UIWebView與WKWebView、JavaScript與OC交互、Cookie管理看我就夠（上）
- iOS中UIWebView與WKWebView、JavaScript與OC交互、Cookie管理看我就夠（中）
- iOS中UIWebView與WKWebView、JavaScript與OC交互、Cookie管理看我就夠（下）
關于文中提到的一些內容，這里我準備了個Demo，有需要的小伙伴可以下載。
二、Safari調試
在前面的文章中，查看網頁的Cookie，其實已經用到了Safari調試。筆者覺得Safari調試功能真的很有用，通過它可以輕松定位問題的所在。也因此，公司中App一旦有問題出現，不管是客戶端的問題，還是前端的問題，找問題的重任都落到了筆者的身上呢。這一度是一個困擾??。想象一下，h5頁面的一個bug，App端幫忙快速定位，并且告知h5相關開發人員該如何修復，是多么偉大的一件事情。
下面來簡單講講怎么用Safari調試。
1. 開啟Safari開發菜單
在Mac的Safari偏好設置中，開啟開發菜單。具體步驟為：Safari -> 偏好設置… -> 高級 -> 勾選在菜單欄顯示“開發”菜單。
2. iPhone開啟Web檢查器
具體步驟為：設置 -> Safari -> 高級 -> Web 檢查器。
3. 運行App
打開項目，Cmd + R 運行，打開想調試的Web頁面。
4. 調試對應的頁面
打開Safari -> 開發 -> 設備 -> URL。
選中的頁面會變成藍色，點擊然后打開了如下的界面：
這個頁面就很像Windows 平臺Chrome的F12?？梢源驍帱c：
查看斷點：
查看Cookie：
打印Cookie或者元素：
比如我在這里Alert頁面的title，輸入 alert(document.title);，你會在模擬器中看到彈窗：
整體十分有用，操作的體驗跟Xcode很像，小伙伴們自行探索。
三、與前端配合解決bug
前端有一些問題，在瀏覽器中是無法調試的，很可能只在App內的瀏覽器中才會復現。這個時候你可以期待前端開發人員會使用Xcode和Safari調試來解決bug，或者靠自己。畢竟大家的目標一致，給用戶提供一個更好的App，解決所有已知問題。
這里我舉個例子，運用Safari調試來解決一個前端的bug。
比如新做的h5頁面中，有一個分享按鈕，點擊調用原生的分享，但是發現，點擊之后沒有反應了，什么問題呢？是Native端實現有問題，還是前端寫的有問題呢？如圖
我們來幫忙看下吧，打開Safari Web 檢查器，定位到資源，并且在share方法中添加斷點，如圖
會發現，并沒有斷住，而是頁面直接報錯了，仔細查看錯誤描述，share方法里多了一個“/”，因此報錯了。當我點擊分享按鈕時
會發現，提示找不到變量share。這里我需要說明一下：
當js中報錯的時候，報錯位置所在的函數以及報錯位置之后的代碼，都不會執行，所以我點擊分享時，提示的是找不到方法，因為js的語法不對，報錯了，這里解析不出來，所以也就沒有了
share、testAddMethod和之后的函數。那么當我點擊分享下面的按鈕是，調用share下面定義的方法也就會提示找不到對應的函數了。
至此，問題找到了，只要告之前端開發人員即可，讓他修復即可。
實際遇到的問題可能要復雜的多，可以通過斷點，以及控制臺打印一些js變量的值，DOM操作來尋找問題，解決問題。希望可以幫助到小伙伴們。
四、實際應用中一些需求的實現
1. 自定義瀏覽器UserAgent
這個其實在App開發中，比較重要。比如常見的微信、支付寶App等，都有自己的UserAgent，而UA最常用來判斷在哪個App內，一般App的下載頁中只有一個按鈕”點擊下載”，當用戶點擊該按鈕時，在微信中則跳轉到應用寶，否則跳轉到AppStore。那么如何區分在哪個App中呢？就是js判斷UA。
//js中判斷
if (navigator.userAgent.indexOf("MicroMessenger") !== -1) {
//在微信中
}
關于自定義UA，這個UIWebView不提供Api，而WKWebView提供Api，前文中也說明過，就是調用customUserAgent屬性。
self.webView.customUserAgent = @"WebViewDemo/1.0.0"; //自定義UA，只支持WKWebView
而有沒有其他的方法實現自定義瀏覽器UserAgent呢？有。
//最好在AppDelegate中就提前設置
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
//設置自定義UserAgent
[self setCustomUserAgent];
return YES;
}
- (void)setCustomUserAgent
{
//get the original user-agent of webview
UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectZero];
NSString *oldAgent = [webView stringByEvaluatingJavaScriptFromString:@"navigator.userAgent"];
//add my info to the new agent
NSString *newAgent = [oldAgent stringByAppendingFormat:@" %@", @"WebViewDemo/1.0.0"];
//regist the new agent
NSDictionary *dictionnary = [[NSDictionary alloc] initWithObjectsAndKeys:newAgent, @"UserAgent", newAgent, @"User-Agent", nil];
[[NSUserDefaults standardUserDefaults] registerDefaults:dictionnary];
}
@end
上面的代碼，展示了在原有UserAgent的基礎上，添加一些自定義的內容。
可以看到原本的UA后面已經有我們添加的內容了WebViewDemo/1.0.0。
這里需要說明的是：
- 通過
NSUserDefaults設置自定義UserAgent，可以同時作用于UIWebView和WKWebView。WKWebView的customUserAgent屬性，優先級高于NSUserDefaults，當同時設置時，顯示customUserAgent的值。如上圖。
2. Native與H5共享登錄狀態
這個需求在前面的文章中針對WKWebView和UIWebView分別單獨做過介紹。維持登錄狀態，依賴的是相同的Cookie。
UIWebView實現起來基本不需要做額外的操作，只要保證sharedHTTPCookieStorage中的Cookie是沒問題的。
WKWebView實現起來相對麻煩，有很多坑，這里不再詳細描述，小伙伴們可以看下上篇文章中Cookie管理一節。
3. Native預覽H5頁面中的image
這個需求，應該是一個比較常見的需求。在微信中瀏覽網頁時，看到喜歡的圖片，你會點擊圖片查看大圖，然后長按圖片保存。
1. 分析
如果你的項目中有這樣的需求的話，可能你需要做如下的分析。
- 如果想在Native預覽H5中的image，最需要的是什么？是圖片的鏈接。如果能有縮略圖更好了。
- 只要獲取了鏈接，就可以跳轉到一個
ViewController中，預覽圖片，后續長按保存自然水到渠成。- 那應該如何獲取圖片的鏈接呢？通過JS -> OC 傳遞圖片url。
這里，究竟如何實現獲取圖片鏈接，取決于你用的是UIWebView還是WKWebView。
2. 方案
當頁面加載完成后，給html頁面中所有無默認點擊事件的
<img>添加點擊事件，當用戶點擊時，拿到所有參數。（其實這不是最好的方案，最好的解決方案是，跟前端約定一下，哪些圖片需要預覽，哪些img標簽的id統一，或者有個特定的屬性，這樣客戶端可以根據id找到這些img標簽）
首先，Html中有個img標簽
<img src="http://cc.cocimg.com/api/uploads/170425/b2d6e7ea5b3172e6c39120b7bfd662fb.jpg">
我先寫好一個ImgAddClickEvent.js文件，來實現給所有無默認點擊事件的<img>添加點擊事件。
//獲取所有img標簽
var imgs = document.getElementsByTagName("img");
//獲取所有的imgUrl
var imgUrls = new Array();
var x = 0;
var y = 0;
var width = 0;
var height = 0;
for (var i = 0; i < imgs.length; i++) {
var img = imgs[i];
//如果圖片鏈接存在
if (img.src || img.getAttribute('data-src')) {
//添加到圖片鏈接數組中
imgUrls.push(img.src || img.getAttribute('data-src'));
//如果圖片沒有默認的onclick事件，且父元素不是a標簽，則添加onclick事件，當用戶點擊時，把圖片鏈接回傳給Native
if (!img.onclick && img.parentElement.tagName !== "A") {
//給圖片添加下標的屬性
img.index = i; //記錄下標
//添加點擊事件，并且回傳選中的圖片鏈接、下標、屏幕上的位置、全部的圖片數組等
img.onclick = function() {
x = this.getBoundingClientRect().left;
y = this.getBoundingClientRect().top;
x = x + document.documentElement.scrollLeft;
y = y + document.documentElement.scrollTop;
width = this.width;
height = this.height;
var imgInfo = {
imgUrl: this.src || this.getAttribute('data-src'),
x: x,
y: y,
width: width,
height: height,
index: this.index,
imgUrls: imgUrls
};
//UIWebView使用
h5ImageDidClick(imgInfo);
}
}
}
}
function h5ImageDidClick(info) {
//WKWebView使用
window.webkit.messageHandlers.imageDidClick.postMessage(info);
}
下面分別介紹UIWebView和WKWebView如何實現。
3. UIWebView實現
UIWebView直接使用JavaScriptCore給<img>添加onclick方法為OC的實現即可。
- (void)webViewDidFinishLoad:(UIWebView *)webView {
[self convertJSFunctionsToOCMethods];
}
- (void)convertJSFunctionsToOCMethods {
//獲取該UIWebview的javascript上下文
//self持有jsContext
//@property (nonatomic, strong) JSContext *jsContext;
self.jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//先注入給圖片添加點擊事件的js
//防止頻繁IO操作，造成性能影響
static NSString *jsSource;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
jsSource = [NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"ImgAddClickEvent" ofType:@"js"] encoding:NSUTF8StringEncoding error:nil];
});
[self.jsContext evaluateScript:jsSource];
//替換回調方法
self.jsContext[@"h5ImageDidClick"] = ^(NSDictionary *imgInfo) {
NSLog(@"UIWebView點擊了html上的圖片，信息是：%@", imgInfo);
};
}
4. WKWebView實現
而WKWebView實現，需要使用WKUserScript和scriptMessageHandler，下面簡單介紹下，詳細實現，見Demo。
WKWebView的UIViewController中實現如下
/**
頁面中的所有img標簽添加點擊事件
*/
- (void)imgAddClickEvent {
//防止頻繁IO操作，造成性能影響
static NSString *jsSource;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
jsSource = [NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"ImgAddClickEvent" ofType:@"js"] encoding:NSUTF8StringEncoding error:nil];
});
//添加自定義的腳本
WKUserScript *js = [[WKUserScript alloc] initWithSource:jsSource injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:NO];
[self.webView.configuration.userContentController addUserScript:js];
//注冊回調
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"imageDidClick"];
}
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
if ([message.name isEqualToString:@"imageDidClick"]) {
//點擊了html上的圖片
NSLog(@"點擊了html上的圖片，參數為%@", message.body);
}
}
當我點擊這個標簽時，因為我添加了onclick事件，在OC端我會接收到回調。因此打印出log
5. 注意
上面無論是
UIWebView還是WKWebView，參數中的x，y是不包含自定義scrollView的contentInset的，如果要獲取圖片在手機屏幕上的位置：x = x + self.webView.scrollView.contentInset.left; y = y + self.webView.scrollView.contentInset.top;
拿到了這些信息，想必，你可以實現一個十分完美的圖片預覽效果了。
4. Native加載并緩存H5頁面中的img
因為頁面中的img標簽加載圖片的網絡請求是由WebView管理的，所以要想Native接管圖片的下載，只有2條路：
- 在頁面加載前，把頁面中img標簽的src換成一張native的占位圖或者””，并且把img.src傳遞到native，在native下載圖片或者讀取緩存完畢后，再把相應的img標簽的src設置成本地的，如img.src =”native cache url”。整體交互是JS->Native, Native -> JS。
NSURLProtocol攔截WebView的所有圖片請求，交由我們自己管理。
比較有可行性的是方法2。但也只限于UIWebView。WKWebView上篇文中說過，雖然有私有Api，但是筆者不推薦使用。
先說下，為何方法1不可行。首先，頁面加載前，是在什么時候呢？如果h5不做修改，全部交由Native端處理，是沒有辦法修改html的，因為UIWebView和WKWebView都沒有提供一個Api，在圖片加載之前告訴你html是什么內容，所以這個方法是走不通的。除非你用loadHTMLString的方法加載，加載前先替換img的src。但是loadHTMLString的方法，又加載不到Web端的js和css，只能用于本地拼接完整HTML String的情況，不適用于一般的場景。So，這條路是走不通的，局限性太大了。
方法2的核心思路就是攔截請求，最核心的是在你的NSURLProtocol子類中，實現這個方法
+ (BOOL)canInitWithRequest:(NSURLRequest *)request {
//處理過不再處理
if ([NSURLProtocol propertyForKey:DAURLProtocolHandledKey inRequest:request]) {
return NO;
}
//根據request header中的 accept 來判斷是否加載圖片
/*
{
"Accept" = "image/png,image/svg+xml,image/*;q=0.8,*\/*;q=0.5\";
"User-Agent" = "Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Mobile/14E269 WebViewDemo/1.0.0";
}
*/
NSDictionary *headers = request.allHTTPHeaderFields;
NSString *accept = headers[@"Accept"];
if (accept.length >= @"image".length && [accept rangeOfString:@"image"].location != NSNotFound) {
return YES;
}
return NO;
}
當攔截到圖片請求時，再做后續的處理，下面寫一些偽代碼
+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request {
return request;
}
+ (BOOL)requestIsCacheEquivalent:(NSURLRequest *)a toRequest:(NSURLRequest *)b {
return [super requestIsCacheEquivalent:a toRequest:b];
}
- (void)startLoading {
NSMutableURLRequest *mutableReqeust = [[self request] mutableCopy];
//這里也可以添加一些自定義的header，看具體需求
//標記該request已經處理過
[NSURLProtocol setProperty:@(YES) forKey:DAURLProtocolHandledKey inRequest:mutableReqeust];
//這里NSURLProtocolClient的相關方法都要調用
//比如 [self.client URLProtocol:self didLoadData:data];
.....
}
- (void)stopLoading {
.....
}
這部分代碼，Demo中并沒有完全實現，如果小伙伴們有興趣研究下具體的實現，可以參考這篇文章， 筆者這里就不多說了。
5. Native分享H5頁面到微信、QQ等
這個需求，其實我在前面的文章中針對UIWebView和WKWebView都已經做了很詳細的介紹。這里，簡單分享下如何獲取分享的內容。
一般分享到微信或者QQ至少需要的參數是
- Title（主標題）
- Description（副標題或者描述）
- ThumbnailImage（縮略圖）
- WebpageUrl（h5頁面的鏈接）
這些參數，都怎么獲取呢？通過OC->JS的方式，獲取。當然你也可以自定義。
var title = document.title;
var desc = document.getElementsByTagName("article")[0].textContent; //或者 document.body.innerText; 或者 document.getElementById("yourId").innerText;
var thumbnailImageUrl = document.getElementsByTagName("img")[0].src; //或者看需求取哪個
var webpageUrl = location.href;
具體如何用OC調用JS獲取這些值，這里就不多說了，看過前面文章的小伙伴，可以自行實現。
6. Native為H5提供一套Native Api（微信、支付寶小程序）
很多時候，Native與H5交互得深了，必定會有一些更深層次的需求。比如h5想控制頁面的pop、push、present，想調用Native的Share，想調用Native的掃描二維碼功能，獲取掃描結果……
那么近半年比較??的小程序，微信提供的一些Api（掃碼、選擇照片等）都是如何實現的呢？很明顯，native提供的。
筆者作為支付寶小程序（尚未發布）的內測用戶之一，也接觸了支付寶小程序，其中也有很多Api是native提供的。
其實這就涉及到一個完整的Native與JS交互的流程，從JS->Native到Native->JS。也就是前面介紹過的，異步回調結果。這個不局限于iOS，Android也是同樣的。
首先，我們為H5提供一套Api，那自然Api是暴露給js的，所以這些Api也是js的。筆者封裝了一個接口文件：NativeApi.js（在最新的Demo中有）。下面針對一些需求，分析下封裝和實現。其中用到了js閉包，需要一點js知識。
1. 分享
前面的文章中，筆者最常舉的一個例子就是分享，Native為H5提供原生的分享方法，h5調用后可以獲取分享結果（成功or失敗）。這里針對分享這個如何實現，就不贅述了。筆者直接貼上適用于WKWebView的js代碼。
/**
* Native為H5提供的Api接口
*
* @type {js對象}
*/
var DANativeApi = (function() {
var NativeApi = {
/**
* 分享
* @param {js對象} shareInfo 分享信息和回調
* @return {void} 無同步返回值，異步返回分享結果 true or false
*/
share: function(shareInfo) {
if (shareInfo == undefined || shareInfo == null || typeof(shareInfo) !== "object") {
alert("參數" + JSON.stringify(shareInfo) + "不合法");
} else {
alert("分享的參數為" + JSON.stringify(shareInfo));
}
//調用native端
_nativeShare(shareInfo);
}
}
//下面是一些私有函數
/**
* Native端實現，適用于WKWebView，UIWebView如何實現，小伙伴自己動腦筋吧~
* @param {js對象} shareInfo 分享的信息和回調
* @return {void} 無同步返回值，異步返回
*/
function _nativeShare(shareInfo) {
//用于WKWebView，因為WKWebView并沒有辦法把js function傳遞過去，因此需要特殊處理一下
//把js function轉換為字符串，oc端調用時 (<js function string>)(true); 即可
//如果有回調函數，且為function
var callbackFunction = shareInfo.result;
if (callbackFunction != undefined && callbackFunction != null && typeof(callbackFunction) === "function") {
shareInfo.result = callbackFunction.toString();
}
//js -> oc
// 至于Android端，也可以，比如 window.jsInterface.nativeShare(JSON.stringify(shareInfo));
window.webkit.messageHandlers.nativeShare.postMessage(shareInfo);
}
//閉包，把Api對象返回
return NativeApi;
})();
/*
//調用時，分享
DANativeApi.share({
title: document.title,
desc: "",
url: location.href,
imgUrl: "",
result: function(res) {
// body...
alert("分享結果為：" + JSON.stringify(res));
}
});
*/
Native端不貼了，小伙伴們看Demo吧。
2. 從通訊錄選擇聯系人
這里筆者再舉個從通訊錄選擇聯系人的例子，從js到native，再從native到js。
首先js端，添加如下實現
/**
* Native為H5提供的Api接口
*
* @type {js對象}
*/
var DANativeApi = (function() {
var NativeApi = {
/**
* 從通訊錄選擇聯系人
* @return {void} 無同步返回值，異步返回選擇的結果
*/
choosePhoneContact: function(param) {
//具體是否需要判斷
//調用native端
_nativeChoosePhoneContact(param);
}
}
//下面是一些私有函數
/**
* Native端實現選擇聯系人，并異步返回結果
* @param {[type]} param [description]
* @return {[type]} [description]
*/
function _nativeChoosePhoneContact(param) {
var callbackFunction = param.completion;
if (callbackFunction != undefined && callbackFunction != null && typeof(callbackFunction) === "function") {
param.completion = callbackFunction.toString();
}
//js -> oc
window.webkit.messageHandlers.nativeChoosePhoneContact.postMessage(param);
}
//閉包，把Api對象返回
return NativeApi;
})();
/*
//選擇聯系人
DANativeApi.choosePhoneContact({
completion: function(res) {
alert("選擇聯系人的結果為：" + JSON.stringify(res));
}
});
*/
OC端依然加載此文件，并注冊handler
/**
添加native端的api
*/
- (void)addNativeApiToJS
{
//防止頻繁IO操作，造成性能影響
static NSString *nativejsSource;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
nativejsSource = [NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"NativeApi" ofType:@"js"] encoding:NSUTF8StringEncoding error:nil];
});
//添加自定義的腳本
WKUserScript *js = [[WKUserScript alloc] initWithSource:nativejsSource injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO];
[self.webView.configuration.userContentController addUserScript:js];
//注冊回調
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"nativeChoosePhoneContact"];
}
#pragma mark - WKScriptMessageHandler js -> oc
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
//選擇聯系人
if ([message.name isEqualToString:@"nativeChoosePhoneContact"]) {
NSLog(@"正在選擇聯系人");
[self selectContactCompletion:^(NSString *name, NSString *phone) {
NSLog(@"選擇完成");
//讀取js function的字符串
NSString *jsFunctionString = message.body[@"completion"];
//拼接調用該方法的js字符串
NSString *callbackJs = [NSString stringWithFormat:@"(%@)({name: '%@', mobile: '%@'});", jsFunctionString, name, phone];
//執行回調
[self.webView evaluateJavaScript:callbackJs completionHandler:^(id _Nullable result, NSError * _Nullable error) {
}];
}];
}
}
具體回調方式，在之前的WKWebView中，講過了，這里不再贅述，選擇聯系人用的是Contacts框架，具體的小伙伴可以看Demo。
整體效果如下：
3. 掃描二維碼
相信看過從通訊錄選擇聯系人的實現，小伙伴們可以自行實現掃描二維碼了吧~ 快動手嘗試一下吧~
五、總結
本文給小伙伴們介紹了下Safari調試，以及其具體運用，并且分享了實際應用中一些需求的實現方式。
結合前面的兩篇文章， 相信現在小伙伴們一定對WebView有相當深刻的理解了吧。那么，本系列文章也告一段落了，具體有問題的話，歡迎提問。
