http://www.sufeinet.com/plugin.php?id=keke_group

苏飞论坛

 找回密码
 马上注册

QQ登录

只需一步,快速开始

分布式系统框架(V2.0) 轻松承载百亿数据,千万流量!讨论专区 - 源码下载 - 官方教程

HttpHelper爬虫框架(V2.7-含.netcore) HttpHelper官方出品,爬虫框架讨论区 - 源码下载 - 在线测试和代码生成

HttpHelper爬虫类(V2.0) 开源的爬虫类,支持多种模式和属性 源码 - 代码生成器 - 讨论区 - 教程- 例子

查看: 4410|回复: 3

[语法] webView监听事件与JS交互

[复制链接]
发表于 2018-12-30 22:01:17 | 显示全部楼层 |阅读模式


在iOS应用的开发过程中,我们经常会使用到WebView,当我们对WebView进行操作的时候,有时会需要进行源生的操作


先说第一种方法,只是做拦截和跳转.


拦截跳转的URL,跳转源生界面
[Objective-C] 纯文本查看 复制代码
//UIWebViewDelegate
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    NSString *url = request.URL.absoluteString;
    if ([url rangeOfString:@"需要跳转源生界面的URL判断"].location != NSNotFound) {
        //跳转原生界面
        return NO;
    }
    return YES;
}


但这样会有问题,如果URL需要更换,这样就麻烦了。

下面介绍与JS交互

1.执行js代码

[Objective-C] 纯文本查看 复制代码
NSString *jsStr = @"执行的JS代码";
[webView stringByEvaluatingJavaScriptFromString:jsStr];


2.使用JavaScriptCore框架


[Objective-C] 纯文本查看 复制代码
#import <JavaScriptCore/JavaScriptCore.h>  


[Objective-C] 纯文本查看 复制代码
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    //获取webview中的JS内容
    JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    NSString *runJS = @"执行的JS代码";
    //准备执行的JS代码
    [context evaluateScript:runJS];
}


JS调用OC
当网页触发某种操作,可以给App传递消息.比如WebView中购买某样东西,点击购买,需要获取这件商品的订单信息,并且需要App进行源生的支付.
这种方法需要你和后台或者前端协商好一下,让他们在执行JS方法的时候,将你需要的数据放到你能拿到的位置.


下面简单贴一个HTML文件.


[Objective-C] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>App与WebView交互</title>
</head>
<body>
<button style="width: 100%; height: 100px;">点击购买</button>
</body>
<script>
    //按钮点击事件
    function buttonClick() {
        //传递的信息
        var jsonStr = '{"id":"666", "message":"我是传递的数据"}';

        //UIWebView使用
        getMessage(jsonStr);

       //WKWebView使用
       //使用下方方法,会报错,为使界面执行逻辑通畅,因此使用try-catch
        try {
            window.webkit.messageHandlers.getMessage.postMessage(jsonStr)
        } catch(error) {
            console.log(error)
        }
    }
    function getMessage(json){
        //空方法
    }
</script>
</html>


window.webkit.messageHandlers.<方法名>.postMessage(<数据>)
JS端写此方法的盆友可能会报错,导致界面逻辑无法进行,因此使用try-catch就好了.


我在网页上只写了一个按钮.点击按钮,会触发buttonClick()方法.


在网页加载完成的时候检测JS方法执行.


[Objective-C] 纯文本查看 复制代码
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    //核心方法如下
    JSContext *content = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    //此处的getMessage和JS方法中的getMessage名称一致.
    content[@"getMessage"] = ^() {
        NSArray *arguments = [JSContext currentArguments];
        for (JSValue *jsValue in arguments) {
            NSLog(@"=======%@",jsValue);
        }
    };
}


由上方方法,当JS方法getMessage()执行的时候,此方法回调的jsValue内容就是我们需要的内容.(HTML中JS传递的数据)



1. 开通SVIP会员,免费下载本站所有源码,不限次数据,不限时间
2. 加官方QQ群,加官方微信群获取更多资源和帮助
3. 找站长苏飞做网站、商城、CRM、小程序、App、爬虫相关、项目外包等点这里
发表于 2018-12-30 23:58:38 | 显示全部楼层
我只是路过打酱油的。
发表于 2018-12-30 23:58:44 | 显示全部楼层
我只是路过打酱油的。
发表于 2018-12-31 12:25:31 | 显示全部楼层
强烈支持楼主ing……
您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

QQ|手机版|小黑屋|手机版|联系我们|关于我们|广告合作|苏飞论坛 ( 豫ICP备18043678号-2)

GMT+8, 2024-3-29 23:20

© 2014-2021

快速回复 返回顶部 返回列表