迁至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);
}
复制代码