【iOS開發】網頁JS與OC交互（JavaScriptCore）

目標

本文介紹利用蘋果在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
加載本地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的方法了。

運行結果為：


  • 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地址：https://github.com/shixueqian/JSandOC.git
更多內容請參考這位大神的文章。iOS js oc相互調用（JavaScriptCore）（二）

謙言萬語

這篇文章寫得好累。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容