个人中心
gpt4 book ai didi

简单说说iOS之WKWebView的用法小结

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 29 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章简单说说iOS之WKWebView的用法小结由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

WKWebView的优势 。

  • 性能高，稳定性好，占用的内存比较小，
  • 支持JS交互
  • 支持HTML5 新特性
  • 可以添加进度条（然并卵，不好用，还是习惯第三方的）。
  • 支持内建手势，
  • 据说高达60fps的刷新频率（不卡）

1.Xcode新建My.html文件，自定义html内容，主要代码如下:

(1)标签为UI样式（写了简单的JS代码，目的用于讲解交互） 。

(2)onClick为JS事件，当JS想给OC传递参数时，采用如下代码：window.webkit.messageHandlers.<方法名>.postMessage(数据) 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
< 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实现加载进度条以及标题 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//  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代理） 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#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内容 。

?
1
2
3
4
5
6
7
8
#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端方法名） 。

?
1
2
3
4
5
6
7
8
9
#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、主要代码如下 。

?
1
2
3
4
5
6
7
//创建网页配置对象
     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）核心代码 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#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];
   } 
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：https://juejin.im/post/5c4e60b95188252449234a13 。

最后此篇关于简单说说iOS之WKWebView的用法小结的文章就讲到这里了,如果你想了解更多关于简单说说iOS之WKWebView的用法小结的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

29 4 0
文章推荐： iOS实现百度地图定位签到功能
文章推荐： iOS图片压缩、滤镜、剪切及渲染等详解
文章推荐： ios基础教程之常见的数组使用方法
文章推荐： iOS实现图片水印与简单封装示例代码
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com