ios WKWebview

其他 2018-10-13 10:07:32 阅读次数: 0

iOS8之后，苹果推出了WebKit这个框架，用来替换原有的UIWebView，新的控件优点多多，不一一叙述。由于一直在适配iOS7，就没有去替换，现在仍掉了iOS7，以为很简单的就替换过来了，然而在替换的过程中，却遇到了很多坑。还有一点就是原来写过一篇文章 Objective-C与JavaScript交互的那些事以为年代久远的UIWebView已经作古，可这篇文章现在依然有一定的阅读量。所以在决定在续一篇此文，以引导大家转向WKWebView，并指出自己踩过的坑，让大家少走弯路。

此篇文章的逻辑图

此篇文章的逻辑图

WKWebView使用

WKWebView简单介绍

使用及注意点

WKWebView只能用代码创建，而且自身就支持了右滑返回手势allowsBackForwardNavigationGestures和加载进度estimatedProgress等一些UIWebView不具备却非常好用的属性。在创建的时候，指定初始化方法中要求传入一个WKWebViewConfiguration对象，一般我们使用默认配置就好，但是有些地方是要根据自己的情况去做更改。比如，配置中的allowsInlineMediaPlayback这个属性，默认为NO，如果不做更改，网页中内嵌的视频就无法正常播放。

①. 上面提到[userContentController addScriptMessageHandler:self name:JS_Function_Name]是注册JS的MessageHandler，但是WKWebView在多次调用loadRequest，会出现JS无法调用iOS端。我们需要在loadRequest和reloadWebView的时候需要重新注入。（在注入之前需要移除再注入，避免造成内存泄漏）

如果message.body中没有参数，JS代码中需要传null防止iOS端不会接收到JS的交互。

window.webkit.messageHandlers.kJS_Login.postMessage(null)

②. 在WKWebView中点击没有反应的时候，可以参考一下处理

-(WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures 
 {
       if (!navigationAction.targetFrame.isMainFrame) 
       {
           [webView loadRequest:navigationAction.request];
       }
       return nil;
 }

③. HTML中不能通过<a href="tel:123456789">拨号</a>来拨打iOS的电话。需要在iOS端的WKNavigationDelegate中截取电话在使用原生进行调用拨打电话。其中的[navigationAction.request.URL.scheme isEqualToString:@"tel"]中的@"tel"是JS中的定义好，并iOS端需要知道的。发送请求前决定是否跳转，并在此拦截拨打电话的URL

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
     /// <a href="tel:123456789">拨号</a>
     if ([navigationAction.request.URL.scheme isEqualToString:@"tel"]) 
     {
          decisionHandler(WKNavigationActionPolicyCancel);
          NSString * mutStr = [NSString stringWithFormat:@"telprompt://%@",navigationAction.request.URL.resourceSpecifier];
          if ([[UIApplication sharedApplication] canOpenURL:mutStr.URL]) 
          {
              if (iOS10()) 
              {
                  [[UIApplication sharedApplication] openURL:mutStr.URL options:@{} completionHandler:^(BOOL success) {}];
              } 
              else 
              {
                  [[UIApplication sharedApplication] openURL:mutStr.URL];
              }
          }
       } 
       else 
       {
           decisionHandler(WKNavigationActionPolicyAllow);
       }
}

④. 在执行goBack或reload或goToBackForwardListItem之后请不要马上执行loadRequest，使用延迟加载。

⑤在使用中JS端：H5、DOM绑定事件。每一次JS方法调用iOS方法的时候，我都为这个JS方法绑定一个对应的callBack方法，这样的话，同时在发送的消息中告诉iOS需要回调，iOS方法就可以执行完相关的方法后，直接回调相应的callBack方法，并携带相关的参数，这样就可以完美的进行交互了。这是为了在JS调用iOS的时候,在- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message获取到信息后，iOS端调用[_webView evaluateJavaScript:jsString completionHandler:^(id _Nullable data, NSError * _Nullable error) {}];给JS发送消息，保证JS在获取相关返回值时，一定能拿到值。

⑥根据需求清楚缓存和Cookie。

更改User-Agent

有时我们需要在User-Agent添加一些额外的信息，这时就要更改默认的User-Agent在使用UIWebView的时候，可用如下代码(在使用UIWebView之前执行)全局更改User-Agent：

// 获取默认User-Agent
UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectZero];
NSString *oldAgent = [webView stringByEvaluatingJavaScriptFromString:@"navigator.userAgent"];
 
// 给User-Agent添加额外的信息
NSString *newAgent = [NSString stringWithFormat:@"%@;%@", oldAgent, @"extra_user_agent"];
 
// 设置global User-Agent
NSDictionary *dictionnary = [[NSDictionary alloc] initWithObjectsAndKeys:newAgent, @"UserAgent", nil];
[[NSUserDefaults standardUserDefaults] registerDefaults:dictionnary];

以上代码是全局更改User-Agent，也就是说，App内所有的Web请求的User-Agent都被修改。替换为WKWebView后更改全局User-Agent可以继续使用上面的一段代码，或者改为用WKWebView获取默认的User-Agent，代码如下:

self.wkWebView = [[WKWebView alloc] initWithFrame:CGRectZero];
 
// 获取默认User-Agent
[self.wkWebView evaluateJavaScript:@"navigator.userAgent" completionHandler:^(id result, NSError *error) {
    NSString *oldAgent = result;
 
    // 给User-Agent添加额外的信息
    NSString *newAgent = [NSString stringWithFormat:@"%@;%@", oldAgent, @"extra_user_agent"];
 
    // 设置global User-Agent
    NSDictionary *dictionary = [NSDictionary dictionaryWithObjectsAndKeys:newAgent, @"UserAgent", nil];
    [[NSUserDefaults standardUserDefaults] registerDefaults:dictionary];
}];

对比发现，这两种方法并没有本质的区别，一点小区别在于一个是用UIWebView获取的默认User-Agent，一个是用WKWebView获取的默认User-Agent。上面方法的缺点也是很明显的，就是App内所有Web请求的User-Agent全部被修改。

在iOS9，WKWebView提供了一个非常便捷的属性去更改User-Agent，就是customUserAgent属性。这样使用起来不仅方便，也不会全局更改User-Agent，可惜的是iOS9才有，如果适配iOS8，还是要使用上面的方法。

WKWebView的相关的代理方法

WKWebView的相关的代理方法分别在WKNavigationDelegate和WKUIDelegate以及WKScriptMessageHandler这个与JavaScript交互相关的代理方法。

  • WKNavigationDelegate: 此代理方法中除了原有的UIWebView的四个代理方法，还增加了其他的一些方法，具体可参考我下面给出的Demo。
  • WKUIDelegate: 此代理方法在使用中最好实现，否则遇到网页alert的时候，如果此代理方法没有实现，则不会出现弹框提示。
  • WKScriptMessageHandler: 此代理方法就是和JavaScript交互相关，具体介绍参考下面的专门讲解。

WKWebView使用过程中的坑

WKWebView下面添加自定义View

因为我们有个需求是在网页下面在添加一个View，用来展示此链接内容的相关评论。在使用UIWebView的时候，做法非常简单粗暴，在UIWebView的ScrollView后面添加一个自定义View，然后根据View的高度，在改变一下scrollView的contentSize属性。以为WKWebView也可以这样简单粗暴的去搞一下，结果却并不是这样。

首先改变WKWebView的scrollView的contentSize属性，系统会在下一次帧率刷新的时候，再给你改变回原有的，这样这条路就行不通了。我马上想到了另一个办法，改变scrollView的contentInset这个系统倒不会在变化回原来的，自以为完事大吉。后来过了两天，发现有些页面的部分区域的点击事件无法响应，百思不得其解，最后想到可能是设置的contentInset对其有了影响，事实上正是如此。查来查去，最后找到了一个解决办法是，就是当页面加载完成时，在网页下面拼一个空白的div，高度就是你添加的View的高度，让网页多出一个空白区域，自定义的View就添加在这个空白的区域上面。这样就完美解决了此问题。具体可参考Demo所写，核心代码如下:

self.addView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ScreenWidth, addViewHeight)];
self.addView.backgroundColor = [UIColor redColor];
[self.webView.scrollView addSubview:self.addView];
 
NSString *js = [NSString stringWithFormat:@"\
                        var appendDiv = document.getElementById(\"AppAppendDIV\");\
                        if (appendDiv) {\
                        appendDiv.style.height = %@+\"px\";\
                        } else {\
                        var appendDiv = document.createElement(\"div\");\
                        appendDiv.setAttribute(\"id\",\"AppAppendDIV\");\
                        appendDiv.style.width=%@+\"px\";\
                        appendDiv.style.height=%@+\"px\";\
                        document.body.appendChild(appendDiv);\
                        }\
                        ", @(addViewHeight), @(self.webView.scrollView.contentSize.width), @(addViewHeight)];
 
[self.webView evaluateJavaScript:js completionHandler:nil];

WKWebView加载HTTPS的链接

HTTPS已经越来越被重视，前面我也写过一系列的HTTPS的相关文章HTTPS从原理到应用(四)：iOS中HTTPS实际使用当加载一些HTTPS的页面的时候，如果此网站使用的根证书已经内置到了手机中这些HTTPS的链接可以正常的通过验证并正常加载。但是如果使用的证书(一般为自建证书)的根证书并没有内置到手机中，这时是链接是无法正常加载的，必须要做一个权限认证。开始在UIWebView的时候，是把请求存储下来然后使用NSURLConnection去重新发起请求，然后走NSURLConnection的权限认证通道，认证通过后，在使用UIWebView去加载这个请求。

在WKWebView中，WKNavigationDelegate中提供了一个权限认证的代理方法，这是权限认证更为便捷。代理方法如下:

- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential *credential))completionHandler {
    if ([challenge.protectionSpace.authenticationMethod isEqualToString:NSURLAuthenticationMethodServerTrust]) {
        if ([challenge previousFailureCount] == 0) {
            NSURLCredential *credential = [NSURLCredential credentialForTrust:challenge.protectionSpace.serverTrust];
            completionHandler(NSURLSessionAuthChallengeUseCredential, credential);
        } else {
            completionHandler(NSURLSessionAuthChallengeCancelAuthenticationChallenge, nil);
        }
    } else {
        completionHandler(NSURLSessionAuthChallengeCancelAuthenticationChallenge, nil);
    }
}

这个方法比原来UIWebView的认证简单的多。但是使用中却发现了一个很蛋疼的问题，iOS8系统下，自建证书的HTTPS链接，不调用此代理方法。查来查去，原来是一个bug，在iOS9中已经修复，这明显就是不管iOS8的情况了，而且此方法也没有标记在iOS9中使用，这点让我感到有点失望。这样我就又想到了换回原来UIWebView的权限认证方式，但是试来试去，发现也不能使用了。所以关于自建证书的HTTPS链接在iOS8下面使用WKWebView加载，我没有找到很好的办法去解决此问题。这样我不得已有些链接换回了HTTP，或者在iOS8下面在换回UIWebView。如果你有解决办法，也欢迎私信我，感激不尽。

WKWebView加载POST请求

非常感谢@e231e1ff5f8b的指出，原来POST请求这儿还有一个坑。自己项目中并没有这块需求，也就没有发现。加载POST请求的时候，会丢失HTTPBody。解决办法是在网页上开一个JavaScript方法，在请求POST的时候去调用JavaScript这个方法，从而完成POST请求。调用JavaScript方法参考下面交互这一章节。

WKWebView和JavaScript交互

WKWebView和JavaScript交互，在WKUserContentController.h这个头文件中- (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;这个方法的注释中已经明确给出了交互办法。使用起来倒是非常的简单。创建WKWebView的时候添加交互对象，并让交互对象实现WKScriptMessageHandler中的唯一的一个代理方法。具体的方式参考Demo中的使用。

// 添加交互对象
[config.userContentController addScriptMessageHandler:(id)self.ocjsHelper name:@"timefor"];
 
/** 此点后来更新，如果不移除交互对象，则导致交互对象内存常驻(2016.12.17) */
// VC销毁时，移除交互对象
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"timefor"];
 
// 代理方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;

JavaScript调用Objective-C的时候，使用window.webkit.messageHandlers.timefor.postMessage({code: '0001', functionName: 'getdevideId'}); Objective-C自动对交互参数包装成了WKScriptMessage对象，其属性body则为传送过来的参数，name为添加交互对象的时候设置的名字，以此名字可以过滤掉不属于自己的交互方法。其中body可以为NSNumber, NSString, NSDate, NSArray, NSDictionary, and NSNull。

而Objective-C在回调JavaScript的时候，不能像我原来在 Objective-C与JavaScript交互的那些事这篇文章中写的那样，JavaScript传过来一个匿名函数，Objective-C这边直接调用一下就完事。WKWebView没有办法传过来一个匿名函数，所以回调方式，要么执行一段JavaScript代码，或者就是调用JavaScript那边的一个全局函数。一般是采用后者，至于Web端虽说暴露了一个全局函数，同样可以把这一点代码处理的很优雅。Objective-C传给JavaScript的参数，可以为Number, String, and Object。参考如下：

// 数字
NSString *js = [NSString stringWithFormat:@"globalCallback(%@)", number];
[self.webView evaluateJavaScript:js completionHandler:nil];
// 字符串
NSString *js = [NSString stringWithFormat:@"globalCallback(\'%@\')", string];
[self.webView evaluateJavaScript:js completionHandler:nil];
// 对象
NSString *js = [NSString stringWithFormat:@"globalCallback(%@)", @{@"name" : @"timefor"}];
[self.webView evaluateJavaScript:js completionHandler:nil];
// 带返回值的JS函数
[self.webView evaluateJavaScript:@"globalCallback()" completionHandler:^(id result, NSError * _Nullable error) {
    // 接受返回的参数，result中
}];

这里有一个不容易察觉的内存泄漏问题：addScriptMessageHandler。

泄漏的可能原因是：这里userContentController持有了self ，然后 userContentController 又被configuration持有，最终呗webview持有，然后webview是self的一个私有变量，所以self也持有self，所以，这个时候有循环引用的问题存在，导致界面被pop或者dismiss之后依然会存在内存中。不会被释放。

解决方法：

// 0.1> 这里加一条，皮一下，想省事，就换一个，不直接解决此问题，当然这个方式仅限于简单的操作处理，js调oc的另外一种方式。看下面0.1>url方式

// 1> 'add' 在 viewDidLoad 调用，'remove' 在 viewWillDisappear调用
// 这种写法并不是不可以，前提是当前页面没有二级页面了，如果有二级页面就不能这么写

// 2> 'add' 在 viewDidLoad 调用，'remove' 在当前页面的 'pop' 方法调用
// 次方法解决了第一种方法的缺陷，但是还有一个问题，如果当前页面有右滑返回手势的话就不行

// 3> 可以创建一个新的类WeakScriptMessageDelegate，也可以将@interface-@end写在ViewController.h中，@implementation-@end写在ViewController.m中。（原文链接）
详情请看下面的代码 （当然，如果还想别的第三方方式来轻松解决，是可以哒：WKWebView 使用的是WKWebViewJavascriptBridge，而UIWebView 使用的是WebViewJavascriptBridge。）

3> 创建新类

@interface WeakScriptMessageDelegate : NSObject<WKScriptMessageHandler>

@property (nonatomic, weak) id<WKScriptMessageHandler> scriptDelegate;

- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate;

@end

@implementation WeakScriptMessageDelegate

- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate {
    self = [super init];
    if (self) {
        _scriptDelegate = scriptDelegate;
    }
    return self;
}

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    [self.scriptDelegate userContentController:userContentController didReceiveScriptMessage:message];
}

@end

添加了下面这行代码之后ViewController就会调用dealloc方法，此时ViewController已经正常释放。但是WeakScriptMessageDelegate没有释放，需要在dealloc中将WeakScriptMessageDelegate释放掉。

WKWebViewConfiguration *wkConfig = [[WKWebViewConfiguration alloc] init];
wkConfig.userContentController = [[WKUserContentController alloc] init];
[wkConfig.userContentController addScriptMessageHandler:[[WeakScriptMessageDelegate alloc] initWithDelegate:self] name:@"Native"];

释放WeakScriptMessageDelegate

- (void)dealloc {
    [self.wkConfig.userContentController removeScriptMessageHandlerForName:@"Native"];
}

亲测，代码无泄漏。

0.1>url方式

处理简单的操作，可以让JS打开新的web页面，在WKWebView的WKNavigationDelegate协议中,判断要打开的新的web页面是否是含有你需要的东西，如果有需要就截获，不打开并且进行本地操作。

#pragma mark - WKNavigationDelegate
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
{
    NSURL *URL = navigationAction.request.URL;
    NSString *scheme = [URL scheme];
    if ([scheme isEqualToString:@"haleyaction"]) {
        [self handleCustomAction:URL];
        decisionHandler(WKNavigationActionPolicyCancel);
        return;
    }
    decisionHandler(WKNavigationActionPolicyAllow);
}

#pragma mark - private method
- (void)handleCustomAction:(NSURL *)URL
{
    NSString *host = [URL host];
    if ([host isEqualToString:@"scanClick"]) {
        NSLog(@"扫一扫");
    } else if ([host isEqualToString:@"shareClick"]) {
        [self share:URL];
    } else if ([host isEqualToString:@"getLocation"]) {
        [self getLocation];
    } else if ([host isEqualToString:@"setColor"]) {
        [self changeBGColor:URL];
    } else if ([host isEqualToString:@"payAction"]) {
        [self payAction:URL];
    } else if ([host isEqualToString:@"shake"]) {
        [self shakeAction];
    } else if ([host isEqualToString:@"goBack"]) {
        [self goBack];
    }
}

这个跟题目没太大关系，仅仅是贴出来看一下，wk和webview的内存使用情况， 下面就讲清楚缓存问题。

All Heap Allocations 是程序真实的内存分配情况，All Anonymous VM则是系统为程序分配的虚拟内存，为的就是当程序有需要的时候，能够及时为程序提供足够的内存空间，而不会现用现创建。

WKWebview跨域https://www.jianshu.com/p/9fad0e24bad5

WKWebview缓存https://www.jianshu.com/p/c4859b50f795

缓存https://www.jianshu.com/p/186a3b236bc9

WKWebView填坑之----加载沙盒图片和音视频文件https://www.jianshu.com/p/db6386fada10

原文链接https://blog.csdn.net/yuanmengong886/article/details/55051036

猜你喜欢

转载自blog.csdn.net/qq_27909209/article/details/81066392
今日推荐
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
最强开源大模型 Llama 3 上架 Gitee AI
周排行
自媒体文章如何提高原创度以及如何检测原创度
开启qq邮箱的smtp服务
Qt程序单次启动（QSingleApplication类）
国外的外包网站
更新IDEA主题——放飞代码风格
cocos2dx 实现搓牌效果（翻牌效果），包括铺平动画
dict和json之间的互相转换
angular的一些思考
. Fibonacci数列是这样定义的： F[0] = 0 F[1] = 1 for each i ≥ 2: F[i] = F[i-1] + F[i-2] 因此，Fibonacci数列就形如：0, 1
洛谷P1064 金明的预算方案
每日归档
更多
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022