[关闭]
@xifenglang-33250 2017-01-07T00:49:27.000000Z 字数 12714 阅读 5828

WKWebView使用小结

最近公司开发Web APP,绝大部分界面都是Web网页，所以用WKWebView加载网页，由于Web端的兄弟也是半桶水，结果和他踩了不少坑。在此对WKWebView的使用做些小结，填些踩过的坑。

目录

配置WKWebView [↑↑目录]

对WKWebView就不细说了，有兴趣可以看看末尾的参考文献

  1.     /// 偏好设置,涉及JS交互
  2.     WKWebViewConfiguration * configuration = [[WKWebViewConfiguration alloc] init];
  3.     configuration.preferences = [[WKPreferences alloc]init];
  4.     configuration.preferences.javaScriptEnabled = YES;
  5.     configuration.preferences.javaScriptCanOpenWindowsAutomatically = NO;
  6.     configuration.processPool = [[WKProcessPool alloc]init];
  7.     configuration.allowsInlineMediaPlayback = YES;
  8. //    if (iOS9()) {
  9. //        /// 缓存机制(未研究)
  10. //        configuration.websiteDataStore = [WKWebsiteDataStore defaultDataStore];
  11. //    }
  12.     configuration.userContentController = [[WKUserContentController alloc] init];
  14.     WKWebView * webView = [[WKWebView alloc]initWithFrame:JKMainScreen configuration:configuration];
  16.     /// 侧滑返回上一页，侧滑返回不会加载新的数据，选择性开启
  17.     self.webView.allowsBackForwardNavigationGestures = YES;
  18.     /// 在这个代理相应的协议方法可以监听加载网页的周期和结果
  19.     self.webView.navigationDelegate = self;
  20.     /// 这个代理对应的协议方法常用来显示弹窗
  21.     self.webView.UIDelegate = self;
  24.     /// 如果涉及到JS交互，比如Web通过JS调iOS native，最好在[webView loadRequest:]前注入JS对象，详细代码见文章后半部分代码。
  25.     self.jsBridge = [[JSBridge alloc]initWithUserContentController:configuration.userContentController];
  26.     self.jsBridge.webView = webView;
  27.     self.jsBridge.webViewController = self;

利用KVO实现进度条 [↑↑目录]

KVO能监听加载进度，也能监听当前Url的Title。

  1.     UIProgressView *progressView = [[UIProgressView alloc] initWithProgressViewStyle:UIProgressViewStyleDefault];
  3.     [webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];
  5.     - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context {
  6.     if ([keyPath isEqualToString:@"estimatedProgress"]) {
  7.         if (object == self.webView) {
  8.             if (self.webView.estimatedProgress == 1.0) {
  9.                 self.progressView.progress = 1.0;
  10.                 [UIView animateWithDuration:0.2 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
  11.                     self.progressView.alpha = 0.0f;
  12.                 } completion:nil];
  13.             } else {
  14.                 self.progressView.progress = self.webView.estimatedProgress;
  15.             }
  16.         }
  17.     }
  19.     - (void)dealloc{
  20.     [self.webView removeObserver:self forKeyPath:@"estimatedProgress"];
  21. }
  22. }

WKNavigationDelegate协议，监听网页加载周期 [↑↑目录]

  2. /// 发送请求前决定是否跳转，并在此拦截拨打电话的URL
  3. - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
  5.     /// decisionHandler(WKNavigationActionPolicyCancel);不允许加载
  6.     /// decisionHandler(WKNavigationActionPolicyAllow);允许加载
  8.     decisionHandler(WKNavigationActionPolicyAllow);
  9. }
  12. /// 收到响应后决定是否跳转
  13. - (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler{
  14.     decisionHandler(WKNavigationResponsePolicyAllow);
  15. }
  18. /// 内容开始加载
  19. - (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation{
  20.     self.progressView.alpha = 1.0;
  21. }
  24. /// 加载完成
  25. - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
  27.     [self hideErrorView];
  28.     if (self.progressView.progress < 1.0) {
  29.         [UIView animateWithDuration:0.1 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
  30.             self.progressView.alpha = 0.0f;
  31.         } completion:nil];
  32.     }
  34.     /// 禁止长按弹窗，UIActionSheet样式弹窗
  35.     [webView evaluateJavaScript:@"document.documentElement.style.webkitTouchCallout='none';" completionHandler:nil];
  36.     /// 禁止长按弹窗，UIMenuController样式弹窗（效果不佳）
  37.     [webView evaluateJavaScript:@"document.documentElement.style.webkitUserSelect='none';" completionHandler:nil];
  38. }
  41. /// 加载失败
  42. - (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error{
  44.     if (error.code == NSURLErrorNotConnectedToInternet) {
  45.         [self showErrorView];
  46.         /// 无网络(APP第一次启动并且没有得到网络授权时可能也会报错)
  48.     } else if (error.code == NSURLErrorCancelled){
  49.     /// -999 上一页面还没加载完，就加载当下一页面，就会报这个错。
  50.         return;
  51.     }
  52.     JKLog(@"webView加载失败:error %@",error);
  53. }

WKUIDelegate协议，常用来显示UIAlertController弹窗 [↑↑目录]

  2. // 在JS端调用alert函数时(警告弹窗)，会触发此代理方法。
  3. // 通过completionHandler()回调JS
  4. - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
  5.     JKAlertManager * manager = [JKAlertManager alertWithPreferredStyle:UIAlertControllerStyleAlert title:@"提示" message:message];
  6.     [manager configueCancelTitle:nil destructiveIndex:JKAlertDestructiveIndexNone otherTitle:@"确定", nil];
  7.     [manager showAlertFromController:self actionBlock:^(JKAlertManager *tempAlertManager, NSInteger actionIndex, NSString *actionTitle) {
  8.         if (actionIndex != tempAlertManager.cancelIndex) {
  9.             completionHandler();
  10.         }
  11.     }];
  12. }
  15. // JS端调用confirm函数时(确认、取消式弹窗)，会触发此方法
  16. // completionHandler(true)返回结果
  17. - (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler{
  18.     JKAlertManager * manager = [JKAlertManager alertWithPreferredStyle:UIAlertControllerStyleAlert title:@"提示" message:message];
  19.     [manager configueCancelTitle:@"取消" destructiveIndex:JKAlertDestructiveIndexNone otherTitle:@"确定", nil];
  20.     [manager showAlertFromController:self actionBlock:^(JKAlertManager *tempAlertManager, NSInteger actionIndex, NSString *actionTitle) {
  21.         if (actionIndex != tempAlertManager.cancelIndex) {
  22.             completionHandler(YES);
  23.         }else{
  24.             completionHandler(NO);
  25.         }
  26.     }];
  27. }
  29. /// JS调用prompt函数(输入框)时回调，completionHandler回调结果
  30. - (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable))completionHandler{
  31.     JKAlertManager * manager = [JKAlertManager alertWithPreferredStyle:UIAlertControllerStyleAlert title:@"提示" message:prompt];
  32.     [manager configueCancelTitle:@"取消" destructiveIndex:JKAlertDestructiveIndexNone otherTitle:@"确定", nil];
  33.     [manager addTextFieldWithPlaceholder:defaultText secureTextEntry:NO ConfigurationHandler:^(UITextField * _Nonnull textField) {
  35.     } textFieldTextChanged:^(UITextField * _Nullable textField) {
  37.     }];
  38.     [manager showAlertFromController:self actionBlock:^(JKAlertManager * _Nullable tempAlertManager, NSInteger actionIndex, NSString * _Nullable actionTitle) {
  39.         completionHandler(tempAlertManager.textFields.firstObject.text);
  40.     }];
  41. }

JS交互实现流程 [↑↑目录]

如果用WKWebView，JS调iOS端必须使用window.webkit.messageHandlers.kJS_Name.postMessage(null),kJS_Name是iOS端提供的JS交互name,在注入JS交互Handler时用到:[userContentController addScriptMessageHandler:self name:kJS_Name]

下面有个HTML端的iOSCallJsAlert函数，里面会执行alert弹窗，并通过JS调iOS端（kJS_Name）

  1. function iOSCallJsAlert() {
  2.         alert('弹个窗，再调用iOS端的kJS_Name');
  3.         window.webkit.messageHandlers.kJS_Name.postMessage({body: 'paramters'});
  4. }

咱要实现在iOS端通过JS调用这个iOSCallJsAlert函数，并接受JS调iOS端的ScriptMessage。有以下主要代码：

首先添加JS交互的消息处理者（遵守WKScriptMessageHandler协议）以及JS_Name（一般由iOS端提供给Web端）。

  1. [WKUserContentController addScriptMessageHandler:JS_ScriptMessageReceiver name:JS_Name]

有添加就有移除，一般在ViewDidDisappear中移除，不然JS_ScriptMessageReceiver会被强引用而无法释放(内存泄露)，个人猜测是被WebKit里面某个单例强引用。

  1. [userContentController removeScriptMessageHandlerForName:JS_Name]

实现WKScriptMessageHandler协议方法，用来接收JS调iOS的消息。
WKScriptMessage.name即[WKUserContentController addScriptMessageHandler:JS_ScriptMessageReceiver name:JS_Name]中的JS_Name，可以区分不同的JS交互，message.body是传递的参数。

  1. - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
  2.     JKLog(@"JS调iOS  name : %@    body : %@",message.name,message.body);
  3. }

iOS端通过JS中的函数就简单多了，调用一个方法即可。
@"iOSCallJsAlert()"代表要调用的函数名，如果有参数就这样写@"iOSCallJsAlert('p1','p2')"

  1. [webView evaluateJavaScript:@"iOSCallJsAlert()" completionHandler:nil]

我之前是看了标哥的文章，讲的很细，不过现在找不到原文了，就找了个转载的文章，详见参考文献

JS交互 踩坑、填坑 [↑↑目录]

  1. [userContentController removeScriptMessageHandlerForName:JS_Name]

WebViewController.m

  1. /// JSBridge是封装的JS交互桥梁，遵守WKScriptMessageHandler协议
  2. - (void)reloadWebViewWithUrl:(NSString *)url{
  3.     // 先移除
  4.     [self.jsBridge removeAllUserScripts];
  5.     // 再注入
  6.     self.jsBridge.userScriptNames = @[kJS_Login,kJS_Logout,kJS_Alipay,kJS_WeiChatPay,kJS_Location];
  7.     // 再加载URL
  8.     self.urlStr = url;
  9.     [self.webView loadRequest:[[NSURLRequest alloc] initWithURL:self.urlStr.URL]];
  10. }
  12. - (void)viewDidDisappear:(BOOL)animated{
  13.     [super viewDidDisappear:animated];
  15.     /// 移除，避免JS_ScriptMessageReceiver被引用
  16.     [self.jsBridge removeAllUserScripts];
  17. }

JSBridge.m 实现WKScriptMessageHandler协议方法

  1. @interface JSBridge ()<WKScriptMessageHandler>
  3. @property (nonatomic, weak)WKUserContentController * userContentController;
  5. @end
  7. - (instancetype)initWithUserContentController:(WKUserContentController *)userContentController{
  8.     if (self = [super init]) {
  9.         _userContentController = userContentController;
  10.     }return self;
  11. }
  13. /// 注入JS MessageHandler和Name
  14. - (void)setUserScriptNames:(NSArray *)userScriptNames{
  15.     _userScriptNames = userScriptNames;
  16.     [userScriptNames enumerateObjectsUsingBlock:^(NSString * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
  17.         [self.userContentController addScriptMessageHandler:self name:obj];
  18.     }];
  19. }
  21. /// 移除JS MessageHandler
  22. - (void)removeAllUserScripts{
  23.     [self.userScriptNames enumerateObjectsUsingBlock:^(NSString * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
  24.         [self.userContentController removeScriptMessageHandlerForName:obj];
  25.     }];
  26.     self.userScriptNames = nil;
  27. }
  29. /// 接收JS调iOS的事件消息
  30. - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
  31.     JKLog(@"JS调iOS  name : %@    body : %@",message.name,message.body);
  32.     if ([message.name isEqualToString:kJS_Login]) {
  33.         /// 登录JS
  34.     } else if ([message.name isEqualToString:kJS_Logout]) {
  35.         /// 退出JS
  36.     }
  37. }
  38. @end
  1. -(WKWebView *)webView:(WKWebView *)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures {
  2.     if (!navigationAction.targetFrame.isMainFrame) {
  3.         [webView loadRequest:navigationAction.request];
  4.     }
  5.     return nil;
  6. }
  1. /// 发送请求前决定是否跳转，并在此拦截拨打电话的URL
  2. - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
  4.     /// <a href="tel:123456789">拨号</a>
  6.     if ([navigationAction.request.URL.scheme isEqualToString:@"tel"]) {
  7.         decisionHandler(WKNavigationActionPolicyCancel);
  9.         NSString * mutStr = [NSString stringWithFormat:@"telprompt://%@",navigationAction.request.URL.resourceSpecifier];
  10.         if ([[UIApplication sharedApplication] canOpenURL:mutStr.URL]) {
  11.             if (iOS10()) {
  12.                 [[UIApplication sharedApplication] openURL:mutStr.URL options:@{} completionHandler:^(BOOL success) {}];
  13.             } else {
  14.                 [[UIApplication sharedApplication] openURL:mutStr.URL];
  15.             }
  16.         }
  17.     } else {
  18.         decisionHandler(WKNavigationActionPolicyAllow);
  19.     }
  20. }
  1. [self.webView goBack];
  2. [self.webView loadRequest:[[NSURLRequest alloc] initWithURL:URL]];

原因是上一页面还没加载完，就加载当下一页面，会报-999错误。

  1. - (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error{
  3.      if (error.code == NSURLErrorCancelled){
  4.     /// -999 
  5.         return;
  6.     }
  7. }

解决方案是在执行goBack或reload或goToBackForwardListItem后延迟一会儿(0.5秒)再执行loadRequest。

  1. [self.webView goBack];
  2. /// 延迟加载新的url，否则报错-999
  3. [self excuteDelayTask:0.5 InMainQueue:^{
  4.       [self.webView loadRequest:[[NSURLRequest alloc] initWithURL:URL]];
  5. }];
  1. - (void)reloadWebViewWithUrl:(NSString *)url backToHomePage:(BOOL)backToHomePage{
  3.     void (^LoadWebViewBlock)() = ^() {
  4.         /// 每次加载新url前重新注入JS对象
  5.         [self.jsBridge removeAllUserScripts];
  6.         self.jsBridge.userScriptNames = @[kJS_Login,kJS_Logout,kJS_Alipay,kJS_WeiChatPay,kJS_Location];
  8.         self.urlStr = url;
  9.         [self.webView loadRequest:[[NSURLRequest alloc] initWithURL:self.urlStr.URL]];
  10.     };
  13.     if (self.webView.backForwardList.backList.count && backToHomePage) {
  14.         /// 返回首页再跳转,并且保留WKNavigation对象
  15.         self.gobackNavigation = [self.webView goToBackForwardListItem:self.webView.backForwardList.backList.firstObject];
  17.         /// 延迟加载新的url，否则报错-999
  18.         [self excuteDelayTask:0.5 InMainQueue:^{
  19.             LoadWebViewBlock();
  20.         }];
  21.     } else {
  22.         LoadWebViewBlock();
  23.     }
  24. }
  28. /// 根据self.gobackNavigation重载页面
  29. - (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
  31.     /// 之前的代码已省略
  32.     /// 新增下面的代码
  33.     if ([navigation isEqual:self.gobackNavigation] || !navigation) {
  34.         /// 重载刷新
  35.         [self.webView reload];
  36.         self.gobackNavigation = nil;
  37.     }
  38. }

参考文献

[↑↑目录]

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注