iOS-JS调用OC

最新推荐文章于 2021-10-20 17:29:00 发布

iMazy

最新推荐文章于 2021-10-20 17:29:00 发布

阅读量2k

点赞数

分类专栏： iOS 文章标签： javascript JS webview OC HTML

本文链接：https://blog.csdn.net/Mazy_ma/article/details/51895764

版权

iOS 专栏收录该内容

117 篇文章 3 订阅

订阅专栏

上次学习的是OC调用JS,通过OC的代码，操作JS的代码，对JS代码进行增删改查，以及调用JS的方法；今天，学习下JS调用OC。

上次对WebView进行简要的分析，今天就直接进主题，在iOS开发中，JS调用OC主要是通过下面这个函数来实现的：

#pragma mark - <UIWebViewDelegate>
/**
 * 通过这个方法完成JS调用OC
 */
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    // 获取请求数据 URL 数据
    NSString *str = request.URL.absoluteString;
    NSLog(@"URL-String = %@",str);
}

解析此函数：当webView开始请求数据的时候会调用此方法，并将请求参数传给我们，我们通过 “request.URL.absoluteString” 属性查看请求的URL地址；（JS内部可以自定义请求URL路径）
我们可以利用这个函数，获取请求行为，筛选行为并调用OC的方法。

当我浏览webView内部内容时，会打印请求路径，如下图：
这里写图片描述

自己在学习JS之前，先了解HTML一些基本便签，在HTML内部调用JS代码

HTML代码：

（CSS代码就不列出了，CSS只为布局，这里意义不大）

<body>
        <div id="name" align="center">
            <input id="userName" placeholder="亲输入用户名"/>
        </div>
        <div id="pwd" align="center">
            <input id="password" placeholder="请输入密码" type="password"/>
        </div>
        <div id="login" align="center">
            <button class="button">登录</button>
        </div>
        <br /><br /><br />
        <div align="center">
            <a href="http://www.baidu.com">百度一下</a>
        </div>
</body>

详解：这里通过HTML布局了一个简易的登录界面
界面内布局”百度一下”，一是：测试OC内的函数，获取请求URL参数
二是：证明这是个网页WebView，不是用OC实现的界面
界面效果如下：
这里写图片描述

JS代码：

<body>
        <!-- 调用 javascript -->
        <script type="text/javascript">
            <!-- 通过 id 获取输入框 -->
            var userName = document.getElementById('userName');
            var password = document.getElementById('password');
            <!-- 通过 id 获取按钮 -->
            var button   = document.getElementById('login');
            <!-- 给按钮的点击加方法 -->
            button.onclick = function(){
                <!-- 获取输入框内输入的值 -->
                var name = userName.value;
                var pwd  = password.value;
                if (!name | !pwd) {
                    alert('用户名或密码为空!');
                    return;
                }
                <!--
                href：Hypertext Reference的缩写。意思是超文本引用
                href 属性的值可以是任何有效文档的相对或绝对URL，包括片段标识符和JavaScript代码段。
                -->
                window.location.href = 'text://loginAction:pwd:' + '?' + name + '?' + pwd;
            }
        </script>

</body>

详解：这里通过调用JS，获取到网页内部的输入框及按钮，得到输入框内部输入值；并监听按钮的点击方法，在按钮的点击方法内部给予请求路径，并把输入框输入的值拼接到请求URL后面，这样，当按钮被点击时，OC内可以获取到此请求URL，判断URL的数据，调用OC的方法。

OC代码：

这里我是模拟登陆，当用户名和密码一样时，登陆成功（但二者都不能为空）；

#pragma mark - <UIWebViewDelegate>
/**
 * 通过这个方法完成JS调用OC
 * JS和OC交互的第三方框架：WebViewJavaScriptBridge
 */
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    // 获取请求数据 URL 数据
    NSString *str = request.URL.absoluteString;
    NSLog(@"requestURL-String = %@",str);
    // 获取 '标记符' 所在的区域
    NSRange range = [str rangeOfString:@"text://"];
    // 如果找到资源
    if (range.location != NSNotFound) {
        // 获取标记符后台的字符（方法名？用户名？密码）
        NSString *params = [str substringFromIndex:range.location + range.length];
        // 利用 ? 切割字符，获取每个参数
        NSArray *subStrings = [params componentsSeparatedByString:@"?"];
        // 第一个是方法名
        NSString *methodStr = subStrings.firstObject;
        // 第二个是用户名输入框内的数据
        NSString *userName = subStrings[1];
        // 第三个是密码输入框内的数据
        NSString *password = subStrings.lastObject;
        // 执行方法，并传入参数（用户名和密码）
        [self performSelector:NSSelectorFromString(methodStr) withObject:userName withObject:password];
    }
    return YES;
}

/**
 *  登陆方法
 *
 *  @param name 用户名
 *  @param pwd  密码
 */
-(void)loginAction:(NSString *)name pwd:(NSString *)pwd {
    // 这里模拟登陆，当用户名 == 密码时，登陆成功
    if (![name isEqualToString:pwd]) { // 用户名 != 密码，登陆失败，返回
        UIAlertController *alertVC = [UIAlertController alertControllerWithTitle:@"温馨提示" message:@"用户名或密码错误,请重新输入" preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction *cancel = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleCancel handler:nil];
        [alertVC addAction:cancel];
        [self presentViewController:alertVC animated:YES completion:nil];
        return;
    }

    // 登陆成功后，跳入下一个界面
    SuccessViewController *svc = [[SuccessViewController alloc] init];
    svc.userName = name;
    svc.password = pwd;
    [self presentViewController:svc animated:YES completion:nil];

}

详解：通过截取请求路径URL，判断请求行为，我这里的URL拼接的方法是’loginAction:pwd:’并传入两个参数（用户名和密码），通过调用[self performSelector:NSSelectorFromString(xxx) withObject:xxx withObject:xxx];这个方法，执行请求参数内部的方法字符串，和请求参数（注意：JS内部的方法名和OC内部需要被调用的方法名一定要保持一致，不然会出现未找到方法异常）；

这里是调用JS内部提示框：
这里写图片描述

这里是通过OC代码限制跳转：
这里写图片描述

当用户名和密码相同时，跳转下一个界面：
这里写图片描述

总结：这里成功获取webView内部输入框的数据，并调用webView内部按钮的点击事件，完成简易的登陆跳转功能；方法和原理很简单，一是通过JS设置按钮点击方法内部的属性，二是用到webView内部的一个代理方法，获取到按钮点击方法内部的请求数据，解析数据的结构，相应自己的方法！

iMazy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iOS-JS调用OC

上次学习的是OC调用JS,通过OC的代码，操作JS的代码，对JS代码进行增删改查，以及调用JS的方法；今天，学习下JS调用OC。上次对WebView进行简要的分析，今天就直接进主题，在iOS开发中，JS调用OC主要是通过下面这个函数来实现的：#pragma mark - <UIWebViewDelegate>/** * 通过这个方法完成JS调用OC */-(BOOL)webView:(UIW
复制链接

扫一扫