目標
本文介紹利用蘋果在iOS7時發布的JavaScriptCore.framework框架進行js與OC的交互。我們想要達到的目標是：
- OC調用網頁上的js方法
- 網頁js調用APP中的OC方法
JavaSciptCore.framework框架介紹
JavaScriptCore是webkit的一個重要組成部分，主要是對js進行解析和提供執行環境。
具體介紹請看這篇簡書的文章:JavaScriptCore 使用
準備環境
- 創建一個名為
JS與OC交互Demo的iOS工程。然后在storyboard添加一個UIWebVeiw，并設置上下左右約束為0，背景設為白色。 - 剛才創建的webView作為ViewController的屬性。用webView加載百度界面
- 編寫html文件
由于沒有現成的網頁能夠符合我們這篇文章的需求，所以樓主自己做了一個本地的html文件。作為我們的素材。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS與OC交互</title>
<!-- 定義js函數 -->
<script type="text/javascript">
function test1()
{
alert("我是被OC調用的js方法")
}
</script>
</head>
<body>
<br /><br /><br /><br />
<!-- 創建一個按鈕，點擊就調用 printHelloWorld() 方法 -->
<button onclick="printHelloWorld()">在Xcode控制臺打印HelloWold</button>
</body>
</html>
html的代碼很簡單
首先是在head里面定義了一個js函數test1()。調用這個函數會彈出一個alert窗口。
<!-- 定義js函數 -->
<script type="text/javascript">
function test1()
{
alert("我是被OC調用的js方法")
}
</script>
body里面創建了一個按鈕，點擊按鈕會調用printHelloWorld()方法。這里沒有定義這個方法的實現，等下我們會在OC代碼中定義
<!-- 創建一個按鈕，點擊就調用 printHelloWorld() 函數 -->
<button onclick=" printHelloWorld() ">在Xcode控制臺打印HelloWold</button>
好了，現在我們可以加載這個本地html文件了。
//
// ViewController.m
// JS與OC交互Demo
//
// Created by 石學謙 on 16/7/9.
// Copyright ? 2016年 shixueqian. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()<UIWebViewDelegate>
//webView
@property (weak, nonatomic) IBOutlet UIWebView *webView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//設置webView代理
self.webView.delegate = self;
//獲取本地html路徑
NSString *path = [[NSBundle mainBundle] pathForResource:@"index.html" ofType:nil];
//中文路徑要轉碼
path = [path stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
//加載html
NSURL *url = [NSURL URLWithString:path];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[self.webView loadRequest:request];
}
-(void)webViewDidFinishLoad:(UIWebView *)webView {
NSLog(@"網頁加載完成");
}
@end
環境準備完成，開工
OC調用網頁上的JS方法
我們的html文件定義了一個js方法test1()，現在我們就來調用這個方法
-
先導入JavaScriptCore.framework。
工程->Build Phases->Link Binary With Libraries->點擊“+”->輸入“JavaScriptCore”->Add
導入JavaScriptCore.framework 在ViewController.m導入頭文件
#import <JavaScriptCore/JavaScriptCore.h>。寫代碼
- (void)webViewDidFinishLoad:(UIWebView *)webView {
NSLog(@"網頁加載完成");
[self demo1];
}
- (void)demo1 {
//創建JSContext對象，（此處通過當前webView的鍵獲取到jscontext）
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//OC調用JS方法
[context evaluateScript:@"test1()"];
}
-
運行之后會彈出一個alert窗口，證明html上的js方法
test1被調用了
OC調用JS方法 上面的代碼都是無參的，加入是有參數的呢？
我們在html文件中加一個js方法test3(a,b)。方法有兩個參數。
<!-- 定義js函數 -->
<script type="text/javascript">
function test3(a,b)
{
alert("我是被OC調用的js方法" + a + b)
}
</script>
然后在ViewController.m里面調用
-(void)webViewDidFinishLoad:(UIWebView *)webView {
NSLog(@"網頁加載完成");
// [self demo1];
[self demo2];
}
//OC調用有多個參數的JS方法
- (void)demo2 {
//創建JSContext對象
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
[context evaluateScript:@"test1(\"我是參數a\",\"我是參數b\")"];
}
運行結果為：
- 上面是OC調用html中定義的JS方法。我們還可以在iOS程序里面寫一段JS代碼來調用。
-(void)webViewDidFinishLoad:(UIWebView *)webView {
NSLog(@"網頁加載完成");
// [self demo1];
// [self demo2];
[self demo3];
}
//OC調用OC代碼寫出來的js方法
- (void)demo3 {
//創建JSContext對象
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//JS代碼
NSString *jsCode = [NSString stringWithFormat:@"alert(\"我是OC里面的js方法\")"];
//OC調用JS方法
[context evaluateScript:jsCode];
}
運行結果如下：
網頁JS調用APP中的OC方法
既然OC可以調用JS的方法，那JS也能調用OC的方法。
js調用OC方法分兩種情況
js里面直接調用方法
js里面通過對象調用方法
我們這里只討論第一次比較簡單的情況。js方法沒有參數的情況
<!-- 創建一個按鈕，點擊就調用 printHelloWorld() 函數 -->
<button onclick="printHelloWorld()">在Xcode控制臺打印HelloWold</button>
-(void)webViewDidFinishLoad:(UIWebView *)webView {
NSLog(@"網頁加載完成");
// [self demo1];
// [self demo2];
// [self demo3];
[self demo4];
}
js調用OC方法（無參數）
- (void)demo4 {
//創建JSContext對象
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//注冊printHelloWorld方法
context[@"printHelloWorld"] = ^() {
NSLog(@"Hello World !");
};
}
根據當前的webView獲取到JSContext對象之后，printHelloWorld這個方法“注冊”一個實現。實現的代碼在block里面。block里面就可以用OC寫你想要寫的東西了。
也就是說，點擊了網頁上的在Xcode控制臺打印HelloWold這個button之后，網頁會調用printHelloWorld()方法，printHelloWorld()方法的實現就在block內。這樣，我們就實現了js調用OC的方法了。
運行結果為：
- js方法有參數
如果js方法有參數，只要在block的參數里面寫上參數，就可以使用這些參數了。
為了測試，我們在htm里面加一個button
<body>
<br /><br /><br /><br />
<!-- 創建一個按鈕，點擊就調用 printHelloWorld() 函數 -->
<button onclick="printHelloWorld()">在Xcode控制臺打印HelloWold</button>
<br/>
<!-- 創建一個按鈕，點擊就調用printAandB()方法 -->
<button onclick="printAandB('我是A','我是B')">打印參數A和參數B</button>
</body>
然后寫方法
-(void)webViewDidFinishLoad:(UIWebView *)webView {
NSLog(@"網頁加載完成");
// [self demo1];
// [self demo2];
// [self demo3];
// [self demo4];
[self demo5];
}
//js調用OC方法（多參數）
- (void)demo5 {
//創建JSContext對象
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//注冊printAandB方法
context[@"printAandB"] = ^(NSString *A ,NSString *B) {
NSLog(@"%@,%@",A,B);
};
}
運行結果為：
參考
本章Demo地址：https://github.com/shixueqian/JSandOC.git
更多內容請參考這位大神的文章。iOS js oc相互調用（JavaScriptCore）（二）
謙言萬語
這篇文章寫得好累。
