iOS開發：網頁JS與OC互動（JavaScriptCore）

謙言忘語發表於2017-12-17
iOS網頁JSJavaScript

目標

本文介紹利用蘋果在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檔案了。


#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
複製程式碼

載入本地html
環境準備完成，開工

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呼叫有多個引數的JS方法

  • 上面是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];
}
複製程式碼

執行結果如下：

OC呼叫OC程式碼寫出來的js方法

網頁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的方法了。

執行結果為：

iOS開發：網頁JS與OC互動（JavaScriptCore）

  • 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);
    };
}
複製程式碼

執行結果為：

js呼叫OC方法（多引數）

參考

本章Demo地址：github.com/shixueqian/…

更多內容請參考這位大神的文章。iOS js oc相互呼叫（JavaScriptCore）（二）

謙言萬語

從簡書搬過來的，想必都知道為什麼。

相關文章