WKWebview的使用详解和填坑

虽然WKWebView是在Apple的WWDC 2014随iOS 8和OS X 10.10出来的，是为了解决UIWebView加载速度慢、占用内存大的问题。但是由于之前还要适配iOS7，所以就没有使用。现在项目都适配iOS 8以上了，所以就开始使用WKWebView了，但是发现在使用的时候有好多坑，希望这篇文章能带大家绕过坑，更好的使用WKWebView。
这篇文章主要介绍了以下问题，方便小伙伴们查阅：
1. WKWebView的基本介绍和使用
2. WKWebView 加载本地的HTML ,css ,js
3. WKWebView和JavaScript的交互
4. WKWebView 默认不弹出js的alert问题
5.WKWebView 默认是不能识别电话号码
6.WKWebView 拦截js通过window.open() 打开的窗口
7.WKWebView解决文字显示太小问题
8. 解决WKWebView加载POST请求无法发送参数问题

下面开始说第一个问题 WKWebView基本使用

1.创建跟UIWebview 一样

// 创建WKWebView
    WKWebView *webView = [[WKWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    // 设置访问的URL
    NSURL *url = [NSURL URLWithString:@"http://www.jianshu.com"];
    // 根据URL创建请求
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    // WKWebView加载请求
    [webView loadRequest:request];
    // 将WKWebView添加到视图
    [self.view addSubview:webView];

UIWebView和WKWebView的代理方法做一个对比
1.准备加载页面

UIWebViewDelegate: - webView:shouldStartLoadWithRequest:navigationType
 WKNavigationDelegate: - webView:didStartProvisionalNavigation:

2.内容开始加载

UIWebViewDelegate: - webViewDidStartLoad:
 WKNavigationDelegate: - webView:didCommitNavigation:

3.页面加载完成

UIWebViewDelegate: - webViewDidFinishLoad:
 WKNavigationDelegate: - webView:didFinishNavigation:

4.页面加载失败

UIWebViewDelegate: - webView:didFailLoadWithError:
 WKNavigationDelegate: - webView:didFailNavigation:withError:
 WKNavigationDelegate: - webView:didFailProvisionalNavigation:withError:

可以看到很简单，和UIWebView并没有多少差别，然而性能就刷刷刷的提上去了，是不是很爽呢？如果你只是简单的集成个Web页到App，这些已经够了。不过很多时候并没有那么简单，还需要处理各种东西，那么接着往后看。

接下来我来说第二个问题 WKWeebView 加载本地HTML

UIWebview 加载本地的HTML 的问题,在此就不在多说了,想了解的小伙伴可以参考我之前的一篇文章
webView中引入本地html,image,js,css文件的方法http://www.jianshu.com/p/afc9e6b68090
本文主要说明一下 WKWeebView 加载本地HTML

当使用loadRequest来读取本地的HTML时，WKWebView是无法读取成功的，后台会出现如下的提示：
Could not create a sandbox extension for /
原因是WKWebView是不允许通过loadRequest的方法来加载本地根目录的HTML文件。
而在iOS9的SDK中加入了以下方法来加载本地的HTML文件：
[WKWebView loadFileURL:allowingReadAccessToURL:]
但是在iOS9以下的版本是没提供这个便利的方法的。以下为解决方案的思路，就是在iOS9以下版本时，先将本地HTML文件的数据copy到tmp目录中，然后再使用loadRequest来加载。但是如果在HTML中加入了其他资源文件，例如js，css，image等必须一同copy到temp中。这个是最蛋疼的事情了。

解决方法如下

直接copy代码可以使用

- (void)viewDidLoad {
    [super viewDidLoad];
    [self setNavTitle:self.titleName];
    self.webview = [[WKWebView alloc]initWithFrame:ccr(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT-64)];
    
    NSString *path = [[NSBundle mainBundle] pathForResource:self.loadHtmlName ofType:@"html"];
//下面是加载css 项目不需要的飘过
      NSString *path2 = [[NSBundle mainBundle] pathForResource:@"calculus" ofType:@"css"];
//下面是加载图片 项目不需要的飘过
    NSString *path3 = [[NSBundle mainBundle] pathForResource:@"headerbg" ofType:@"jpg"];
    if(path){
        if ([[UIDevice currentDevice].systemVersion floatValue] >= 9.0) {
            // iOS9. One year later things are OK.
            NSURL *fileURL = [NSURL fileURLWithPath:path];
            [self.webview loadFileURL:fileURL allowingReadAccessToURL:fileURL];
//注释的方法和上面的方法是等价的,两者都可以使用
//            NSString * htmlCont = [NSString stringWithContentsOfFile:path
//                                                                                       encoding:NSUTF8StringEncoding
//                                                                                          error:nil];
//            [self.webview loadHTMLString:htmlCont baseURL:[NSBundle mainBundle].resourceURL];
        } else {
            // iOS8
            
            NSURL *fileURL = [self fileURLForBuggyWKWebView8:[NSURL fileURLWithPath:path]];
            [self fileURLForBuggyWKWebView8:[NSURL fileURLWithPath:path2]];
            [self fileURLForBuggyWKWebView8:[NSURL fileURLWithPath:path3]];
            NSURLRequest *request = [NSURLRequest requestWithURL:fileURL];
            [self.webview loadRequest:request];
        }
    }
    
    [self.view addSubview:self.webview];
}

//把图片和css copy到tmp目录中

- (NSURL *)fileURLForBuggyWKWebView8:(NSURL *)fileURL {
    NSError *error = nil;
    if (!fileURL.fileURL || ![fileURL checkResourceIsReachableAndReturnError:&error]) {
        return nil;
    }
    // Create "/temp/www" directory
    NSFileManager *fileManager= [NSFileManager defaultManager];
    NSURL *temDirURL = [[NSURL fileURLWithPath:NSTemporaryDirectory()] URLByAppendingPathComponent:@"www"];
    [fileManager createDirectoryAtURL:temDirURL withIntermediateDirectories:YES attributes:nil error:&error];
    
    NSURL *dstURL = [temDirURL URLByAppendingPathComponent:fileURL.lastPathComponent];
    // Now copy given file to the temp directory
    [fileManager removeItemAtURL:dstURL error:&error];
    [fileManager copyItemAtURL:fileURL toURL:dstURL error:&error];
    // Files in "/temp/www" load flawlesly :)
    return dstURL;
}

当时选择WKWebView就是为了提高性能，但是没有想到遇到这么多坑，从看iOS 9才解决了iOS 8无法加载本地样式的问题，有时候苹果解决问题的速度还有略慢的，到现在POST请求参数都发不出去也真是不应该。不过没办法，先解决了，说不定iOS 10 出来之后解决了呢。

接下来我们开始说第三个问题 WKWebView和JavaScript的交互

WKWebView和JavaScript的交互主要涉及到两个方面,一个是OC调用JavaScript ,另一个是 JavaScript 调用OC的方法,

在WebKit框架中，有WKWebView可以替换UIKit的UIWebView和AppKit的WebView，而且提供了在两个平台可以一致使用的接口。WebKit框架使得开发者可以在原生App中使用Nitro来提高网页的性能和表现，Nitro就是Safari的JavaScript引擎,WKWebView不支持JavaScriptCore的方式但提供message handler的方式为JavaScript与Native通信。（这个引自天狐博客，更多的与UIWebView或者WKWebView的交互方法可以在这里看到)。

1. OC调用JavaScript

OC调用JavaScrippt是相对来说比较简单的
只需要在调用的地方添加下面一句代码即可

//showAlert()是js里面的方法,这样就可以实现调用js方法
[self.webView evaluateJavaScript:@"showAlert('奏是一个弹框')" completionHandler:^(id item, NSError * _Nullable error) {
        // Block中处理是否通过了或者执行JS错误的代码
    }];

2. JavaScript 调用OC的方法,相对来说复杂一点

这地方需要两个配置,一个是OC代码的配置,另一个是JS代码的配置,下面先说一下OC代码的配置,细心的小伙伴可能已经发现了，创建WKWebView的时候，除了有- initWithFrame:方法外，还有一个高端的方法：- initWithFrame:configuration:方法。
#######OC代码的配置
1.配置 WKWebView

// 创建配置
      WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
      // 创建UserContentController（提供JavaScript向webView发送消息的方法）
      WKUserContentController* userContent = [[WKUserContentController alloc] init];
      // 添加消息处理，注意：self指代的对象需要遵守WKScriptMessageHandler协议，结束时需要移除
//NativeMethod 这个方法一会要与JS里面的方法写的一样
      [userContent addScriptMessageHandler:self name:@"NativeMethod"];
      // 将UserConttentController设置到配置文件
      config.userContentController = userContent;
      // 高端的自定义配置创建WKWebView
      WKWebView *webView = [[WKWebView alloc] initWithFrame:[UIScreen mainScreen].bounds configuration:config];
      // 设置访问的URL
      NSURL *url = [NSURL URLWithString:@"http://www.jianshu.com"];
      // 根据URL创建请求
      NSURLRequest *request = [NSURLRequest requestWithURL:url];
      // WKWebView加载请求
      [webView loadRequest:request];
      // 将WKWebView添加到视图
      [self.view addSubview:webView];

2.实现协议方法

好了，现在万事俱备，只欠东风了。东风是什么呢，就是该在哪儿处理。可以看到WKScriptMessageHandler的协议里面只有一个方法，就是：

 - userContentController:didReceiveScriptMessage:

相信聪明的你已经猜到了。是的，就是在这个代理方法里面操作：如果JavaScript执行已经写好的：window.webkit.messageHandlers.NativeMethod.postMessage("就是一个消息啊");这行代码，这个代理方法就会走，并且会有个WKScriptMessage的对象，这个WKScriptMessage对象有个name属性，拿到之后你会发现，就是我们注册的NativeMethod这个字符串，这时候你就可以手动调用Native的方法了。如果有多个方法需要调用的话怎么办，看到JavaScript中postMessage()方法有一个参数了没有，可以根据这里的参数来区分调用原生App的哪个方法。

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
          // 判断是否是调用原生的
          if ([@"NativeMethod" isEqualToString:message.name]) {
              // 判断message的内容，然后做相应的操作
              if ([@"close" isEqualToString:message.body]) {

              }
          }
      }

2.JavaScript的配置

JavaScript调用Native的方法就需要前端和Native的小伙伴们配合了，需要前端的小伙伴在JS的方法中调用：

window.webkit.messageHandlers.NativeMethod.postMessage("就是一个消息啊");

这行代码。请注意，这个NativeMethod是和App中要统一的，配置方法将在下面的Native中书写。
这地方贴一下js代码

function callOC(func,param){
        window.webkit.messageHandlers. NativeMethod.postMessage('传递的参数');
 }

注意:
第一:实现以上代码的时候不要忘记实现** WKScriptMessageHandler**协议
第二:上面将当前ViewController设置为MessageHandler之后需要在当前ViewController销毁前将其移除(dealloc方法)，否则会造成内存泄漏。

  [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"NativeMethod"];

第三:来说一下如果有多个方法的时候改如何区分,我这简单说两个区分方法,一个是通过 [userContent addScriptMessageHandler:self name:@"NativeMethod"];来设置多个不同的name ,然后在协议方法里面进行区分,另一个方法是通过同一个window.webkit.messageHandlers.NativeMethod.postMessage("close");中的name里面的postMessage(来传递参数),然后在协议方法里面区分message.body
Android 的小伙伴可以参照这篇文章 http://blog.csdn.net/it1039871366/article/details/46372207
js区分Android和ios的方法

           var u = navigator.userAgent;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
          
                if(isAndroid){
                    window.Android.alipayOrder();
                }
                if(isiOS){
                    window.webkit.messageHandlers.alipayOrder.postMessage(r);
                }

第四个问题 WKWebview 默认是不弹出js的alert 要想可以弹出alert 需要手动的设置代理实现

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler

协议方法
具体的实现方法是,我们采用源生的UIAlertController 来实现弹出框,获取js里面的alert内容显示出来

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"提示" message:message?:@"" preferredStyle:UIAlertControllerStyleAlert];
    [alertController addAction:([UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
        completionHandler();
        NSLog(@"点击了取消按钮==%@",message);
    }])];
    [alertController addAction:([UIAlertAction actionWithTitle:@"确认" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
        completionHandler();
        NSLog(@"点击了确定按钮==%@",message);
    }])];
    
    [self presentViewController:alertController animated:YES completion:nil];
    
}

第五个问题 WKWebview 默认是不能识别电话号的,这里需要通过实现一个协议来实现拨打电话的功能

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler

具体的代码如下:

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
    NSURL *URL = navigationAction.request.URL;
    NSLog(@"获取到URL========%@",URL);
    NSString *scheme = [URL scheme];
    UIApplication *app = [UIApplication sharedApplication];
    // 打电话
    if ([scheme isEqualToString:@"tel"]) {
        if ([app canOpenURL:URL]) {
            [app openURL:URL];
            // 一定要加上这句,否则会打开新页面
            decisionHandler(WKNavigationActionPolicyCancel);
            return;
        }
    }
    decisionHandler(WKNavigationActionPolicyAllow);
}

注:对应html代码采用的是a标签

<a href="tel:18158711698">识别电话号码18158711698,进行拨打电话</a>

问题六: WKWebView 默认拦截open.window() 打开新的页面

- (WKWebView )webView:(WKWebView )webView createWebViewWithConfiguration:(WKWebViewConfiguration )configuration forNavigationAction:(WKNavigationAction )navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures
会拦截到window.open()事件.
只需要我们在在方法内进行处理
if (!navigationAction.targetFrame.isMainFrame) {
[webView loadRequest:navigationAction.request];
}

问题七:WKWebView解决显示字体太小的问题

在使用WKWebView的时候，常常会碰到显示内容比实际css设置的样式不能正常显示，内容普遍的偏小。其实导致这样问题的根源是少了HTML5的meta标签。解决的办法可以在iOS端添加以下的内容，当然也可以让后台添加完整的HTML5的格式。如果要在iOS端指定字体的大小也是可以的（不推荐在客户端设置字体大小）。

 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];

WKWebViewConfiguration *wkWebConfig = [[WKWebViewConfiguration alloc] init];
wkWebConfig.userContentController = wkUController;

_myWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0,CGRectGetMaxY(headerView.frame)+10, M_S.width,M_S.height - CGRectGetMaxY(headerView.frame) - 40) configuration:wkWebConfig];

客户端设置字体大小eg:

- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation{
    //修改字体大小 300%
    [ webView evaluateJavaScript:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '200%'" completionHandler:nil];

    //    //修改字体颜色  #9098b8
    //    [ webView evaluateJavaScript:@"document.getElementsByTagName('body')[0].style.webkitTextFillColor= '#9098b8'" completionHandler:nil];

}

最后编辑于：2018.03.09 12:03:02

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,736评论 4赞 362
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,167评论 1赞 291
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,442评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,902评论 0赞 204
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,302评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,573评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,847评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,562评论 0赞 197
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,260评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,531评论 2赞 245
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,021评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,367评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,016评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,068评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,827评论 0赞 194
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,610评论 2赞 274
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,514评论 2赞 269