简单说说iOS之WKWebView的用法小结
作者:小科科
iOS8.0之后我们使用 WebKit框架中的WKWebView来加载网页。这篇文章主要介绍了简单说说iOS之WKWebView的用法小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
WKWebView的优势
- 性能高,稳定性好,占用的内存比较小,
- 支持JS交互
- 支持HTML5 新特性
- 可以添加进度条(不好用,还是习惯第三方的)。
- 支持内建手势,
- 据说高达60fps的刷新频率(不卡)
1.Xcode新建My.html文件,自定义html内容,主要代码如下:
(1)标签为UI样式(写了简单的JS代码,目的用于讲解交互)
(2)onClick为JS事件,当JS想给OC传递参数时,采用如下代码:window.webkit.messageHandlers.<方法名>.postMessage(数据)
<h1 style="text-align:center;background-color: #e6b500;wdith:100px;height:40px">欢迎来到JS世界</h1> <p style="text-align:center"> <a href="github://callName_?https://github.com/wslcmk" rel="external nofollow" >Github主页</a> :截获URL调用OC</p> <p style="text-align:center"> <a href="http://192.168.0.116/monkey/iOS-URNetworking/commits/master" rel="external nofollow" >GitLab主页</a> </p> <p style="text-align:center"> <button id="btn1" type = "button" onclick = "jsToOcFunctionOne()" > JS调用OC->不带参数 </button> </p> <p style="text-align:center"> <button id="btn2" type = "button" onclick = "jsToOcFunctionTwo()"> JS调用OC->带参数 </button> </p> <p style="text-align:center"> <button id="btn3" type = "button" onclick = "showAlert()" > oc捕获到html的弹出框 </button> </p> <!-- JS语法--> <script type = "text/javascript"> function jsToOcFunctionOne() { window.webkit.messageHandlers.jsToOcNoPrams.postMessage({}); } function jsToOcFunctionTwo() { window.webkit.messageHandlers.jsToOcWithPrams.postMessage({"params":"我是JS参数"}); } function showAlert() { alert("我来自JS世界,被你发现了"); } //改变背景色 function changeBgColor() { document.body.style.backgroundColor = randomColor(); }
2.KVO实现加载进度条以及标题
// KVO:获取进度并显示 获取标题并显示 [self.webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil]; [self.webView addObserver:self forKeyPath:@"title" options:NSKeyValueObservingOptionNew context:nil]; #pragma mark - KVO - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context { if ([keyPath isEqualToString:@"title"]&&object == _webView) { self.title = _webView.title; }else if ([keyPath isEqualToString:@"estimatedProgress"] && object == _webView) { self.progressView.progress = _webView.estimatedProgress; if (_webView.estimatedProgress >= 1.0f) { dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ self.progressView.progress = 0; }); } } }
3.通过拦截url方式,JS调用OC代码,决定是否跳转(WKNavigationDelegate)
#pragma mark -- WKNavigationDelegate WKNavigationDelegate主要处理一些跳转、加载处理操作 // 根据WebView对于即将跳转的HTTP请求头信息和相关信息来决定是否跳转 - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler { NSString * urlStr = navigationAction.request.URL.absoluteString; NSLog(@"发送跳转请求:%@",urlStr); //自己定义的协议头 NSString *htmlHeadString = @"github://"; if([urlStr hasPrefix:htmlHeadString]){ UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"通过截取URL调用OC" message:@"前往Github?" preferredStyle:UIAlertControllerStyleAlert]; [alertController addAction:([UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) { }])]; [alertController addAction:([UIAlertAction actionWithTitle:@"打开" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) { NSURL * url = [NSURL URLWithString:[urlStr stringByReplacingOccurrencesOfString:@"github://callName_?" withString:@""]]; [[UIApplication sharedApplication]canOpenURL:url]; }])]; [self presentViewController:alertController animated:YES completion:nil]; decisionHandler(WKNavigationActionPolicyCancel); }else{ decisionHandler(WKNavigationActionPolicyAllow); } }
4.OC获取JS alert内容(WKUIDelegate处理警告、输入、以及确认,这里只列举了alert。输入和确认就不一一列举了,分别是JS端confirm和prompt函数触发)
当调用JS端alert函数时:通过如下获取alert内容
#pragma mark -- WKUIDelegate WKUIDelegate主要处理JS脚本,确认框,警告框等 - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler { UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"JS-alert-Action" message:message?:@"" preferredStyle:UIAlertControllerStyleAlert]; [alertController addAction:([UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) { completionHandler(); }])]; [self presentViewController:alertController animated:YES completion:nil]; }
5.OC调用JS代码,实现改变JS页面颜色(通过evaluateJavaScript函数、jsString为JS端方法名)
#pragma mark -navigationItem Action - (void)ocToJs { // changeColor()是JS方法名 NSString *jsString = [NSString stringWithFormat:@"changeBgColor()"]; [_webView evaluateJavaScript:jsString completionHandler:^(id _Nullable data, NSError * _Nullable error) { }]; }
6.通过接受JS方法名捕捉方法(带参数和不带参数,JS端向IOS传递参数,采用window.webkit.messageHandlers.<方法名>.postMessage(数据))
(1)需要引入WKUserContentController、主要代码如下
//创建网页配置对象 WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init]; WKUserContentController * wkUController = [[WKUserContentController alloc] init]; //注册一个name为jsToOcNoPrams的js方法 设置处理接收JS方法的对象 [wkUController addScriptMessageHandler:self name:@"jsToOcNoPrams"]; [wkUController addScriptMessageHandler:self name:@"jsToOcWithPrams"]; config.userContentController = wkUController;
(2)核心代码
#pragma mark - 通过接收JS传出消息的name进行捕捉的回调方法 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{ NSLog(@"name:%@\\\\n body:%@\\\\n frameInfo:%@\\\\n",message.name,message.body,message.frameInfo); //用message.body获得JS传出的参数体 NSDictionary * parameter = message.body; //JS调用OC if([message.name isEqualToString:@"jsToOcNoPrams"]){ UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"js调用到了oc" message:@"不带参数" preferredStyle:UIAlertControllerStyleAlert]; [alertController addAction:([UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) { }])]; [self presentViewController:alertController animated:YES completion:nil]; }else if([message.name isEqualToString:@"jsToOcWithPrams"]){ UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"js调用到了oc" message:parameter[@"params"] preferredStyle:UIAlertControllerStyleAlert]; [alertController addAction:([UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) { }])]; [self presentViewController:alertController animated:YES completion:nil]; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。