iOS7之后蘋果為眾猿推出了JavaScriptCore.framework這個框架,這個框架為大家在與JS交互上提供了很大幫助,可以在html界面上調用OC方法並傳參,也可以在OC上調用JS方法並傳參.這里簡單的介紹一下這個框架的使用.
javaScriptCore是一種JavaScript引擎,主要為webKit提供腳本處理能力,javaScriptCore是開源webkit的一部分,他提供了強大的整合能力.下面以JS調用OC方法為例,OC調用JS為例說明.
- JSContext, JSContext是代表JS的執行環境，通過-evaluateScript:方法就可以執行一JS代碼
- JSValue, JSValue封裝了JS與ObjC中的對應的類型，以及調用JS的API等
- JSExport, JSExport是一個協議，遵守此協議，就可以定義我們自己的協議，在協議中聲明的API都會在JS中暴露出來，才能調用
1.首先,導入JavaScriptCore.framework這個框架,target-->Build Phases-->Link Binary With Libraies添加這個框架.
2.在使用了文件里添加頭文件
#import <JavaScriptCore/JavaScriptCore.h>
3.為了演示方便,這里我們寫了一個本地的Test.html,使用webView加載Test.html.
這里,我們需要使用JavaScriptCore.framework這個框架里面的JSContext這個代表了獲取到JS的運行環境.
1 @property (nonatomic,strong) UIWebView * webView; 2 @property (nonatomic,weak) JSContext * context;
4.在.m文件中,加載html文件.viewDidLoad
1 //創建一個webView來加載html 2 _webView = [[UIWebView alloc]init]; 3 _webView.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height/2); 4 _webView.delegate = self; 5 [self.view addSubview:_webView]; 6 7 //先加載一個本地的html 8 NSString * path = [[NSBundle mainBundle] pathForResource:@"Test.html" ofType:nil]; 9 // NSLog(@"%@",path); 10 NSURL * url = [[NSURL alloc]initFileURLWithPath:path]; 11 // NSLog(@"%@",url); 12 NSURLRequest * request = [NSURLRequest requestWithURL:url]; 13 [_webView loadRequest:request];
5.創建兩本原生button,演示OC調用JS方法.html中也寫兩個按鈕和方法,用於演示JS調用OC.
1 //創建兩個原生button,演示調用js方法 2 UIButton * btn1 = [UIButton buttonWithType:UIButtonTypeCustom]; 3 btn1.frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.height/2, 200, 50); 4 btn1.backgroundColor = [UIColor blackColor]; 5 [btn1 setTitle:@"OC調用無參JS" forState:UIControlStateNormal]; 6 [btn1 addTarget:self action:@selector(function1) forControlEvents:UIControlEventTouchUpInside]; 7 [self.view addSubview:btn1]; 8 UIButton * btn2 = [UIButton buttonWithType:UIButtonTypeCustom]; 9 btn2.frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.height/2+100, 200, 50); 10 btn2.backgroundColor = [UIColor blackColor]; 11 [btn2 setTitle:@"OC調用JS(傳參)" forState:UIControlStateNormal]; 12 [btn2 addTarget:self action:@selector(function2) forControlEvents:UIControlEventTouchUpInside]; 13 [self.view addSubview:btn2];
html中
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 4 <title>hello World</title> 5 </head> 6 7 <script type="text/javascript"> 8 9 function JSCallOc1(){ 10 test1(); 11 } 12 function JSCallOc2(){ 13 test2('少停','iOS'); 14 } 15 function aaa(){ 16 alert("OC調用了無參數的js方法"); 17 } 18 function bbb(name,num){ 19 alert(name+num); 20 } 21 22 </script> 23 24 <body bgcolor="#555555"> 25 <button type="button" onclick="JSCallOc1()">JS調用OC方法(無參)</button> 26 <button type="button" onclick="JSCallOc2()">JS調用OC方法(傳參)</button> 27 </body> 28 </html>
准備工作完畢,下面演示JS與OC的交互.
UIWebViewDelegate方法中,有四個代理方法,開發中我們可以使用這幾個方法在不同的時刻做不同的事情.
1 #pragma UIWebViewDelegate方法 2 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{ 3 NSLog(@"開始響應請求時觸發"); 4 return YES; 5 } 6 - (void)webViewDidStartLoad:(UIWebView *)webView{ 7 NSLog(@"開始加載網頁"); 8 } 9 - (void)webViewDidFinishLoad:(UIWebView *)webView{ 10 NSLog(@"網頁加載完畢"); 11 12 } 13 - (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error{ 14 NSLog(@"網頁加載出錯"); 15 16 }
JS調用OC方法並且傳參
這里,我們在網頁加載完畢之后讓JS調用OC的方法並傳參數.
1 - (void)webViewDidFinishLoad:(UIWebView *)webView{ 2 NSLog(@"網頁加載完畢"); 3 //獲取js的運行環境 4 _context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; 5 //html調用無參數OC 6 _context[@"test1"] = ^(){ 7 [self menthod1]; 8 }; 9 //html調用OC(傳參數過來) 10 _context[@"test2"] = ^(){ 11 NSArray * args = [JSContext currentArguments];//傳過來的參數 12 // for (id obj in args) { 13 // NSLog(@"html傳過來的參數%@",obj); 14 // } 15 NSString * name = args[0]; 16 NSString * str = args[1]; 17 [self menthod2:name and:str]; 18 }; 19 }
html里面
<body bgcolor="#555555"> <button type="button" onclick="JSCallOc1()">JS調用OC方法(無參)</button> <button type="button" onclick="JSCallOc2()">JS調用OC方法(傳參)</button> </body>
function JSCallOc1(){ test1(); } function JSCallOc2(){ test2('少停','iOS'); }
如上所示,先行建立一個context來獲取到JS的開發環境,使用一個block來執行OC方法.其中[@"test1"]中的test1需要和JS中的一致.
至於傳參,]JSContext currentArguments]可以獲取到js傳過來的參數數組.那么就可以獲取數組中值來使用了.接着我們就可以在這個block中調用OC的方法並且使用這些參數了.
1 #pragma 供JS調用的方法 2 -(void)menthod1{ 3 NSLog(@"JS調用了無參數OC方法"); 4 } 5 -(void)menthod2:(NSString *)str1 and:(NSString *)str2{ 6 NSLog(@"%@%@",str1,str2); 7 }
OC調用JS方法並且傳參
至於OC調用JS方法也很簡單,使用下面這個對象方法即可
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
1 #pragma OC調用JS方法 2 -(void)function1{ 3 [_webView stringByEvaluatingJavaScriptFromString:@"aaa()"]; 4 } 5 -(void)function2{ 6 NSString * name = @"pheromone"; 7 NSInteger num = 520;//准備傳去給JS的參數 8 [_webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"bbb('%@','%ld');",name,num]]; 9 }
html里面
function aaa(){ alert("OC調用了無參數的js方法"); } function bbb(name,num){ alert(name+num); }
也可以在OC中直接寫JS代碼來執行
1 //1.直接調用 2 NSString *alertJS=@"alert('test js OC')"; //准備執行的js代碼 3 [_context evaluateScript:alertJS];
演示截圖:
以上就是有關JavaScriptCore.framework這個框架的簡單使用.有關參考文檔:
對於JavaScriptCore.framework的介紹:http://www.webryan.net/2013/10/about-ios7-javascriptcore-framework/
http://nshipster.cn/javascriptcore/
對於另外一個三方庫WebViewJavascriptBridge的使用:http://blog.csdn.net/remote_roamer/article/details/7261490
本文源碼下載地址:http://download.csdn.net/detail/shaoting19910730/9453841
https://github.com/pheromone/JavaScriptCore_demo/tree/master