最近項目里面有有個商品活動界面，要與web端傳值，將用戶在網頁點擊的商品id 傳給客戶端，也就是js交互，其實再說明白一點就是方法的互相調用而已。
本文敘述下如何進行原生的JavaScript交互
本文包括JS調用OC方法並傳值，OC調用JS方法並傳值
本來想把html放進服務器里面，然后訪問，但是覺得如果html在本地加載更有助於理解，特把html放進項目里
HTML代碼
-
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
</head>
-
<body>
-
<div style="margin-top: 20px">
-
<h2>JS與OC交互</h2>
-
<input type="button" value="喚起本地方法(call)" onclick="tianbai.call()">
-
</div>
-
<div>
-
<input type="button" value="喚起getCall:(NSString *)callString傳值" onclick="call()">
-
</div>
-
-
<script>
-
-
-
-
var call = function()
-
{
-
var callInfo = JSON.stringify({"jianshu": "http://www.jianshu.com/users/55c8fdc3c6e7/latest_articles"});
-
tianbai.getCall(callInfo);
-
}
-
-
var Callback = function(str)
-
{
-
alert(str);
-
}
-
var alerCallback = function()
-
{
-
alert( '成功');
-
}
-
</script>
-
</body>
-
</html>
上面html的代碼：建立了兩個button
第一個button綁定了 tianbai.call() 方法，這里 tianbai 是一個對象，這個對象的作用下面OC代碼中會說明， tianbai.call() 代表 tianbai 對象調用 call() 方法
第二個button綁定了 call() 的方法，調用的是下面JavaScript中的 call() 方法，在 JavaScript 的 call() 里面，定義一個 callInfo 參數，方法中 tianbai.getCall(callInfo) 代表 tianbai 對象調用 getCall 方法並傳參數 callInfo ，下面兩個方法是OC調用JavaScript方法，其中Callback傳回str，alerCallback為OC僅調用JavaScript方法！
OC代碼
demo采用原生的JavaScriptCore類
引入三個名詞：
- JSContext：給JavaScript提供運行的上下文環境
- JSValue：JavaScript和Objective-C數據和方法的橋梁
- JSExport：這是一個協議，如果采用協議的方法交互，自己定義的協議必須遵守此協議
ViewController.h中的代碼(代碼過長，方法說明都在注釋里)
-
-
//導入頭文件
-
-
-
@protocol JSObjcDelegate <JSExport>
-
//tianbai對象調用的JavaScript方法，必須聲明！！！
-
- ( void)call;
-
- ( void)getCall:(NSString *)callString;
-
-
@end
-
@interface ViewController : UIViewController<UIWebViewDelegate,JSObjcDelegate>
-
@property (nonatomic, strong) JSContext *jsContext;
-
@property (strong, nonatomic) UIWebView *webView;
-
-
@end
ViewController.m中的代碼(代碼過長，方法說明都在注釋里)
JavaScriptCore中web頁面調用原生應用的方法可以用Delegate或Block兩種方法，此文以按Delegate講解。
設置webView
-
self.webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 20, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
-
self.webView.delegate = self;
-
//從本地加載html文件
-
NSString* path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
-
NSURL* url = [NSURL fileURLWithPath:path];
-
NSURLRequest* request = [NSURLRequest requestWithURL:url] ;
-
[ self.webView loadRequest:request];
-
-
[ self.view addSubview:self.webView];
JavaScript的tianbai是一個對象，充當原生應用和web頁面之間的一個橋梁。用來調用方法
webview加載完成調用代理
-
- ( void)webViewDidFinishLoad:(UIWebView *)webView {
-
-
// 設置javaScriptContext上下文
-
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
-
//將tianbai對象指向自身
-
self.jsContext[@"tianbai"] = self;
-
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
-
context .exception = exceptionValue;
-
NSLog(@"異常信息：%@", exceptionValue);
-
};
-
}
將對象指向自身后，如果調用 tianbai.call() 會響應下面的方法，OC方法中調用js中的Callback方法，並傳值
-
- ( void)call{
-
NSLog(@"call");
-
// 之后在回調JavaScript的方法Callback把內容傳出去
-
JSValue *Callback = self.jsContext[@"Callback"];
-
//傳值給web端
-
[Callback callWithArguments:@[ @"喚起本地OC回調完成"]];
-
}
將對象指向自身后，如果調用 tianbai.getCall(callInfo) 會響應下面的方法，OC方法中僅調用JavaScript中的alerCallback方法
-
- ( void)getCall:(NSString *)callString{
-
NSLog(@"Get:%@", callString);
-
// 成功回調JavaScript的方法Callback
-
JSValue *Callback = self.jsContext[@"alerCallback"];
-
[Callback callWithArguments: nil];
-
}
將對象指向自身后，還可以向html注入js
-
- ( void)alert{
-
-
// 直接添加提示框
-
NSString *str = @"alert('OC添加JS提示成功')";
-
[ self.jsContext evaluateScript:str];
-
-
}
Demo地址：https://github.com/QuTianbai/JavaScript