JS跟OC 交互 并传值

项目现在在更新,又有新的需求,由于某些原因,后台那边给了一个网址,让我点击网页的按钮传一个值,然后后台根据我传的值做一些事情,首先导入#import <JavaScriptCore/JavaScriptCore.h>框架,再创建一个JSContext *context对象

OC调用JS中的方法
JS中的方法
function Callback(tokenA){
    alert(tokenA);  
}

OC调取JS中的方法   先用webView加载网页
- (void)viewDidLoad {
    [super viewDidLoad];
    NSURL *url = [NSURL URLWithString:@"后台给的网址"];
    [self.webView loadRequest:[NSURLRequest requestWithURL:url]];
    self.webView.delegate = self;
}
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    [context setExceptionHandler:^(JSContext *ctx, JSValue *expectValue) {
        NSLog(@"%@", expectValue);
    }];
    self.context = context;
}
点击一个按钮  通过callWithArguments  把内容(asd)传到JS的方法中 显示
- (IBAction)buttonClick:(UIButton *)sender {
    if (!self.context) {
        return;
    }
    JSValue *funcValue = self.context[@"Callback"];
    [funcValue callWithArguments:@[@"asd"]];
}
JS 调用OC的方法
OC中的代码
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    
    [context setExceptionHandler:^(JSContext *ctx, JSValue *expectValue) {
        NSLog(@"%@", expectValue);
    }];
    self.context = context;
    __weak typeof(self) weakSelf = self;
    self.context[@"onSubmit2"] = ^{
        dispatch_async(dispatch_get_main_queue(), ^{
//block 中调用block需要强引用    这里是要做的事情
            __strong typeof(weakSelf) strongSelf = weakSelf;
            UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"" message:@"这是OC中的弹框!" preferredStyle:UIAlertControllerStyleAlert];
            [alert addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
                [alert dismissViewControllerAnimated:YES completion:^{
                }];
            }]];
            [strongSelf.navigationController presentViewController:alert animated:YES completion:nil];
        });
    };
}
JS中的代码
<label> <input style="width: 8%; height: 45px" id="button1" name="button1" type="button" onclick="javascript:onSubmit2()" value="ios保存" /></label>
<div style="width: 90%; height: 35px"></div>
function onSubmit2(){
    tianbai.call();
}
onSubmit2  必须跟OC中 self.context[@"onSubmit2"]的一样  JS是根据  @“onSubmit2”这个key  找到OC中的方法

这是两种简单的情况,还有一种情况,JS中调用你的OC方法,然后它需要再做一些事情,于是就是它写一个方法,你再调用JS中的方法把值传过去

OC中代码    首先我写一个方法
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    self.jsContext[@"tianbai"] = self;
    self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
        context.exception = exceptionValue;
        NSLog(@"异常信息:%@", exceptionValue);
    };
}
//这个是自己的方法
- (void)call{
    NSLog(@"call");
    // 之后在回调js的方法Callback把内容传出去
    JSValue *Callback = self.jsContext[@"Callback"];
    //传值给web端
    [Callback callWithArguments:@[@"唤起本地OC回调完成"]];
}
JS中代码  JS中的按钮点击事件调用我的 call 方法
function onSubmit2(){
    tianbai.call();
}
  然后JS又写了一个方法
function Callback(tokenA){
    alert(tokenA);
}

这个可能有点绕,你只要让后台配合你试试就明白是怎么回事了

参考 : https://imciel.com/2016/06/18/oc-js-communication/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 随着H5技术的兴起,在iOS开发过程中,难免会遇到原生应用需要和H5页面交互的问题。其中会涉及方法调用及参数传值等...
    Chris_js阅读 8,284评论 1 8
  • 本文由我们团队的 纠结伦 童鞋撰写。 写在前面 本篇文章是对我一次组内分享的整理,大部分图片都是直接从keynot...
    知识小集阅读 15,332评论 11 172
  • 写在前面 本篇文章是对我一次组内分享的整理,大部分图片都是直接从keynote上截图下来的,本来有很多炫酷动效的,...
    等开会阅读 14,895评论 6 69
  • 注:本文copy自http://www.jianshu.com/p/ac534f508fb0,纯属当笔记使用。 概...
    BookKeeping阅读 4,032评论 1 3
  • 灯火阑珊 人已散 念千里慕思只是当年 无处话离殇 轻舟翩然 月已残 望十里长亭空留神黯 落日影倾长 夜静风徒然 只...
    雾veray阅读 2,578评论 0 3