轉： http://www.jianshu.com/p/cdaf9bc3d65d

一、說明

這篇文章記錄自己在研究OC與JS互動中的所得,以及遇到的問題與解決

由於蘋果的稽核時間太漫長，一次稽核不過,那又將進入另一個漫長的稽核期。為了能在開發中方便更新，公司要求在專案中使用HTML5，這樣就涉及到OC與JS的互動，不懂H5,不懂JS。在經過一段時間的摸索之後，將自己的研究記錄下來，以做備忘。

OC與JS的互動實現方式有很多，之前用的比較多的是WebViewJavaScriptBridge，但在IOS7之後，蘋果將JavaScriptCore框架開放。因此，這篇文章不講理論,主要講的是JavaScriptCore的實際使用。

廢話說完了,下面進入正題

二、Demo專案中功能介紹

這個demo主要分為了三個部分來:
1.JS Call OC , JS呼叫OC的函式
2.OC Call JS , OC呼叫JS的函式
3.一個繪圖的例子

在做OC與JS互動工作之前，我們需要做些準備工作

1.匯入JavaScriptCore的標頭檔案

#import <JavaScriptCore/JavaScriptCore.h>

2.用webView載入HTML檔案,這裡用的是本地HTML;

- (void)viewDidLoad
{
[super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
 

self.title = @"js call oc";

NSString *path = [[[NSBundle mainBundle] bundlePath]  stringByAppendingPathComponent:@"JSCallOC.html"];
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]];
[self.webView loadRequest:request];
}

3.在JS互動中，很多事情都是在webView的delegate方法中完成的，通過JSContent建立一個使用JS的環境，所以這裡，我們先將self.content在這裡面初始化;

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
 //初始化content
 self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

// 列印異常,由於JS的異常資訊是不會在OC中被直接列印的,所以我們在這裡新增列印異常資訊,
self.context.exceptionHandler =
^(JSContext *context, JSValue *exceptionValue)
{
    context.exception = exceptionValue;
    NSLog(@"%@", exceptionValue);
};
}

三、實際操作中 JS call OC

先來看demo

這個頁面整個都是通過HTML實現的，
1 計算階乘：在輸入框中輸入一個數字，然後在OC中計算出結果，最後顯示在HTML的頁面上；
2 測試log：點選後，在後臺列印測試資料；
3 OC原生Alert ：點選後，彈出OC的提示框；
4 addSubView：點選後，在OC中新增一個View；
5 push to second ViewController :跳轉到下一個介面

總結:以上功能都是在OC獲取HTML中按鈕的點選事件,在後在OC中實現功能

??如何獲取HTML中的點選事件呢??

在HTML中,為一個元素新增點選時間有兩種寫法

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

或者

<input type="button" value="測試log" onclick="log('測試');" />

如果是第一種方法,

那麼就要用JSExport協議關聯native的方法,要在webView的delegate裡面新增

 // 以 JSExport 協議關聯 native 的方法
self.content[@"native"] = self;

新增完之後,要宣告一個繼承JSExport的協議,協議中宣告供JS使用的OC的方法

@protocol TestJSExport <JSExport>
JSExportAs
(calculateForJS  /** handleFactorialCalculateWithNumber 作為js方法的別名 */,
 - (void)handleFactorialCalculateWithNumber:(NSNumber *)number
 );
- (void)pushViewController:(NSString *)view title:(NSString *)title;

-(void)log:(NSString*)l;

@end

在OC中實現這些方法,這樣就完成了!

如果是第二章方法,則只需要通過block的形式關聯JavaScript function就可以了!

self.context[@"log"] = ^(NSString *str)
{
NSLog(@"%@", str);
};

三、OC呼叫JS

在這個例子中，介面的所有View都是OC建立的，點選“交給JS處理計算階乘”後，將textfild的資料傳給JS，JS計算完成後在返回來！

這裡面首先要獲取JS裡面的計算函式，在OC中，所有表示JS中物件，都用JSValue來建立，通過objectForKeyedSubscript方法或者直接使用下標的方法獲取JS物件，然後使用callWithArguments方法來執行函式

// 方法一.   JSValue *function = [self.context objectForKeyedSubscript:@"factorial"];
// 方法二.
JSValue * function = self.context[@"factorial"];
JSValue *result = [function callWithArguments:@[inputNumber]];
self.showLable.text = [NSString stringWithFormat:@"%@", [result toNumber]];

四、demo之外（慢慢在總結）

1.JS注入
2.在OC中為JS建立物件
......

零碎的補充1:對於JS 函式中,引數中有函式的,在OC中用JSValue接收

 // 比如:JS程式碼
 function  myFunc({"text":"這裡是文字","callbackFun":function(string){alert'string'}});

//OC程式碼中在.h的protocol中宣告JS要呼叫的OC方法
//.h protocol中,函式名稱要和JS中相同,這裡接收的引數為JSValue
JSExportAs
(myFunc,
 -(void) myFunc:(JSValue*)value
 );

//在.m檔案中,實現myFunc方法
-(void) myFunc:(JSValue*)value{

NSString * text = [value valueForProperty:@"text"];//列印"這裡是文字"

JSValue * func =  [value valueForProperty:@"callbackFun"]; //這裡是JS引數中的func;

//呼叫這個函式
[func callWithArguments:@[@"這裡是引數"]];

}