Sian 发表于 2016-3-17 17:06:20

Object-C与JavaScript交互的两种方式

本帖最后由 Sian 于 2016-3-17 17:30 编辑

1、在iOS项目开发中,原生页面中掺杂Html5页面已不是什么新鲜事了,毕竟H5也他相关的优势,比如布局、富文本内容展示等;

2、随着H5页面的侵入,OC与JS的交互意愿越来越强烈,就目前来看,在不引用第三方库的前提下,有两种方式可以解决;
2.1、iOS6及以前通过拦截NSRequest请求来调用原生方法进行交互;
2.2、iOS7及以后的版本苹果官方引入了JavaScriptCore框架;

3、拦截NSRequest请求
A、UIwebView有个代理方法:- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;B、此方法通过返回YES/NO来决定是否跳转到request的页面,因此我们可以通过协议头来区分是正常的URL请求还是本地方法的调用请求;
C、比如说网页中某a标签请求的地址是 saap://share,那么在该代理方法中就可以通过url的协议头来将其拦截,返回NO,页面不跳转,同时执行某个share方法,即达到了调用OC本地方法的效果;
D、参数可以通过url中带过来,或者参数内容过长可以通过post请求,在request的HTTPBody中可以将post请求内容解析出来
E、现在调OC方法没问题了,OC如何调用页面中的方法呢?其实UIWebView给我们也提供了一个交互方法- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;直接传入JS脚本,还可以接收脚本的返回值

4、JavaScriptCore框架
4.1、在iOS7及以后的版本中可以通过官方提供的JS框架来进行交互,主要涉及到的两个类是JSValue、JSContext
4.2、JSContext指的是JS的上下文,即可以简单解理成<script></script>标签部分;
4.3、JSValue是一个在OC和JS之间进行数据转换的类,他可以将JS对象或数据转换成OC的对象或数据,反之亦然;
4.4、如何使用呢,又分为两种方式,一种方式通过Block(即所谓的匿名函数),另一种方法即通过代理,这是苹果的一惯作风!

5、两种方法的对比
5.1、Block的基本实现方式:
A、在UIWebView的代理方法- (void)webViewDidFinishLoad:(UIWebView *)webView加入以下代码- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    JSContext *context = ;
    context[@"ocShow"] = ^(){
      NSLog(@"来自JS的问候...");
    };
    // 模拟JS调用
    ;
}网页中如果JS调用ocShow()方法,即会输入这行"来自JS的问候...";2016-03-17 17:04:34.937 SAJavaScript 来自JS的问候...B、需要传参数怎么办?两种方法
C、一种方法是在这个Block中添加参数:^(NSString *str1, NSString *str2){},如果对Block不熟悉可以参考http://www.yusian.com/thread-976-1-1.html 或者网上找下相关资料看看先;
D、另外一种方法,通过JSContext的类方法currentArguments可以获取NSArray *argument = ; 然后遍历获得;
E、这种方法使用简单方便,但每次都要重新写,可不可以指向我已有的现成方法?当然是可以的!使用代理
5.2、通过代理实现
A、自定义一个协议,继承自<JSExport>,把JS需要调用的方法在该协议中申明;
B、但凡遵循<JSExport>协议的对象都可以被JS所调用
C、实现相关方法即可//
//ViewController.m
//SAJavaScript
//
//Created by 余西安 on 16/3/17.
//Copyright © 2016年 Sian. All rights reserved.
//

#import "ViewController.h"
#import <JavaScriptCore/JavaScriptCore.h>

@protocol SAJSExport <JSExport>
- (void)showMessage:(JSValue *)message;
@end

@interface ViewController () <UIWebViewDelegate, SAJSExport>
@property (nonatomic, strong) UIWebView *webView;
@end

@implementation ViewController

- (void)viewDidLoad
{
    ;
    self.webView = [ init];
    self.webView.delegate = self;
    self.webView.frame = self.view.bounds;
    ;
    NSURL *url = ;
    ];
}

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    JSContext *context = ;
    // 1、Block方法
    context[@"ocShow"] = ^(){
      NSLog(@"来自JS的问候...");
    };
    // 模拟JS调用
    ;
   
    // 2、代理方法
    ;
    // 模拟JS调用webView.showMessage()方法
    ;
}

- (void)showMessage:(JSValue *)message
{
    [[ initWithTitle:nil message: delegate:nil cancelButtonTitle:@"朕知道了" otherButtonTitles:nil, nil] show];
}
@end
D、效果图



E、回调JS就更简单了,其实上面已经调用过了,JSContext中的方法- (JSValue *)evaluateScript:(NSString *)script;F、JSValue与OC数据转换对应关系<pre>
@textblock
   Objective-C type|   JavaScript type
--------------------+---------------------
         nil         |   undefined
      NSNull       |      null
       NSString      |       string
       NSNumber      |   number, boolean
   NSDictionary    |   Object object
       NSArray       |    Array object
      NSDate       |   Date object
       NSBlock (1)   |   Function object (1)
          id (2)   |   Wrapper object (2)
      Class (3)    | Constructor object (3)
@/textblock
</pre>6、Demo下载**** Hidden Message *****

iOS_G 发表于 2016-3-22 10:14:05

求Demo学习。。:P

A-Hing 发表于 2016-3-27 22:38:56

来学习了:):):):):),就想看看js端的代码是怎么写的。

choiiiiiiiiiiii 发表于 2016-4-2 09:47:35

感谢楼主分享。。
页: [1]
查看完整版本: Object-C与JavaScript交互的两种方式