IOS浏览控件之WKWebView

WkWebView是IOS8中引入的新组件,苹果将UIWebViewDelegate 与 UIWebView 重构成了 14 个类和 3 个协议并引入了不少新的功能和接口。由于一直以来苹果对于WebView内核封锁的程度是令人发指的,WkWebView的引入无疑是另广大开发者兴奋的事

1、WKWebView介绍

WKWebView是现代 WebKit API 在 iOS 8 和 OS X Yosemite 应用中的核心部分。它代替了 UIKit 中的UIWebView和 AppKit 中的WebView,提供了统一的跨双平台 API(iOS和OS)。

2、WKWebView新特性

  1. 在性能、稳定性、功能方面有很大提升(最直观的体现就是加载网页是占用的内存,模拟器加载百度与开源中国网站时,WKWebView占用23M,而UIWebView占用85M)
  2. 和 Safari 相同的 JavaScript 引擎,允许JavaScript的Nitro库加载并使用(UIWebView中限制);
  3. 支持了更多的HTML5特性;
  4. 自诩拥有 60fps 滚动刷新率、内置手势、高效的 app 和 web 信息交换通道

3、WKWebView使用

  • 在WKWebView,一般都是使用UIWebView,而UIWebView的问题主要有:

    • 内存占用大
    • 效率低
    • 与JS交互比较麻烦
    • 可扩展性低等
  • 使用WKWebView可以有效地解决上述问题。
    示例:

    // 创建webview
    WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
    // 创建请求
    NSURLRequest *request =[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]];
    // 加载网页
    [webView loadRequest:request];
    // 将webView添加到界面
    [self.view addSubview:webView];
  • WKWebView操作JS
    • WKWebView加载JS

//JS文件路径
NSString *jsPath = [[NSBundle mainBundle] pathForResource:@"demo" ofType:@"js"];
//读取JS文件内容
NSString *jsContent = [NSString stringWithContentsOfFile:jsPath encoding:NSUTF8StringEncoding error:nil];
//创建用户脚本对象,
//WKUserScriptInjectionTimeAtDocumentStart :HTML文档创建后,完成加载前注入,类似于<head>中
//WKUserScriptInjectionTimeAtDocumentEnd :HTML文件完成加载后注入,类似于<body>中
WKUserScript *script = [[WKUserScript alloc] initWithSource:jsContent injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES];
//添加用户脚本
[webView.configuration.userContentController addUserScript:script];


- WKWebView执行JS方法

//执行JS方法
[webView evaluateJavaScript:@"test()" completionHandler:^(id _Nullable result, NSError * _Nullable error) {
//result为执行js方法的返回值
if(error){
NSLog(@"Success");
}else{
NSLog(@"Fail");
}
}];


##4、WKWebView代理方法
- WKNavigationDelegate 协议

pragma mark - WKNavigationDelegate

// 页面开始加载时调用

  • (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {
    }
    // 内容开始返回时调用
  • (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation {
    }
    // 页面加载完成时调用
  • (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    }
    // 页面加载失败时调用
  • (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation {
    }
    
      新增的三个代理方法:
    

// 这个方法是服务器重定向时调用,即 接收到服务器跳转请求之后调用

  • (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation {
    }
    // 在收到响应后,决定是否跳转

  • (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler {
    }
    // 在发送请求之前,决定是否跳转

  • (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    //需执行decisionHandler的block。
    }

    
    
  • WKUIDelegate 协议

        #pragma mark - WKUIDelegate
      /// 创建一个新的WebView
      - (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures {
          return nil;
      }
    
      /**
       *  web界面中有弹出警告框时调用
       *
       *  @param webView           实现该代理的webview
       *  @param message           警告框中的内容
       *  @param frame             主窗口
       *  @param completionHandler 警告框消失调用
       */
      - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(void (^)())completionHandler {
          
      }
    
      /// 输入框
      - (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler {
          
      }
      /// 确认框
      - (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler {
          
      }
      /// 警告框
      - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {
          
      }
    

5、WKWebView疑难

  • WKWebView加载POST请求无法发送参数问题

    1. 使用NSURLSession发送一个请求,然后把请求下来的数据当作本地HTML加载
           // 创建WKWebView
        WKWebView *webView = [[WKWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
        // 将WKWebView添加到当前View
        [self.view addSubview:webView];
        // 设置访问的URL
        NSURL *url = [NSURL URLWithString:@"http://www.example.com"];
        // 根据URL创建请求
        NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:url];
        // 设置请求方法为POST
        [request setHTTPMethod:@"POST"];
        // 设置请求参数
        [request setHTTPBody:[@"username=aaa&password=123" dataUsingEncoding:NSUTF8StringEncoding]];
        
        // 实例化网络会话
        NSURLSession *session = [NSURLSession sharedSession];
        // 创建请求Task
        NSURLSessionDataTask *task = [session dataTaskWithRequest:request completionHandler:^(NSData * _Nullable data, NSURLResponse * _Nullable response, NSError * _Nullable error) {
            
            // 将请求到的网页数据用loadHTMLString 的方法加载
            NSString *htmlStr = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
            [webView loadHTMLString:htmlStr baseURL:nil];
        }];
        // 开启网络任务
        [task resume];
    
    1. 使用JavaScript解决WKWebView无法发送POST参数问题(iOS8)
  • iOS9以前版本读取本地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到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;
      }
    
      //调用逻辑
      NSString *path = [[NSBundle mainBundle] pathForResource:@"indexoff" ofType:@"html"];
      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];
          } else {
              // iOS8. Things can be workaround-ed
              //   Brave people can do just this
              //   fileURL = try! pathForBuggyWKWebView8(fileURL)
              //   webView.loadRequest(NSURLRequest(URL: fileURL))
              
              NSURL *fileURL = [self.fileHelper fileURLForBuggyWKWebView8:[NSURL fileURLWithPath:path]];
              NSURLRequest *request = [NSURLRequest requestWithURL:fileURL];
              [self.webView loadRequest:request];
          }
      }
    

问题:http://stackoverflow.com/questions/24882834/wkwebview-not-loading-local-files-under-ios-8
具体参见:https://github.com/shazron/WKWebViewFIleUrlTest

ps:在实际测试中,上述方法在iOS8.0系统中也无法成功。如果在iOS8.0系统有成功的请告知下。谢谢!

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

推荐阅读更多精彩内容