iOs遷至WKWebView會遇到什么問題

這篇文章給大家分享的是有關iOs遷至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);
}

感謝各位的閱讀！關于“iOs遷至WKWebView會遇到什么問題”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！