简单说说iOS之WKWebView的用法

栏目: IOS · 发布时间: 5年前

内容简介:(2)onClick为JS事件,当JS想给OC传递参数时,采用如下代码:window.webkit.messageHandlers.<方法名>.postMessage(数据)4.OC获取JS alert内容(WKUIDelegate处理警告、输入、以及确认,这里只列举了alert。输入和确认就不一一列举了,分别是JS端confirm和prompt函数触发)当调用JS端alert函数时:通过如下代理获取alert内容

(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">Github主页</a> :截获URL调用OC</p>

<p style="text-align:center"> <a href="http://192.168.0.116/monkey/iOS-URNetworking/commits/master">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];
    }
    
}
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

编程珠玑(第2版•修订版)

编程珠玑(第2版•修订版)

[美] Jon Bentley 乔恩•本特利 / 黄倩、钱丽艳 / 人民邮电出版社 / 2014-12 / 39

历史上最伟大的计算机科学著作之一 融深邃思想、实战技术与趣味轶事于一炉的奇书 带你真正领略计算机科学之美 多年以来,当程序员们推选出最心爱的计算机图书时,《编程珠玑》总是位于前列。正如自然界里珍珠出自细沙对牡蛎的磨砺,计算机科学大师Jon Bentley以其独有的洞察力和创造力,从磨砺程序员的实际问题中凝结出一篇篇不朽的编程“珠玑”,成为世界计算机界名刊《ACM通讯》历史上最受欢......一起来看看 《编程珠玑(第2版•修订版)》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具