遷至WKWebView跨過的那些坑

前言

在iOS中有兩種網頁視圖能夠加載網頁除了系統的那個控制器。一種是UIWebView，另外一種是WKWebView，其實WKWebView就是想替代UIWebView的，由於咱們都知道UIWebView很是佔內存等一些問題，可是如今不少人還在使用UIWebView這是爲啥呢？並且官方也宣佈在iOS12中廢棄了UIWebView讓咱們儘快使用WKWebView。其實也就是這些東西：**頁面尺寸問題、JS交互、請求攔截、cookie帶不上的問題。**因此有時想要遷移還得解決這些問題，因此仍是很煩的，因此一一解決嘍。

頁面尺寸的問題

咱們知道有些網頁在UIWebView上顯示好好地，使用WKWebView就會出現尺寸的問題，這時很納悶，安卓也不會，你總不說是前端的問題吧？但實際上是WKWebView中網頁是須要適配一下，因此本身添加JS吧，固然和前端關係好就能夠叫他加的。下面經過設置配置中的userContentController來添加JS。

WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
WKUserContentController *wkUController = [[WKUserContentController alloc] init];
[wkUController addUserScript:wkUScript];
configuration.userContentController = wkUController;
複製代碼

JS交互

咱們都知道在UIWebView中可使用自家的JavaScriptCore來進行交互很是的方便。在JavaScriptCore中有三者比較經常使用那就是JSContext(上下文)、JSValue（類型轉換）、JSExport(js調OC模型方法)。

在UIWebView中的便利交互方法

//JSContext就爲其提供着運行環境 H5上下文
- (void)webViewDidFinishLoad:(UIWebView *)webView{
    JSContext *jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    self.jsContext = jsContext;
}
複製代碼

// 執行腳本增長js全局變量
[self.jsContext evaluateScript:@"var arr = [3, '3', 'abc'];"];
複製代碼

// ⚠️添加JS方法，須要注意的是添加的方法會覆蓋原有的JS方法，由於咱們是在網頁加載成功後獲取上下文來操做的。
// 無參數的
self.jsContext[@"alertMessage"] = ^() {
   NSLog(@"JS端調用alertMessage時就會跑到這裏來！");
};
// 帶參數的，值必須進行轉換
 self.jsContext[@"showDict"] = ^(JSValue *value) {
    NSArray *args = [JSContext currentArguments];
    JSValue *dictValue = args[0];
    NSDictionary *dict = dictValue.toDictionary;
    NSLog(@"%@",dict);
 };
複製代碼

// 獲取JS中的arr數據
JSValue *arrValue = self.jsContext[@"arr"];
複製代碼

// 異常捕獲
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exception) {
    weakSelf.jsContext.exception = exception;
    NSLog(@"exception == %@",exception);
};
複製代碼

// 給JS中的對象從新賦值
OMJSObject *omObject = [[OMJSObject alloc] init];
self.jsContext[@"omObject"] = omObject;
NSLog(@"omObject == %d",[omObject getSum:20 num2:40]);

// 咱們都知道object必需要遵照JSExport協議時，js能夠直接調用object中的方法，而且須要把函數名取個別名。在JS端能夠調用getS，OC能夠繼續使用這個getSum這個方法
@protocol OMProtocol <JSExport>
// 協議 - 協議方法 
JSExportAs(getS, -(int)getSum:(int)num1 num2:(int)num2);
@end
複製代碼

在WKWebView中如何作呢？

不能像上面那樣，系統提供的是經過如下兩種方法，因此是比較難受，並且還得前端使用messageHandler來調用，即安卓和iOS分開處理。

// 直接調用js
NSString *jsStr = @"var arr = [3, '3', 'abc']; ";
[self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
   NSLog(@"%@----%@",result, error);
}];
複製代碼

// 下面是註冊名稱後，js使用messageHandlers調用了指定名稱就會進入到代理中

// OC咱們添加了js名稱後
- (void)viewDidLoad{
  //...
  [wkUController addScriptMessageHandler:self name:@"showtime"];
  configuration.userContentController = wkUController;
}

// JS中messageHandlers調用咱們在OC中的名稱一致時就會進入後面的到OC的代理
window.webkit.messageHandlers.showtime.postMessage('');

// 代理，判斷邏輯
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    if ([message.name isEqualToString:@"showtime"]) {
        NSLog(@"來了！");
    }
    NSLog(@"message == %@ --- %@",message.name,message.body); 
}

// 最後在dealloc必須移除
[self.userContentController removeScriptMessageHandlerForName:@"showtime"];
複製代碼

//若是是彈窗的必須本身實現代理方法
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler
{
   UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提醒" message:message preferredStyle:UIAlertControllerStyleAlert];
   [alert addAction:[UIAlertAction actionWithTitle:@"知道了" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
        completionHandler();
    }]];
    
   [self presentViewController:alert animated:YES completion:nil];
}
複製代碼

一直用一直爽的交互

咱們上面寫了二者的一些交互，雖然能夠用呢，可是沒有帶一種很簡單很輕鬆的境界，因此有一個開源庫：WebViewJavaScriptBridge。這個開源庫能夠同時兼容二者，並且交互很簡單，可是你必須得前端一塊兒，不然就哦豁了。

// 使用
self.wjb = [WebViewJavascriptBridge bridgeForWebView:self.webView];
// 若是你要在VC中實現 UIWebView的代理方法 就實現下面的代碼(不然省略)
[self.wjb setWebViewDelegate:self];

// 註冊js方法名稱
[self.wjb registerHandler:@"jsCallsOC" handler:^(id data, WVJBResponseCallback responseCallback) {
   NSLog(@"currentThread == %@",[NSThread currentThread]);
   NSLog(@"data == %@ -- %@",data,responseCallback);
}];

// 調用JS
dispatch_async(dispatch_get_global_queue(0, 0), ^{
        [self.wjb callHandler:@"OCCallJSFunction" data:@"OC調用JS" responseCallback:^(id responseData) {
           NSLog(@"currentThread == %@",[NSThread currentThread]);
           NSLog(@"調用完JS後的回調：%@",responseData);
        }];
});
複製代碼

前端使用實例以下，具體使用方法能夠查看WebViewJavaScriptBridge。

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 = 'https://__bridge_loaded__';
	document.documentElement.appendChild(WVJBIframe);
	setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

setupWebViewJavascriptBridge(function(bridge) {
	
	/* Initialize your app here */

	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)
	})
})
複製代碼

請求攔截

咱們UIWebView在早期是使用- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType來根據scheme、host、pathComponents進行攔截作自定義邏輯處理。可是這種方法不是很靈活，因而就使用NSURLProtocol來進行攔截，例如微信攔截淘寶同樣，直接顯示一個提示。又或者是攔截請求調用本地的接口，打開相機、錄音、相冊等功能。還能直接攔截後改變原有的request，直接返回數據或者其餘的url，在一些去除廣告時能夠的用得上。

咱們使用的時候必需要使用NSURLProtocol的子類來進行一些操做。並在使用前須要註冊自定義的Class。攔截後記得進行標記一下，防止自循環多執行。惋惜的是在WKWebView中不能進行攔截後處理的操做，只能監聽卻改變不了。源於WKWebView採用的是webkit加載，和系統的瀏覽器同樣的機制。

// 子類
@interface OMURLProtocol : NSURLProtocol<NSURLSessionDataDelegate>
@property (nonatomic, strong) NSURLSession *session;
@end

// 註冊
[NSURLProtocol registerClass:[OMURLProtocol class]];
複製代碼

// 1. 首先會在這裏來進行攔截，返回YES則表示須要通過咱們自定義處理，NO則走系統處理
+ (BOOL)canInitWithRequest:(NSURLRequest *)request;

// 2.攔截處理將會進入下一個環節, 返回一個標準化的request，能夠在這裏進行重定向
+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request;

// 3.是否成功攔截都會走這個方法, 能夠在這裏進行一些自定義處理
- (void)startLoading;

// 4. 任何網絡請求都會走上面的攔截處理，即便咱們重定向後還會再走一次或屢次流程，須要標記來處理
// 根據request獲取標記值來決定是否須要攔截，在canInitWithRequest內處理
+ (nullable id)propertyForKey:(NSString *)key inRequest:(NSURLRequest *)request;
// 標記
+ (void)setProperty:(id)value forKey:(NSString *)key inRequest:(NSMutableURLRequest *)request;
// 移除標記
+ (void)removePropertyForKey:(NSString *)key inRequest:(NSMutableURLRequest *)request;
複製代碼

請求頭或數據混亂問題

還須要注意的一點是，若是實現線了攔截處理的話，咱們在使用AFN和URLSession進行訪問的時候攔截會發現數據或請求頭可能和你攔截處理後的數據或請求不符合預期，這是由於咱們在攔截的時候只是先請求了A後請求了B，這是不符合預期的，雖然URLConnection不會可是已被廢棄不值得提倡使用。咱們經過在攔截的時候經過LLDB打印session中配置的協議時，發現是這樣的沒有包含咱們自定義的協議，咱們經過Runtime交換方法交換protocolClasses方法，咱們實現咱們本身的protocolClasses方法。可是爲了保證系統原有的屬性，咱們應該在系統原有的協議表上加上咱們的協議類。在當前咱們雖然能夠經過[NSURLSession sharedSession].configuration.protocolClasses;獲取系統默認的協議類，可是若是咱們在當前自定義的類裏protocolClasses寫的話會形成死循環，由於咱們交換了該屬性的getter方法。咱們使用保存類名而後存儲至NSUserDefaults，取值時在還原class。

po session.configuration.protocolClasses
<__NSArrayI 0x600001442d00>(
_NSURLHTTPProtocol,
_NSURLDataProtocol,
_NSURLFTPProtocol,
_NSURLFileProtocol,
NSAboutURLProtocol
)
複製代碼

// 自定義返回咱們的協議類
- (NSArray *)protocolClasses {
    NSArray *originalProtocols = [OMURLProtocol readOriginalProtocols];
    NSMutableArray *newProtocols = [NSMutableArray arrayWithArray:originalProtocols];
    [newProtocols addObject:[OMURLProtocol class]];
    return newProtocols;
}

// 咱們再次打印時發現已經加上咱們自定義的協議類了
po session.configuration.protocolClasses
<__NSArrayM 0x60000041a4f0>(
_NSURLHTTPProtocol,
_NSURLDataProtocol,
_NSURLFTPProtocol,
_NSURLFileProtocol,
NSAboutURLProtocol,
OMURLProtocol
)
複製代碼

// 存儲系統原有的協議類
+ (void)saveOriginalProtocols: (NSArray<Class> *)protocols{
    NSMutableArray *protocolNameArray = [NSMutableArray array];
    for (Class protocol in protocols){
        [protocolNameArray addObject:NSStringFromClass(protocol)];
    }
    NSLog(@"協議數組爲： %@", protocolNameArray);
    [[NSUserDefaults standardUserDefaults] setObject:protocolNameArray forKey:originalProtocolsKey];
    [[NSUserDefaults standardUserDefaults] synchronize];
}

// 獲取系統原有的協議類
+ (NSArray<Class> *)readOriginalProtocols{
    NSArray *classNames = [[NSUserDefaults standardUserDefaults] valueForKey:originalProtocolsKey];
    NSMutableArray *origianlProtocols = [NSMutableArray array];
    for (NSString *name in classNames){
        Class class = NSClassFromString(name);
        [origianlProtocols addObject: class];
    }
    return origianlProtocols;
}
複製代碼

+ (void)hookNSURLSessionConfiguration{
    NSArray *originalProtocols = [NSURLSession sharedSession].configuration.protocolClasses;
    [self saveOriginalProtocols:originalProtocols];
    Class cls = NSClassFromString(@"__NSCFURLSessionConfiguration") ?: NSClassFromString(@"NSURLSessionConfiguration");
    Method originalMethod = class_getInstanceMethod(cls, @selector(protocolClasses));
    Method stubMethod = class_getInstanceMethod([self class], @selector(protocolClasses));
    if (!originalMethod || !stubMethod) {
        [NSException raise:NSInternalInconsistencyException format:@"沒有這個方法 沒法交換"];
    }
    method_exchangeImplementations(originalMethod, stubMethod);
}
複製代碼

Cookie的攜帶問題

不少應用場景中須要使用session來進行處理，在UIWebView中很容易作到攜帶這些Cookie，可是因爲WKWebView的機制不同，跨域會出現丟失cookie的狀況是很糟糕的。目前有兩種用法：腳本和手動添加cookie。腳本不太靠譜，建議使用手動添加更爲保險。

// 使用腳原本添加cookie

// 獲取去cookie數據
- (NSString *)cookieString
{
    NSMutableString *script = [NSMutableString string];
    [script appendString:@"var cookieNames = document.cookie.split('; ').map(function(cookie) { return cookie.split('=')[0] } );\n"];
    for (NSHTTPCookie *cookie in [[NSHTTPCookieStorage sharedHTTPCookieStorage] cookies]) {

        if ([cookie.value rangeOfString:@"'"].location != NSNotFound) {
            continue;
        }
        [script appendFormat:@"if (cookieNames.indexOf('%@') == -1) { document.cookie='%@'; };\n", cookie.name, cookie.kc_formatCookieString];
    }
    return script;
}

// 添加cookie
WKUserScript * cookieScript = [[WKUserScript alloc] initWithSource:[self cookieString] injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:NO];
[[[WKUserContentController alloc] init] addUserScript: cookieScript];
複製代碼

// 添加一個分類來修復cookie丟失的問題
@interface NSURLRequest (Cookie)

- (NSURLRequest *)fixCookie;

@end

@implementation NSURLRequest (Cookie)

- (NSURLRequest *)fixCookie{
    NSMutableURLRequest *fixedRequest;
    if ([self isKindOfClass:[NSMutableURLRequest class]]) {
        fixedRequest = (NSMutableURLRequest *)self;
    } else {
        fixedRequest = self.mutableCopy;
    }
    //防止Cookie丟失
    NSDictionary *dict = [NSHTTPCookie requestHeaderFieldsWithCookies:[NSHTTPCookieStorage sharedHTTPCookieStorage].cookies];
    if (dict.count) {
        NSMutableDictionary *mDict = self.allHTTPHeaderFields.mutableCopy;
        [mDict setValuesForKeysWithDictionary:dict];
        fixedRequest.allHTTPHeaderFields = mDict;
    }
    return fixedRequest;
}

@end
  
  
  // 使用場景
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    [navigationAction.request fixCookie];
    decisionHandler(WKNavigationActionPolicyAllow);
}
複製代碼