iOs遷至WKWebView跨過的一些坑

更新時間：2019年09月07日 11:41:47 作者：幸福的小木子

這篇文章主要給大家介紹了關(guān)于iOs遷至WKWebView跨過的一些坑，文中通過示例代碼介紹的非常詳細(xì)，對各位iOS開發(fā)者們具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

前言

在iOS中有兩種網(wǎng)頁視圖可以加載網(wǎng)頁除了系統(tǒng)的那個控制器。一種是UIWebView，另一種是WKWebView，其實(shí)WKWebView就是想替代UIWebView的，因?yàn)槲覀兌贾繳IWebView非常占內(nèi)存等一些問題，但是現(xiàn)在很多人還在使用UIWebView這是為啥呢？而且官方也宣布在iOS12中廢棄了UIWebView讓我們盡快使用WKWebView。其實(shí)也就是這些東西：**頁面尺寸問題、JS交互、請求攔截、cookie帶不上的問題。**所以有時想要遷移還得解決這些問題，所以還是很煩的，所以一一解決嘍。

頁面尺寸的問題

我們知道有些網(wǎng)頁在UIWebView上顯示好好地，使用WKWebView就會出現(xiàn)尺寸的問題，這時很納悶，安卓也不會，你總不說是前端的問題吧？但其實(shí)是WKWebView中網(wǎng)頁是需要適配一下，所以自己添加JS吧，當(dāng)然和前端關(guān)系好就可以叫他加的。下面通過設(shè)置配置中的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來進(jìn)行交互非常的方便。在JavaScriptCore中有三者比較常用那就是JSContext(上下文)、JSValue（類型轉(zhuǎn)換）、JSExport(js調(diào)OC模型方法)。

在UIWebView中的便利交互方法

//JSContext就為其提供著運(yùn)行環(huán)境 H5上下文
- (void)webViewDidFinishLoad:(UIWebView *)webView{
 JSContext *jsContext = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
 self.jsContext = jsContext;
}

// 執(zhí)行腳本增加js全局變量
[self.jsContext evaluateScript:@"var arr = [3, '3', 'abc'];"];

// ⚠️添加JS方法，需要注意的是添加的方法會覆蓋原有的JS方法，因?yàn)槲覀兪窃诰W(wǎng)頁加載成功后獲取上下文來操作的。
// 無參數(shù)的
self.jsContext[@"alertMessage"] = ^() {
 NSLog(@"JS端調(diào)用alertMessage時就會跑到這里來！");
};
// 帶參數(shù)的，值必須進(jìn)行轉(zhuǎn)換
 self.jsContext[@"showDict"] = ^(JSValue *value) {
 NSArray *args = [JSContext currentArguments];
 JSValue *dictValue = args[0];
 NSDictionary *dict = dictValue.toDictionary;
 NSLog(@"%@",dict);
 };

// 獲取JS中的arr數(shù)據(jù)
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協(xié)議時，js可以直接調(diào)用object中的方法，并且需要把函數(shù)名取個別名。在JS端可以調(diào)用getS，OC可以繼續(xù)使用這個getSum這個方法
@protocol OMProtocol <JSExport>
// 協(xié)議 - 協(xié)議方法 
JSExportAs(getS, -(int)getSum:(int)num1 num2:(int)num2);
@end

在WKWebView中如何做呢？

不能像上面那樣，系統(tǒng)提供的是通過以下兩種方法，所以是比較難受，而且還得前端使用messageHandler來調(diào)用，即安卓和iOS分開處理。

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

// 下面是注冊名稱后，js使用messageHandlers調(diào)用了指定名稱就會進(jìn)入到代理中

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

// JS中messageHandlers調(diào)用我們在OC中的名稱一致時就會進(jìn)入后面的到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"];

//如果是彈窗的必須自己實(shí)現(xiàn)代理方法
- (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中實(shí)現(xiàn) UIWebView的代理方法 就實(shí)現(xiàn)下面的代碼(否則省略)
[self.wjb setWebViewDelegate:self];

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

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

前端使用實(shí)例如下，具體使用方法可以查看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來根據(jù)scheme、host、pathComponents進(jìn)行攔截做自定義邏輯處理。但是這種方法不是很靈活，于是就使用NSURLProtocol來進(jìn)行攔截，例如微信攔截淘寶一樣，直接顯示一個提示。又或者是攔截請求調(diào)用本地的接口，打開相機(jī)、錄音、相冊等功能。還能直接攔截后改變原有的request，直接返回數(shù)據(jù)或者其他的url，在一些去除廣告時可以的用得上。

我們使用的時候必須要使用NSURLProtocol的子類來進(jìn)行一些操作。并在使用前需要注冊自定義的Class。攔截后記得進(jìn)行標(biāo)記一下，防止自循環(huán)多執(zhí)行。可惜的是在WKWebView中不能進(jìn)行攔截后處理的操作，只能監(jiān)聽卻改變不了。源于WKWebView采用的是webkit加載，和系統(tǒng)的瀏覽器一樣的機(jī)制。

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

// 注冊
[NSURLProtocol registerClass:[OMURLProtocol class]];

// 1. 首先會在這里來進(jìn)行攔截，返回YES則表示需要經(jīng)過我們自定義處理，NO則走系統(tǒng)處理
+ (BOOL)canInitWithRequest:(NSURLRequest *)request;

// 2.攔截處理將會進(jìn)入下一個環(huán)節(jié), 返回一個標(biāo)準(zhǔn)化的request，可以在這里進(jìn)行重定向
+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request;

// 3.是否成功攔截都會走這個方法, 可以在這里進(jìn)行一些自定義處理
- (void)startLoading;

// 4. 任何網(wǎng)絡(luò)請求都會走上面的攔截處理，即使我們重定向后還會再走一次或多次流程，需要標(biāo)記來處理
// 根據(jù)request獲取標(biāo)記值來決定是否需要攔截，在canInitWithRequest內(nèi)處理
+ (nullable id)propertyForKey:(NSString *)key inRequest:(NSURLRequest *)request;
// 標(biāo)記
+ (void)setProperty:(id)value forKey:(NSString *)key inRequest:(NSMutableURLRequest *)request;
// 移除標(biāo)記
+ (void)removePropertyForKey:(NSString *)key inRequest:(NSMutableURLRequest *)request;

請求頭或數(shù)據(jù)混亂問題

還需要注意的一點(diǎn)是，如果實(shí)現(xiàn)線了攔截處理的話，我們在使用AFN和URLSession進(jìn)行訪問的時候攔截會發(fā)現(xiàn)數(shù)據(jù)或請求頭可能和你攔截處理后的數(shù)據(jù)或請求不符合預(yù)期，這是因?yàn)槲覀冊跀r截的時候只是先請求了A后請求了B，這是不符合預(yù)期的，雖然URLConnection不會但是已被廢棄不值得提倡使用。我們通過在攔截的時候通過LLDB打印session中配置的協(xié)議時，發(fā)現(xiàn)是這樣的沒有包含我們自定義的協(xié)議，我們通過Runtime交換方法交換protocolClasses方法，我們實(shí)現(xiàn)我們自己的protocolClasses方法。但是為了保證系統(tǒng)原有的屬性，我們應(yīng)該在系統(tǒng)原有的協(xié)議表上加上我們的協(xié)議類。在當(dāng)前我們雖然可以通過[NSURLSession sharedSession].configuration.protocolClasses;獲取系統(tǒng)默認(rèn)的協(xié)議類，但是如果我們在當(dāng)前自定義的類里protocolClasses寫的話會造成死循環(huán)，因?yàn)槲覀兘粨Q了該屬性的getter方法。我們使用保存類名然后存儲至NSUserDefaults，取值時在還原class。

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

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

// 我們再次打印時發(fā)現(xiàn)已經(jīng)加上我們自定義的協(xié)議類了
po session.configuration.protocolClasses
<__NSArrayM 0x60000041a4f0>(
_NSURLHTTPProtocol,
_NSURLDataProtocol,
_NSURLFTPProtocol,
_NSURLFileProtocol,
NSAboutURLProtocol,
OMURLProtocol
)

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

// 獲取系統(tǒng)原有的協(xié)議類
+ (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的攜帶問題

很多應(yīng)用場景中需要使用session來進(jìn)行處理，在UIWebView中很容易做到攜帶這些Cookie，但是由于WKWebView的機(jī)制不一樣，跨域會出現(xiàn)丟失cookie的情況是很糟糕的。目前有兩種用法：腳本和手動添加cookie。腳本不太靠譜，建議使用手動添加更為保險。

// 使用腳本來添加cookie

// 獲取去cookie數(shù)據(jù)
- (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];

// 添加一個分類來修復(fù)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);
}

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。

您可能感興趣的文章: