×
广告

iOS JavaScriptCore实现OC与JS的交互

96
_南山忆
2016.04.25 10:32* 字数 661

JS 与 OC 的交互原来没有好好研究过,用的都是比较简单拦截 Url 的方式,通过定义专用的 Url 来拦截关键字来进行特定处理。但这只能用于简单的传值,进行一些简单的交互。涉及到,JS 调用 OC 方法或者 OC 调用 JS 方法,一些比较复杂的交互逻辑的时候这种方式就显得力不从心了。满足不了我们的需求。当然也有比较好的第三方库如:WebViewJavascriptBridge。但一般系统的方法足够用的时候,就没必要使用第三方库。这样即有利于减小安装包体积,又可以减少第三方的不稳定性等因素的干扰

一、拦截url的方式,进行简单交互

在webView的代理方法中处理
  这里简单介绍一下 URL 里面的一些属性
NSString *scheme = url.scheme;//协议:http
NSString *host = url.host;//主机名
NSNumber *port = url.port;//端口号
NSString *path = url.path;//一般用来表示主机上的一个目录或文件地址
NSString *query = url.query;//参数,发给服务器的参数

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    NSURL *url = request.URL;
    if ([url.scheme isEqualToString:@"nanshanyi"]) {
        //在这里做JavaScript调用Objective-C的事。
        //需要传的值放在url后面的参数里如:Nanshanyi://www.php8080.com?{"title":"标题","id":"123","des":"描述内容"}
        NSString *dataJson = url.query;//拿到后面的json字符串
       NSString *str = [dataJson stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
        NSLog(@"%@",str);
//执行一段js代码,弹出提示框
        [webView stringByEvaluatingJavaScriptFromString:@"alert('seccess')"];
        return NO;
    }
    return YES;
    
}

二、使用JavaScriptCore实现交互

JavaScriptCore是封装了JavaScript和Objective-C桥接的Objective-C API,只需要较少的的代码,就可以实现JavaScript与Objective-C的相互调用。
  在iOS7之前,只能通过向UIWebView发送stringByEvaluatingJavaScriptFromString:消息来执行一段JavaScript的脚本。而且如果想用JavaScript来调用Objective-C的方法,必须打开一个自定义的URL(例如:Nanshanyi://),然后在UIWebView的delegate方法webView:shouldStartLoadWithRequest:navigationType中进行处理。也就是上问中提到的方法
JavaScriptCore中类及协议:
  JSContext:给JavaScript提供运行的上下文环境
  JSValue:JavaScript和Objective-C数据和方法的桥梁
   JSManagedValue:管理数据和方法的类
  JSVirtualMachine:处理线程相关,使用较少
  JSExport:这是一个协议,如果采用协议的方法交互,自己定义的协议必须遵守此协议

(1)使用Delegate方式实现

先放上js的网页代码,可以建一个HTML文件直接复制进去即可使用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
</head>
<body>
    <h1>OC和JS的交互代理方式</h1>

    <div>
    <!-- 生成一个 button 添加点击事件-->
        <input type="button" value="JsToOcShare" onclick="callShare()">
    </div>

<script>
    function callShare() {
        var shareContent = JSON.stringify({"title": "分享", "desc": "分享内容", "shareUrl": "http://www.jianshu.com/users/774b1d5616a7/latest_articles"});
        Nanshanyi.share(shareContent);
    }
    <!--    OC调JS-->
    function showAlert(message){
        alert(message);
    }
    <!--    JS调OC成功后回调-->
    var shareCallback = function(){
        alert('success');
    }
</script>
</body>
</html>
#import <JavaScriptCore/JavaScriptCore.h>
@protocol JSObjcDelegate <JSExport>

- (void)share:(NSString *)shareContent;

@end
@interface ViewController : UIViewController<JSObjcDelegate>
@end

.m文件

#import "ViewController.h"
@interface ViewController ()<UIWebViewDelegate>
@property (nonatomic,strong)UIWebView *webView;
@property (nonatomic,strong)JSContext *jsContext;


@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self CustomUI];

}
- (void)CustomUI{
    self.webView = [[UIWebView alloc]initWithFrame:self.view.bounds];
    self.webView.delegate = self;
    [self.view addSubview:_webView];

    NSURL *url = [[NSBundle mainBundle] URLForResource:@"untitled3" withExtension:@"html"];
    [self.webView loadRequest:[NSURLRequest requestWithURL:url]];
   
}
- (void)webViewDidFinishLoad:(UIWebView *)webView{
    _jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    //代理方式JS调OC方法
    //Nanshanyi 相当于桥接,通过它将 OC 与 JS 联系起来
    _jsContext[@"Nanshanyi"] = self;
    _jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
        context.exception = exceptionValue;
        NSLog(@"异常信息:%@", exceptionValue);
    };
}
- (void)share:(NSString *)shareContent {
    NSLog(@"share:%@", shareContent);
    // 分享成功后,回调js的方法shareCallback
//    也即是 OC 调用 JS 方法,只调用方法,没有参数传递
    JSValue *shareCallback = self.jsContext[@"shareCallback"];
    [shareCallback callWithArguments:nil];
}
(2)使用Block方式实现

同样放上一段简单的JS

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
</head>
<body>
<h1>OC和JS的交互Block方式�</h1>
    <div>
        <input type="button" value="JsToOcShare" onclick="callShare(shareContent)">
    </div>

<script>
    var shareContent = JSON.stringify({"title":"分享", "desc":"分享内容", "shareUrl":"http://www.jianshu.com/users/774b1d5616a7/latest_articles"});
    
    function callShare(share) {
    //share为形参,shareContent为实参,即要传递的参数
    }
    //  OC调JS message为传递的参数
    function showAlert(message){
        alert(message);
    }

</script>
</body>
</html>

WebView代理方法的实现

- (void)showAlert{//直接调用该方法实现OC调用JS,并传参
    NSString *jsStr = @"showAlert('ios js交互成功,我是网页 alert')";
    [_jsContext evaluateScript:jsStr];
}
- (void)webViewDidFinishLoad:(UIWebView *)webView{
    _jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    //block 方式 JS直接调用OC,并传参,简单明了
    __weak typeof  (self)weakSelf = self;
        _jsContext[@"callShare"] =^(id obj){
            weakSelf.lable.text = obj;
    //把传过来的Json字符串,转为字典
            NSData *data = [(NSString *)obj dataUsingEncoding:NSUTF8StringEncoding ];
            NSDictionary *dict = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:nil];
            NSLog(@"%@",dict);
            
        };
    _jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
        context.exception = exceptionValue;
  //比如把js中的方法名改掉,OC找不到相应方法,这里就会打印异常信息
        NSLog(@"异常信息:%@", exceptionValue);
    };
}

至此,已经完成了JS与OC的简单交互,实现了JS与OC方法的相互调用,与传值。有什么不对的请批评指正,互相学习

随笔
Web note ad 1