前言
小的作為一個iOS程序猿,可能研究JavaScript以及H5相關的知識并不是為了真正的要去轉行做這一方面,其實更多的為了要研究OC中的JavaScriptCore框架,JavaScriptCore框架主要是用來實現iOS與H5的交互.當然了,最早我曾經寫過iOS淺談webView的JS一種用法.(去掉web顯示頁的廣告),這種算得上最簡單的iOS與H5的交互了.現在混合編程越來越多,H5的相對講多,所以研究JavaScriptCore框架是相當有必要的.好了不扯這些沒用的了,來搞今天的主題---JavaScriptCore框架,首先來說說JavaScriptCore框架幾個常用的類.
JavaScriptCore的類說明
在做OC與H5的交互之前,我們需要先導入JavaScriptCore框架.
#import <JavaScriptCore/JavaScriptCore.h>
然后我們進入JavaScriptCore框架的JavaScriptCore.h,我們發現總共如下有幾個類.
-
JSContext
JSContext代表一個JavaScript的執行環境的一個實例。所有JavaScript執行都是在上下文內進行。JSContext還用于管理對象的生命周期內JavaScript的虛擬機(API文檔原文翻譯)。作為上下文很多地方我們的都有可能使用過,比如CoreData,CoreGraphics等等,那么上下文對象到底是什么呢?你可以理解為是一個兩者的連接橋梁,如圖所示.
-
JSValue
JSValue的主要作用就是用來接收JSContext執行后的返回結果,當然了,JSValue可以是js的任意類型,例如,js中的變量,對象以及函數.下面我們就舉個例子說明一下,例如我們現在需要從JSContext對象中接收到一個變量.我們可以如下所示.
首先在<script>標簽中我們定義了一個字符串變量.
<script type="text/javascript">
var myObject = "myObject";
</script>
然后我們在OC的代碼中如下表示,其中self.context代表著已經初始化完成的JSContext對象.
JSValue *myObject = self.context[@"myObject"];
當然了,我們如果需要在OC中使用JSValue對象,那么我們可能需要適當的轉換一下他的類型,框架提供了很多方法.比如上面的例子我們想要打印的話就可以如下所示.
NSLog(@"%@",[myObject toString]);
-
JSManagedValue
JSManagedValue這個類其實到現在我還沒有具體用到過.當時這里我也要根據API文檔說明一下.JSManagedValue是JSValue的封裝，用它可以解決JS和OC代碼之間循環引用的問題,JSManagedValue最常用的用法就是安全的從內存堆區里面引用JSValue對象.如果JSValue存儲在內存的堆區的方式是不正確的,很容易造成循環引用,然后導致JSContext對象不能正確的釋放掉.
-
JSVirtualMachine
一個JSVirtualMachine對象其實代表著一個JavaScript對象空間或者一組執行資源。JSVirtualMachine支持線程安全鎖,虛擬機,并發分配支持的JavaScript執行.也就說JSVirtualMachine用來管理整個JavaScript,當然了,這個類我也沒有用到過.
</br>
-
JSExport
JSExport是一個協議,通過實現它可以完成把一個native對象暴漏給JS,當然了我們要指定native對象.比如我們指定native對象就是自身.如下所示.
self.context[@"native"] = self;
JavaScriptCore中JSContext對象的初始化
在進行iOS與H5的交互之前,我們需要做的是對JSContext對象進行初始化的設置,全程是在webView的*- (void)webViewDidFinishLoad:(UIWebView )webView這個代理方法中進行的.所以我們需要對webView進行初始化以及設置代理,這里就不過多的言語了.我們直接看一下在代理方法中如何對JSContext對象進行初始化設置.代碼如下所示.
- (void)webViewDidFinishLoad:(UIWebView *)webView{
//對JSContext對象進行初始化
self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//驗證JSContext對象是否初始化成功
self.context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue)
{
context.exception = exceptionValue;
};
}
JavaScript調取OC代碼
上一個模塊我們已經對JSContext對象進行了初始化,那么要使用JavaScript調取OC代碼主要有兩種方式,一種是使用block(簡單粗暴);另外一種是使用JSExport協議(決勝千里).
-
block方式
block方式比較簡單,也是我比價推薦的一種,但是要注意防止循環引用問題的發生.首先我們先說一下不帶有參數的函數調用,也就是說我們不需要從網頁那邊有參數的傳值,比如跳轉頁面等等.代碼如下所示.
HTML文件中的<body>標簽的按鈕代碼
<button onclick="myAction();" style="">點擊按鈕返回上一個頁面</button>
OC中在- (void)webViewDidFinishLoad:(UIWebView *)webView方法中對block塊進行代碼實現.
__weak typeof(self)temp = self;
self.context[@"myAction"] = ^(){
[temp.navigationController popViewControllerAnimated:YES];
};
接下來我們看一下,通過頁面的傳值,我們把H5標簽的值作為參數進行傳值操作,并且調用OC的block進行打印.
HTML文件中的<body>標簽的div標簽代碼(一個輸入框,一個按鈕)
<input type="text" name="輸入框" id="textField" placeholder="請輸入要打印的信息" />
<button onclick="log(document.getElementById('textField').value);">打印輸入框信息</button>
然后我們在OC的代碼中實現以下block函數.其中string參數就是網頁中輸入框的值.
self.context[@"log"] = ^(NSString *string){
NSLog(@"%@",string);
};
效果圖如下所示.坐標是手機模擬器,右邊是Xcode控制臺.
-
JSExport協議方式
通過實現JSExport協議方式進行OC與JS的交互,這里我只是簡單的實現以下沒有參數的函數調用.首先,我們在HTML文件中創建一個按鈕用來調用OC中JSExport協議方法.
<button onclick="native.myLog();">調用OC中myLog方法</button>
我們需要把native對象指定為當前控制器,也就是自己.這句代碼是在- (void)webViewDidFinishLoad:(UIWebView *)webView方法中實現的.
self.context[@"native"] = self;
然后我們要寫一個繼承于JSExport的協議,協議如下所示.這里我要做一下對JSExportAs(PropertyName,Selector)這個宏定義做一下解釋,也就說在PropertyName代表著JS函數的名稱,而Selector代表著OC的協議方法,要注意的是Selector必須要有參數,不管是否需要傳值.(不知所以然.??,求大神講解)
@protocol WebExport <JSExport>
JSExportAs
(myLog ,
- (void)myOCLog :(NSString *)string
);
@end
定義好了方法之后,我們就讓當前的控制器遵守協議.實現代理方法.
@interface JavaScriptCallOCViewController ()<UIWebViewDelegate,WebExport>
- (void)myOCLog :(NSString *)string{
NSLog(@"你好,世界!");
}
OC調用JavaScript函數
iOS淺談webView的JS一種用法.(去掉web顯示頁的廣告)中我們說過一種比較簡單的通過OC調取JavaScript函數的方式,當然了,我們就是使用stringByEvaluatingJavaScriptFromString方法添加了一個JS語句.代碼如下所示.具體可以查看原文.
- (void)webViewDidFinishLoad:(UIWebView *)webView{
[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.getElementsByClassName('adpic')[0].style.display = 'none'"];
}
今天我們說一下如何使用JavaScriptCore讓OC調用JavaScript函數,使用JavaScriptCore進行OC調用JavaScript函數是很容易進行傳值操作的.首先我們需要在HTML文件創建愛你一個帶有id的標簽以及一個JavaScript函數.代碼如下所示.
<b id="label">需要改變的標簽</b>
<script type="text/javascript">
function labelAction(obj) {
document.getElementById('label').innerHTML = obj;
}
</script>
然后就是OC代碼中的操作了,我們依然先需要對webview和JSContext對象進行初始化設置.這里就不再重復的啰嗦了.
為了演示的效果,我把函數的調用放在了rightBarButtonItem的調用方法中.整體的代碼如下所示.
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc]initWithTitle:@"改變" style:UIBarButtonItemStyleDone target:self action:@selector(changeWebTxet)];
下面就是實現方法,首先我們要先通過JSContext對象獲取到JS中的對應函數并且使用JSValue對象進行接收.然后我們通過使用- (JSValue *)callWithArguments:(NSArray *)arguments;進行JS函數的調用,當然了這里的JS函數沒有返回值,我也就沒有做接收返回值的工作.
-(void)changeWebTxet{
JSValue *labelAction = self.context[@"labelAction"];
[labelAction callWithArguments:@[@"你好,JS世界!"]];
}
我們看一下整體的實現效果.
尾聲
JavaScriptCore框架的初步試用個人感覺還是挺好的,JavaScriptCore框架上手比較簡單.當然了,對JavaScript還要要有一定理解和基礎的,這樣學習起來更簡單一些.如果有什么問題歡迎來跟騷棟探討,最后附上本文的實現Demo.
JavaScriptCore框架Demo傳送門??
