iOS OC与JavaScript的交互

作者: abche | 来源:发表于2016-09-12 22:26 被阅读0次

iOS OC与JavaScript的交互

概念了解

JavaScriptCore

javaScriptCore是iOS7后推出的框架，是封装了JavaScript和Objective-C桥接的Objective-C API，我们只需要只要用很少的代码，就可以做到JavaScript调用Objective-C，或者Objective-C调用JavaScript。

JavaScriptCore中类及协议

JSManagedValue:管理数据和方法的类
JSContent:JS执行的环境
JSValue:JS和OC数据和方法的桥梁
JSVirtualMachine:处理线程相关，使用较少
JSExport:这是一个协议，如果JS对象想直接调用OC对象里面的方法和属性，那么这个OC对象只要实现这个JSExport协议就可以了。

代码示例

我们先用终端创建个html文件拖入工程

test.html中代码如下

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
        
        <title>JSCallOC</title>
        
        <style>
            *
            {
                //-webkit-tap-highlight-color: rgba(0,0,0,0);
                text-decoration: none;
            }
        
        html,body
        {
            -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
            -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
            -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
        }
        
        #div-a
        {
            background:#FBA;
            color:#FFF;
            
            border-radius: 25px 5px;
        }
        
        
            </style>
        
        <script type="text/javascript">
            
            function showResult(resultNumber)
            {
                //alert(resultNumber);
                document.getElementById("result").innerText = resultNumber;

            }
        
            function picCallBack(image) {
                alert(image);
            }
        
            </script>
        
</head>

<body style="background:#CDE; color:#FFF">
    
    <div>
        <font size="3" color="black">输入一个整数：</font>
        <textarea  id="input" style="font-size:10pt;color:black;"></textarea>
    </div>
    <br/>
    
    <div>
        <font size="3" color="black">结果： <b id="result"> </b> </font>
    </div>
    <br/>
    
    <div id="div-a">
        <center>
            
            <br/>
            <input type="button" value="计算阶乘" onclick="native.calculateForJS(input.value);" />
            <br/>
            <br/>
            
            
            <input type="button" value="测试log" onclick="log('测试');" />
            <br/>
            <br/>
            
            <input type="button" value="oc原生Alert" onclick="alert('alert');" />
            <br/>
            <br/>
            
            <input type="button" value="addSubView" onclick="addSubView('view');" />
            <br/>
            <br/>
            
            <input type="button" value="removeSubView" onclick="removeSubView('view');" />
            <br/>
            <br/>
            
            <input type="button" value="多参数调用" onclick="mutiParams('参数1','参数2','参数3');" />
            <br/>
            <br/>
            
            <input type="button" value="获取照片" onclick="native.callCamera()" />
            <br/>
            <br/>
            <a id="push" href="#" onclick="native.pushViewControllerTitle('SecondViewController','secondPushedFromJS');">
                push to second ViewController
            </a>
            
            <br/>
            <br/>
            
        </center>
    </div>
    
    
    
</body>

</html>

运行效果图

整个页面均为HTML实现，功能为：

1 计算阶乘：输入框输入数字后调用OC中相关方法进行计算，将计算结果显示在HTML页面上。

2 测试log：点击后，在控制台打印测试数据。

3 OC原生Alert：点击后，弹出OC的提示框。

4 addSubView：点击后，在OC中添加一个View.

5 removeSubView: 点击后，移除4中添加的View。

6 多函数调用：获取HTML中的多个参数

7 获取照片：访问手机照片，并将选中照片显示在HTML页面上

8 push to Second View Controller:跳转到下一个页面。

总结：以上功能都是OC中获取HTML按钮中的相关点击事件，然后在OC中执行相关代码。

ViewController.m中代码如下

#import "OneViewController.h"
#import <JavaScriptCore/JavaScriptCore.h>
#import "SecondViewController.h"

@protocol TestJSExport <JSExport>
/*
 OC的函数命名和JS函数命名规则不同 我们可以通过JSExportAs这个宏优化JS中调用的名称
 这个宏只对有参数的selector起作用
 handleFactorialCalculateWithNumber:(NSNumber *)number作为 js方法:calculateForJS的别名*/
JSExportAs
(calculateForJS, - (void)handleFactorialCalculateWithNumber:(NSNumber *)number);
//- (void)calculateForJS:(NSNumber *)number;
//js方法
- (void)pushViewController:(NSString *)view title:(NSString *)title;
- (void)callCamera;

@end

@interface OneViewController ()<UIWebViewDelegate, TestJSExport>

@property (nonatomic, strong) UIWebView *webView;
@property (nonatomic, strong) JSContext *context;//给JavaScript提供运行的上下文环境
@property (nonatomic, strong) UIView *addView;

@end

@implementation OneViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self.view addSubview:self.webView];
    
    NSString *path = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:@"test.html"];
    NSString *htmlString = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
    [_webView loadHTMLString:htmlString baseURL:nil];
    
}

- (UIWebView *)webView {
    if (_webView == nil) {
        _webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
        _webView.delegate = self;
    }
    return _webView;
}

- (UIView *)addView {
    if (_addView == nil) {
        _addView =[[UIView alloc] initWithFrame:CGRectMake(10, 550, 200, 100)];
        _addView.backgroundColor = [UIColor cyanColor];
    }
    return _addView;
}

#pragma mark UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    //将 html的title 设置为controller的title
    self.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
    //获取当前页面的url
    NSString *url = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];
    //这个好像是私有属性 审核时可能被苹果拒绝
    self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    //打印异常,由于JS的异常信息是不会在OC中被直接打印的,所以我们在这里添加打印异常信息
    self.context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
        context.exception = exceptionValue;
        NSLog(@"exceptionValue --- %@",exceptionValue);
    };
    //以 JSExport 协议关联 native方法
    self.context[@"native"] = self;
    //以 block 形式关联 JavaScript function
    self.context[@"log"] = ^(NSString *str) {
        NSLog(@"%@",str);
    };
    //以 block 形式关联 JavaScript function
    self.context[@"alert"] = ^(NSString *str) {
        dispatch_async(dispatch_get_main_queue(), ^{
            UIAlertView *alter = [[UIAlertView alloc] initWithTitle:@"msg from js" message:str delegate:nil cancelButtonTitle:@"ok" otherButtonTitles:nil, nil];
            [alter show];
        });
    };
    //弱引用 避免循环引用
    __block typeof(self) weakSelf = self;
    self.context[@"addSubView"] = ^(NSString *viewName) {
        [weakSelf.view addSubview:weakSelf.addView];
    };
    
    self.context[@"removeSubView"] = ^(NSString *viewName) {
        [weakSelf.addView removeFromSuperview];
    };
    //多参数
    self.context[@"mutiParams"] = ^(NSString *a, NSString *b, NSString *c) {
        NSLog(@"%@ %@ %@",a,b,c);
    };
}

#pragma mark - JSExport Methods
- (void)handleFactorialCalculateWithNumber:(NSNumber *)number{
    NSLog(@"%@", number);
    NSNumber *result = [self calculateFactorialOfNumber:number];
    NSLog(@"%@", result);
    [self.context[@"showResult"] callWithArguments:@[result]];
}

- (void)pushViewController:(NSString *)view title:(NSString *)title{
    Class second = NSClassFromString(view);
    id secondVC = [[second alloc]init];
    ((UIViewController*)secondVC).title = title;
    [self.navigationController pushViewController:secondVC animated:YES];
}

//  假设此方法是在子线程中执行的，线程名sub-thread
- (void)callCamera {
    // 这句假设要在主线程中执行，线程名main-thread
    NSLog(@"callCamera");
    
    // 下面这两句代码最好还是要在子线程sub-thread中执行啊
    JSValue *picCallback = self.context[@"picCallBack"];
    [picCallback callWithArguments:@[@"photos"]];
}

- (void)calculateForJS:(NSNumber *)number {
    NSLog(@"点击了计算阶乘");
    
    JSValue *showResult = self.context[@"showResult"];
    [showResult callWithArguments:@[@"计算阶乘"]];
    
}

#pragma mark - Factorial Method
- (NSNumber *)calculateFactorialOfNumber:(NSNumber *)number{
    NSInteger i = [number integerValue];
    if (i < 0){
        return [NSNumber numberWithInteger:0];
    }
    if (i == 0){
        return [NSNumber numberWithInteger:1];
    }
    NSInteger r = (i * [(NSNumber *)[self calculateFactorialOfNumber:[NSNumber numberWithInteger:(i - 1)]] integerValue]);
    
    return [NSNumber numberWithInteger:r];
}

- (void)viewWillDisappear:(BOOL)animated {
    [super viewWillDisappear:animated];
    self.context[@"native"] = nil;
}


@end

获取HTML中的点击事件

在HTML中，为一个元素添加点击事件的两种方法

第一种

<input type="button" value="计算阶乘" onclick="native.calculateForJS(input.value);" />

在JS交互中，很多事情都是在webView的delegate方法中完成的，通过JSContent创建一个使用JS的环境，所以这里，我们先将self.content在这里面初始化;

#pragma mark UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    //这个好像是私有属性 审核时可能被苹果拒绝
    self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    //打印异常,由于JS的异常信息是不会在OC中被直接打印的,所以我们在这里添加打印异常信息
    self.context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
        context.exception = exceptionValue;
        NSLog(@"exceptionValue --- %@",exceptionValue);
    };
    //以JSExport 协议关联 native 的方法
    self.context[@"native"] = self;
}

我们需要声明一个集成JSExport协议，协议中声明JS使用的OC方法

@protocol TestJSExport <JSExport>
/*
 OC的函数命名和JS函数命名规则不同 我们可以通过JSExportAs这个宏优化JS中调用的名称
 这个宏只对有参数的selector起作用
 handleFactorialCalculateWithNumber:(NSNumber *)number作为 js方法:calculateForJS的别名*/
JSExportAs
(calculateForJS, - (void)handleFactorialCalculateWithNumber:(NSNumber *)number);
@end

当然你也可以按下面的写法

@protocol TestJSExport <JSExport>

- (void)calculateForJS:(NSNumber *)number;

@end

第二种

<input type="button" value="oc原生Alert" onclick="alert('alert');" />

这种我们需要使用block的形式关联JavaScript function

self.context[@"alert"] = ^(NSString *str) {

};

对HTML中的事件进行处理

第一种协议形式

我们协议中制定的方法名一定要和HTML中的方法名相同。
当我们协议需要使用JS中的方法时，用下面的代码进行调用：

HTML中的方法

function showResult(resultNumber)
{
document.getElementById("result").innerText = resultNumber;

}

OC调用

JSValue *showResult = self.context[@"showResult"];
[showResult callWithArguments:@[@"计算阶乘"]];

第二种 Block形式

注意避免循环引用，同时刷新UI的工作应该放到主线程

self.context[@"alert"] = ^(NSString *str) {
    dispatch_async(dispatch_get_main_queue(), ^{
        UIAlertView *alter = [[UIAlertView alloc] initWithTitle:@"msg from js" message:str delegate:nil cancelButtonTitle:@"ok" otherButtonTitles:nil, nil];
        [alter show];
    });
};

使用注意

OC调用JavaScript是同步，JavaScript调用OC是异步。

JavaScript调用本地方法是在子线程中执行的，这里要根据实际情况考虑线程之间的切换，而在回调JavaScript方法的时候最好是在刚开始调用此方法的线程中去执行那段JavaScript方法的代码，看下面的代码解释：

// 假设此方法是在子线程中执行的，线程名sub-thread
- (void)callCamera {
    // 这句假设要在主线程中执行，线程名main-thread
    NSLog(@"callCamera");
    
    // 下面这两句代码最好还是要在子线程sub-thread中执行啊
    JSValue *picCallback = self.context[@"picCallBack"];
    [picCallback callWithArguments:@[@"photos"]];
}

本文demo: 点我下载

内存管理陷阱

Objective-C的内存管理机制是引用计数，JavaScript的内存管理机制是垃圾回收。在大部分情况下，JavaScriptCore能做到在这两种内存管理机制之间无缝无错转换，但也有少数情况需要特别注意。

在block内捕获JSContext

Block会为默认为所有被它捕获的对象创建一个强引用。JSContext为它管理的所有JSValue也都拥有一个强引用。并且，JSValue会为它保存的值和它所在的Context都维持一个强引用。这样JSContext和JSValue看上去是循环引用的，然而并不会，垃圾回收机制会打破这个循环引用。
看下面的例子：

self.context[@"getVersion"] = ^{
    NSString *versionString = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"CFBundleShortVersionString"];

    versionString = [@"version " stringByAppendingString:versionString];

    JSContext *context = [JSContext currentContext]; // 这里不要用self.context
    JSValue *version = [JSValue valueWithObject:versionString inContext:context];

    return version;
};

使用[JSContext currentContext]而不是self.context来在block中使用JSContext，来防止循环引用。

JSManagedValue

当把一个JavaScript值保存到一个本地实例变量上时，需要尤其注意内存管理陷阱。用实例变量保存一个JSValue非常容易引起循环引用。

看以下下例子，自定义一个UIAlertView，当点击按钮时调用一个JavaScript函数：

#import <UIKit/UIKit.h>
#import <JavaScriptCore/JavaScriptCore.h>

@interface MyAlertView : UIAlertView

- (id)initWithTitle:(NSString *)title
            message:(NSString *)message
            success:(JSValue *)successHandler
            failure:(JSValue *)failureHandler
            context:(JSContext *)context;

@end

按照一般自定义AlertView的实现方法，MyAlertView需要持有successHandler，failureHandler这两个JSValue对象

向JavaScript环境注入一个function

self.context[@"presentNativeAlert"] = ^(NSString *title,
                                        NSString *message,
                                        JSValue *success,
                                        JSValue *failure) {
   JSContext *context = [JSContext currentContext];
   MyAlertView *alertView = [[MyAlertView alloc] initWithTitle:title 
                                                       message:message
                                                       success:success
                                                       failure:failure
                                                       context:context];
   [alertView show];
};

因为JavaScript环境中都是“强引用”（相对Objective-C的概念来说）的，这时JSContext强引用了一个presentNativeAlert函数，这个函数中又强引用了MyAlertView 等于说JSContext强引用了MyAlertView，而MyAlertView为了持有两个回调强引用了successHandler和failureHandler这两个JSValue，这样MyAlertView和JavaScript环境互相引用了。

所以苹果提供了一个JSMagagedValue类来解决这个问题。

看MyAlertView.m的正确实现：

#import "MyAlertView.h"

@interface XorkAlertView() <UIAlertViewDelegate>
@property (strong, nonatomic) JSContext *ctxt;
@property (strong, nonatomic) JSMagagedValue *successHandler;
@property (strong, nonatomic) JSMagagedValue *failureHandler;
@end

@implementation MyAlertView

- (id)initWithTitle:(NSString *)title
            message:(NSString *)message
            success:(JSValue *)successHandler
            failure:(JSValue *)failureHandler
            context:(JSContext *)context {

    self = [super initWithTitle:title
                    message:message
                   delegate:self
          cancelButtonTitle:@"No"
          otherButtonTitles:@"Yes", nil];

    if (self) {
        _ctxt = context;

        _successHandler = [JSManagedValue managedValueWithValue:successHandler];
        // A JSManagedValue by itself is a weak reference. You convert it into a conditionally retained
        // reference, by inserting it to the JSVirtualMachine using addManagedReference:withOwner:
        [context.virtualMachine addManagedReference:_successHandler withOwner:self];

        _failureHandler = [JSManagedValue managedValueWithValue:failureHandler];
        [context.virtualMachine addManagedReference:_failureHandler withOwner:self];
    }
    return self;
}

- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex {
    if (buttonIndex == self.cancelButtonIndex) {
        JSValue *function = [self.failureHandler value];
        [function callWithArguments:@[]];
    } else {
        JSValue *function = [self.successHandler value];
        [function callWithArguments:@[]];
    }

    [self.ctxt.virtualMachine removeManagedReference:_failureHandler withOwner:self];
    [self.ctxt.virtualMachine removeManagedReference:_successHandler withOwner:self];
}    

@end

分析上面例子，从外部传入的JSValue对象在类内部使用JSManagedValue来保存。

JSManagedValue本身是一个弱引用对象，需要调用JSVirtualMachine的addManagedReference:withOwner:把它添加到JSVirtualMachine对象中，确保使用过程中JSValue不会被释放

当用户点击AlertView上的按钮时，根据用户点击哪一个按钮，来执行对应的处理函数，这时AlertView也随即被销毁。这时需要手动调用removeManagedReference:withOwner:来移除JSManagedValue。

参考文章

http://www.jianshu.com/p/cdaf9bc3d65d
https://hjgitbook.gitbooks.io/ios/content/04-technical-research/04-javascriptcore-note.html
http://my.oschina.net/whforever/blog/669813
http://www.jianshu.com/p/f896d73c670a

iOS OC与JavaScript的交互

iOS OC与JavaScript的交互

概念了解

JavaScriptCore

JavaScriptCore中类及协议

代码示例

获取HTML中的点击事件

第一种

第二种

对HTML中的事件进行处理

第一种协议形式

第二种 Block形式

使用注意

内存管理陷阱

在block内捕获JSContext

JSManagedValue

参考文章

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

iOS OC与JavaScript的交互

iOS OC与JavaScript的交互

概念了解

JavaScriptCore

JavaScriptCore中类及协议

代码示例

获取HTML中的点击事件

第一种

第二种

对HTML中的事件进行处理

第一种 协议形式

第二种 Block形式

使用注意

内存管理陷阱

在block内捕获JSContext

JSManagedValue

参考文章

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

第一种协议形式