一、WKWebView简介
UIWebView自iOS2就有,WKWebView从iOS8才有,毫无疑问WKWebView将逐步取代笨重的UIWebView。通过简单的测试即可发现UIWebView占用过多内存,且内存峰值更是夸张。WKWebView网页加载速度也有提升,但是并不像内存那样提升那么多。下面列举一些其它的优势:
1、更多的支持HTML5的特性
2、官方宣称的高达60fps的滚动刷新率以及内置手势
3、Safari相同的JavaScript引擎,且允许JavaScript的Nitro库加载并使用(UIWebView中限制);
4、将UIWebViewDelegate与UIWebView拆分成了14类与3个协议(官方文档说明)
5、占用更少的内存,在性能、稳定性、功能方面有很大提升(最直观的体现就是加载网页是占用的内存,模拟器加载百度与开源中国网站时,WKWebView占用23M,而UIWebView占用85M);
另外用的比较多的,增加加载进度属性:estimatedProgress
二、WKWebView初始化
1. 首先需要引入WebKit库
import <WebKit/WebKit.h>
2. 初始化方法分为以下两种
// 默认初始化
- (instancetype)initWithFrame:(CGRect)frame;
// 根据对webview的相关配置,进行初始化
- (instancetype)initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration *)configuration NS_DESIGNATED_INITIALIZER;
示例代码:
- (WKWebView *)webView {
if (_webView) {
return _webView;
}
WKUserContentController *userContentController = [[WKUserContentController alloc] init];
[userContentController addScriptMessageHandler:[[WKWeakScriptMessageDelegate alloc] initWithDelegate:self] name:@"jsCallOC"];
WKWebViewConfiguration* webViewConfig = [[WKWebViewConfiguration alloc] init];
webViewConfig.userContentController = userContentController;
webViewConfig.processPool = [[self cookieManager] sharedProcessPool];
webViewConfig.allowsInlineMediaPlayback = true;
_webView = [[WKWebView alloc] initWithFrame:CGRectMake(0,
CGRectGetHeight(self.iTopBar.frame),
self.view.bounds.size.width,
(self.view.bounds.size.height - CGRectGetHeight(self.iTopBar.frame))) configuration:webViewConfig];
_webView.backgroundColor = [UIColor whiteColor];
_webView.scrollView.backgroundColor = [UIColor blackColor];
_webView.opaque = NO;
_webView.scrollView.showsHorizontalScrollIndicator = NO;
_webView.scrollView.showsVerticalScrollIndicator = NO;
_webView.opaque = NO;
_webView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
_webView.scrollView.bounces = !self.disableBounces;
_webView.UIDelegate = self;
_webView.navigationDelegate = self;
return _webView;
}
其中:
WKWebViewConfiguration 用来添加WKWebView的一些配置信息,包括交互的userContentController,进程池processPool及一些其他的属性
WKUserContentController 这个类主要用处理JavaScript向webview发送消息的交互,addScriptMessageHandler方法注册了一个名为jsCallOC的方法用来和H5进行交互,具体的交互的方法名可以两端统一即可
webViewConfig.allowsInlineMediaPlayback = YES;这个属性是支持视频页面内播放,这里注意下,不设置这个属性会导致页面内的视频都是打开视频播放器全屏播放的,使用UIWebview时候没有这个问题,所以提醒大家在使用WKWebview时候注意一下
3. 加载网页与HTML代码的方式与UIWebView相同,代码如下:
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];
[self.view addSubview:webView];
三、属性介绍
WKBackForwardList:之前访问过的 web页面的列表,可以通过后退和前进动作来访问到。
WKBackForwardListItem: webview中后退列表里的某一个网页。
WKFrameInfo: 包含一个网页的布局信息。
WKNavigation: 包含一个网页的加载进度信息。
WKNavigationAction:包含可能让网页导航变化的信息,用于判断是否做出导航变化。
WKNavigationResponse:包含可能让网页导航变化的返回内容信息,用于判断是否做出导航变化。
WKPreferences: 概括一个 webview 的偏好设置。
WKProcessPool: 表示一个 web 内容加载池。
WKUserContentController: 提供使用 JavaScript post 信息和注射 script 的方法。
WKScriptMessage: 包含网页发出的信息。
WKUserScript:表示可以被网页接受的用户脚本。
WKWebViewConfiguration: 初始化 webview 的设置。
WKWindowFeatures: 指定加载新网页时的窗口属性。
WKNavigationDelegate: 提供了追踪主窗口网页加载过程和判断主窗口和子窗口是否进行页面加载新页面的相关方法。
WKScriptMessageHandler: 提供从网页中收消息的回调方法。
WKUIDelegate: 提供用原生控件显示网页的方法回调。
四、WKWebView代理
WKWebView有两个delegate,WKUIDelegate 和 WKNavigationDelegate。WKNavigationDelegate主要处理一些跳转、加载处理操作,WKUIDelegate主要处理JS脚本,确认框,警告框等。因此WKNavigationDelegate更加常用。
1. WKNavigationDelegate
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{
}
页面跳转的代理方法有三种,分为(收到跳转与决定是否跳转两种)
/** 请求服务器发生错误 (如果是goBack时,当前页面也会回调这个方法,原因是NSURLErrorCancelled取消加载) */
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error{
}
/** 在收到响应后,决定是否跳转 */
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler{
NSLog(@"%@",navigationResponse.response.URL.absoluteString);
//允许跳转
decisionHandler(WKNavigationResponsePolicyAllow);
//不允许跳转
//decisionHandler(WKNavigationResponsePolicyCancel);
}
/** 接收到服务器跳转请求即服务重定向时之后调用 */
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation{
}
/** 收到服务器响应后,在发送请求之前,决定是否跳转 */
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
NSLog(@"%@",navigationAction.request.URL.absoluteString);
//允许跳转
decisionHandler(WKNavigationActionPolicyAllow);
//不允许跳转
//decisionHandler(WKNavigationActionPolicyCancel);
}
其中
decidePolicyForNavigationAction 相当于uiwebview的shouldStartLoadWithRequest方法,在这个方法里可以对页面跳转进行拦截处理,
decisionHandler(WKNavigationActionPolicyAllow) 是允许跳转,
decisionHandler(WKNavigationActionPolicyCancel) 是取消跳转,注意当处理情况比较多时候执行完decisionHandler()这个回调后要加上return,否则会引起崩溃。
2. WKUIDelegate
WKUIDelegate主要处理JS脚本,确认框,警告框等。
#pragma mark - WKUIDelegate
/** 解决点击内部链接没有反应问题 */
- (WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures{
if (!navigationAction.targetFrame.isMainFrame) {
[webView loadRequest:navigationAction.request];
}
return nil;
}
/* 输入框 */
- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * __nullable result))completionHandler{
completionHandler(@"http");
}
/* 确认框 */
- (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler{
completionHandler(YES);
}
/* 警告框
* web界面中有弹出警告框时调用
* @param webView 实现该代理的webview
* @param message 警告框中的内容
* @param completionHandler 警告框消失调用
*/
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
NSLog(@"%@",message);
completionHandler();
}
这里注意下,在使用WKWebview时发现有些三方播放页面点击链接不跳转的问题,查阅相关资料后发现,用户点击网页上的链接,需要打开新页面时,将先调用decidePolicyForNavigationAction方法,其中的WKNavigationAction有两个属性sourceFrame和targetFrame,类型是WKFrameInfo,WKFrameInfo的mainFrame属性标记着这个frame是在主frame里还是新开一个frame。
如果 targetFrame的mainFrame属性为NO,将会新开一个页面,WKWebView遇到这种情况,将会调用它的 WKUIDelegate代理中的createWebViewWithConfiguration方法,所以如果我们不实现这个协议就会出现点击无反应的情况,因此对于这种情况需要特殊处理,可以采取下边的方法:
-(WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures {
if (!navigationAction.targetFrame.isMainFrame) {
[webView loadRequest:navigationAction.request];
}
return nil;
}
这个相当于放弃原来页面直接打开新的页面。
3. WKScriptMessageHandler
这个协议中包含一个必须实现的方法,这个方法是提高App与web端交互的关键,它可以直接将接收到的JS脚本转为OC或Swift对象。(当然,在UIWebView也可以通过“曲线救国”的方式与web进行交互,著名的Cordova框架就是这种机制)
// 从web界面中接收到一个脚本时调用
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;
4、WKWebView加载JS
// 图片缩放的js代码
NSString *js = @"var count = document.images.length;for (var i = 0; i < count; i++) {var image = document.images[i];image.style.width=320;};window.alert('找到' + count + '张图');";
// 根据JS字符串初始化WKUserScript对象
WKUserScript *script = [[WKUserScript alloc] initWithSource:js injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
// 根据生成的WKUserScript对象,初始化WKWebViewConfiguration
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
[config.userContentController addUserScript:script];
_webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
[_webView loadHTMLString:@"<head></head>![](https://img.haomeiwen.com/i1204112/3c87ed90109ff19f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)"baseURL:nil];
[self.view addSubview:_webView];
五、WKWebview交互操作
1、 注册UserAgent
如果需要⾃定义UA的话WKWebview注册UA时应该区分iOS9以下和iOS9以上分开设置,对于系统 >=iOS9.0的可采⽤:
[webView evaluateJavaScript:@"navigator.userAgent" completionHandler:^(id obj, NSError *error) {
if([obj isKindOfClass:[NSString class]]){
NSString * userAgent = obj;
if(![userAgent containsString:@"customUA"]){
userAgent = [userAgent stringByAppendingString:@"customUA"];
}
[[NSUserDefaults standardUserDefaults] registerDefaults:@{ @"UserAgent": userAgent OR @""}];
[[NSUserDefaults standardUserDefaults] setObject:userAgent forKey:uaKey];
self.webView.customUserAgent = userAgent;
}
}];
对于iOS8系统使用下边方法:
[self.webView setValue: userAgent forKey:@"applicationNameForUserAgent"];
否则在ios8系统上会引起崩溃
补充知识点
NSURLRequest的缓存策略
typedef NS_ENUM(NSUInteger, NSURLRequestCachePolicy)
{
NSURLRequestUseProtocolCachePolicy = 0, // 默认策略
NSURLRequestReloadIgnoringLocalCacheData = 1, // 忽略本地缓存,直接从后台请求数据
NSURLRequestReloadIgnoringLocalAndRemoteCacheData = 4, // 系统未实现,忽略本地缓存数据、代理和其他中介的缓存,直接从后台请求数据
NSURLRequestReturnCacheDataElseLoad = 2, // 只有在cache中不存在data时才从原始地址下载
NSURLRequestReturnCacheDataDontLoad = 3, // 只从本地拿数据,如果不存在本地缓存,请求失败
NSURLRequestReloadRevalidatingCacheData = 5, // 验证本地数据与远程数据是否相同,如果不同则下载远程数据,否则使用本地数据
};
image
默认策略NSURLRequestUseProtocolCachePolicy:如果一个NSCachedURLResponse对于请求并不存在,则直接从源端取数据。如果请求拥有一个缓存的响应,那么URL加载系统会检查这个响应来决定,如内容必须重新验证的话,将建立一个连向源端的连接来查看内容是否发生变化。假如内容没有变化,那么响应就从本地缓存返回数据。如果内容变化了,那么数据将从源端获取。
- 对于缓存的响应过期或者需要重新验证的情况,可以通过HTTP中请求和响应头来判断:
a. Cache-Control
如响应头部包括的Cache-Control,服务器需要根据Cache-Control这个响应头来指定缓存策略,Cache-Control的选项中no-store的优先级最高,其他值可以相互组合,public表示响应可被任何缓存区缓存;private内容仅客户端可以缓存;no-cache不能缓存;must-revalidation如果缓存失效必须发送head到服务器进行验证;max-age可以接收生存期不大于指定时间(以秒为单位)的资源;min-fresh可以接收响应时间小于指定时间内更新过的资源;max-stale可以接收超出时限的资源
b. Expires
表示缓存存在时间,允许客户端在这个时间之前不去发请求
imagec. Last-Modified与If-Modified-Since
Last-Modified表示资源最后修改时间,发送请求时app会向服务端发送If-Modified-Since,服务器接收到带有该请求头的请求时,将该时间与服务端最后修改时间比较,如果一致,则直接返回304状态码,客户端直接使用本地的缓存。否则返回200和修改后的资源和新的时间。
d. Etag与If-None-Match
这两个值主要从来标识资源是否更新,如果资源过期且有Etag标识时,请求时将其作为If-None-Match带上,服务端收到后进行对比校验,一致则返回304,客户端使用本地缓存,不一致则返回资源。
2、 cookie缓存
因为WKWebview不会像UIWebview那样每次在请求之前会将NSHTTPCookieStorage里面的cookie自动添加到请求中,所以应采用将cookie通过js注入到WKWebview中的方法,我采用了使用同一个processPool的方法,创建了两个WKWebView,其中的一个用来加载h5,另一个专门用来加载cookie,解决了WKWebview缓存cookie的问题。
由于UIWebview的Cookie是由NSHTTPCookieStorage管理的,NSHTTPCookieStorage是一个单例可以管理整个项目的Cookie,在请求时候会自动带上上次保存的Cookie,但是WKWebview的Cookie信息并不存储在NSHTTPCookieStorage中,是由WKProcessPool管理的,所以对于多个WKWebview之间可以通过将WKProcessPool单例化来解决Cookie共享的问题。
设置cookie可在第一次请求host时使用一个cookieWebview来加载并设置好cookie,然后再使用self.webview来继续加载url,self.webview与cookieWebview共用单例sharedProcessPool,因此可以解决WKWebview种cookie的问题。
为方便管理可以使用WKWebViewCookieManager来单独实现cookie的逻辑:
- (void)setCookieWithUrl:(NSURL *)url {
NSString *host = [url host];
if (!self.webviewCookie.length) {
[self requestWKWebviewCookie];
return;
}
if ([self.cookieURLs containsObject:host]) {
return;
}
[self.cookieURLs addObject:host];
WKUserScript *wkcookieScript = [[WKUserScript alloc] initWithSource:self.webviewCookie
injectionTime:WKUserScriptInjectionTimeAtDocumentStart
forMainFrameOnly:NO];
[self.cookieWebview.configuration.userContentController addUserScript:wkcookieScript];
NSString *baseWebUrl = [NSString stringWithFormat:@"%@://%@", url.scheme, url.host];
[self.cookieWebview loadHTMLString:@"" baseURL:[NSURL URLWithString:baseWebUrl]];
}
- (WKWebView *)cookieWebview {
if (!_cookieWebview) {
WKUserContentController *userContentController = WKUserContentController.new;
WKWebViewConfiguration* webViewConfig = WKWebViewConfiguration.new;
webViewConfig.userContentController = userContentController;
webViewConfig.processPool = [self sharedProcessPool];
_cookieWebview = [[WKWebView alloc] initWithFrame:CGRectZero configuration:webViewConfig];
_cookieWebview.UIDelegate = self;
_cookieWebview.navigationDelegate = self;
}
return _cookieWebview;
}
3、 iOS与H5的交互
- js与OC交互
js向OC传值的方法有两种,
(第一种) 通过拦截url,可以通过拦截url中的字段来进行处理,有些情况下通过url传参数比较方便,可以及时处理参数减少打开h5页面的延迟,但是需要视具体业务逻辑来处理,有的可能通过url传参数无法兼容老的版本或者有其他的问题,这种情况则可以使用另一种方法处理。
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
NSURL *url = navigationAction.request.URL;
if ([url.scheme isEqualToString:@"sv"]) {
//do something。。。
decisionHandler(WKNavigationActionPolicyAllow);
return;
}else{
//do other things。。。
decisionHandler(WKNavigationActionPolicyAllow);
return;
}
}
(第二种) 使用WKScriptMessageHandler代理方法,通过和js约定好调用方法,在创建webview时候监听jsCallOC方法:
//注册方法名
[userContentController addScriptMessageHandler:[[WKWeakScriptMessageDelegate alloc] initWithDelegate:self] name:@"jsCallOC"];
- (void)userContentController:(WKUserContentController *)userContentController
didReceiveScriptMessage:(WKScriptMessage *)message {
NSLog(@"[WebView] : H5对客户端发起调用 name : %@, body : %@", message.name, message.body);
//找到指定的方法名做事
if([message.name isEqualToString:@"jsCallOC"] && [message.body isKindOfClass:[NSString class]]){
NSDictionary *result = [message.body JSONDictionary];
NSString *value = [result stringOrEmptyStringForKey:@"value"];//value为h5传过来的值
//do something。。。
}
}
js端调用方法为如下,注意传值时候的JSON格式处理,处理不正确会出现传值失败无法调用成功的问题
window.webkit&&window.webkit.messageHandlers.jsCallOC.postMessage(JSON.stringify(data));
- OC与js交互
OC调用js的方法就比较简单如下
NSString * OCCallJs = [NSString stringWithFormat:@"OCCallJs('%@')", value];//注意调用js方法传参数要加上单引号!!!
[self.webView evaluateJavaScript:OCCallJs completionHandler:^(id result, NSError *error) {
}];
六、WKWebView使用过程中的坑
1、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];
2、WKWebView加载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。
3、WKWebView和JavaScript交互
WKWebView 初始化时,有一个参数叫configuration,它是WKWebViewConfiguration类型的参数,
而WKWebViewConfiguration有一个属性叫userContentController,
它又是WKUserContentController类型的参数。
WKUserContentController对象有一个方法- addScriptMessageHandler:name:,
我把这个功能简称为MessageHandler。
- addScriptMessageHandler:name:有两个参数,
第一个参数是userContentController的代理对象,第二个参数是JS里发送postMessage的对象。
所以要使用MessageHandler功能,就必须要实现WKScriptMessageHandler协议。
我们在该API的描述里可以看到在JS中的使用方法:
window.webkit.messageHandlers.<name>.postMessage(<messageBody>)
//其中<name>,就是上面方法里的第二个参数`name`。
//例如我们调用API的时候第二个参数填@"Share",那么在JS里就是:
//window.webkit.messageHandlers.Share.postMessage(<messageBody>)
//<messageBody>是一个键值对,键是body,值可以有多种类型的参数。
// 在`WKScriptMessageHandler`协议中,我们可以看到mssage是`WKScriptMessage`类型,有一个属性叫body。
// 而注释里写明了body 的类型:
Allowed types are NSNumber, NSString, NSDate, NSArray, NSDictionary, and NSNull.
WKWebView和JavaScript交互,在WKUserContentController.h这个头文件中- (void)addScriptMessageHandler:(id )scriptMessageHandler name:(NSString *)name;这个方法的注释中已经明确给出了交互办法。使用起来倒是非常的简单。创建WKWebView的时候添加交互对象,并让交互对象实现WKScriptMessageHandler中的唯一的一个代理方法。具体的方式参考Demo中的使用。
// 添加交互对象
[config.userContentController addScriptMessageHandler:(id)self.ocjsHelper name:@"timefor"];
// 代理方法
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;
JavaScript调用Objective-C的时候,使用window.webkit.messageHandlers.timefor.postMessage({code: '200', message: 'success'}); Objective-C自动对交互参数包装成了WKScriptMessage对象,其属性body则为传送过来的参数,name为添加交互对象的时候设置的名字,以此名字可以过滤掉不属于自己的交互方法。其中body可以为NSNumber, NSString, NSDate, NSArray, NSDictionary, and NSNull。
而Objective-C在回调JavaScript的时候,JavaScript传过来一个匿名函数,Objective-C这边直接调用一下就完事。WKWebView没有办法传过来一个匿名函数,所以回调方式,要么执行一段JavaScript代码,或者就是调用JavaScript那边的一个全局函数。一般是采用后者,至于Web端虽说暴露了一个全局函数,同样可以把这一点代码处理的很优雅。Objective-C传给JavaScript的参数,可以为Number, String, 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中
}];
网友评论