［iOS开发］WKWebView加载JS

Posted 2020-08-15 姜晓延

　　最近项目要用webView加载js文件，挺同事说WKWebView比UIWebView更加好用，于是我今天就试试，百度一发，自己写了个demo。

　　先看我写的代码，然后再来看WKWebView跟UIWebView的区别：

　　首先，遵循这两个协议WKNavigationDelegate,WKScriptMessageHandler。

　　接着，获取JS文本。

JS交互

- (void)getJS {

    NSString * js = @"window.webkit.messageHandlers.observe.postMessage(document.body.innerText);" ;// 注意这里的observe字段是自己写的，不是固定的写法，参考第6行

    WKUserScript *wkUserScript = [[WKUserScript alloc]initWithSource:js injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];// 这里的 AtDocumentEnd 字段是指网页中的内容加载完毕后再插入 JS 脚本，你也可以选择 AtDocumentStart，在 document element 刚刚创建时就插入脚本，看具体需求

    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init];

    [config.userContentController addUserScript:wkUserScript];

    [config.userContentController addScriptMessageHandler:self name:@"observe"];

   // config.userContentController.addScriptMessageHandler(self, name: "observe") // 对应第一行 JS 脚本中的observe字段

    //初始化WKWebView

    self.webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) configuration:config];

    [self.view addSubview:_webView];

    self.webView.navigationDelegate = self;

    //加载网页

    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.jianshu.com"]]];

    //_webView.loadRequest(NSURLRequest(URL: NSURL(string: "http://www.jianshu.com")!))

}

　　然后，实现这两个协议的方法。

常用代理方法

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{

    NSString *str = message.body ;// 因为我们抓取到的是文本，这里把 message.body 强制转换为 NSString，如果你通过 JS 拿到的是其他信息，按需转换

    NSLog(@"%@",str);

}

#pragma mark - 准备加载页面

- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {

}

#pragma mark - 已开始加载页面，可以在这一步向view中添加一个过渡动画

- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation {   

}

#pragma mark - //加载页面失败

- (void)webView:(WKWebView *)webView didFailNavigation:(WKNavigation *)navigation withError:(NSError *)error {   

}

- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error {   

}

　　最后，运行即可。

　　现在我们可以谈谈这两个控件的区别。

　　WKWebView 更快（占用内存可能只有 UIWebView 的1/3~1/4），没有缓存，更为细致地拆分了 UIWebViewDelegate 中的方法。
想要了解更多关于 WKWebView 的特性的，可以自行 Google，这里你可以简单地把它当做是轻量级的 UIWebView。

　　从现在开始，再开发 App 只兼容 ios 8 和 iOS 9 两个版本就可以了（如果你的产品对覆盖率要求不是很苛刻的话）。WKWebView 是 iOS 8 之后才有的 WebKit 中的内容，所以之前我们要同时兼容 iOS 7 和 iOS 8 的时候，可以推辞说 UIWebView 和 WKWebView 一起做太麻烦了，现在可没有理由拒绝新东西了。
　　

　　在 WKWebView 中，UIWebViewDelegate 与 UIWebView 被重构成了14类与3个协议，下面给出一些在 UIWebView 中常用的方法的 WKWebView 版本。

//准备加载页面
UIWebViewDelegate - webView:shouldStartLoadWithRequest:navigationType
WKNavigationDelegate - webView:didStartProvisionalNavigation:

//已开始加载页面，可以在这一步向view中添加一个过渡动画

UIWebViewDelegate - webViewDidStartLoad:

WKNavigationDelegate - webView:didCommitNavigation:

//页面已全部加载，可以在这一步把过渡动画去掉
UIWebViewDelegate - webViewDidFinishLoad:
WKNavigationDelegate - webView:didFinishNavigation:

//加载页面失败
UIWebViewDelegate - webView:didFailLoadWithError:
WKNavigationDelegate - webView:didFailNavigation:withError:
WKNavigationDelegate - webView:didFailProvisionalNavigation:withError:

以上方法分别存在于 UIWebViewDelegate 和 WKNavigationDelegate 中。
如果你之前只是用到了以上列出的 UIWebViewDelegate 中的几个方法，那么只是简单地换一个方法名，让你的 ViewController 继承 WKNavigationDelegate ，继续用就可以了。想要更多内容可以自己用 cmd键+鼠标左击『WKNavigationDelegate』通过 Xcode 查看。
要注意的是 webview.delegate = self 需要改写为 webview.navigationDelegate = self。