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

時間 2019-11-17

標籤 ios 開發網頁交互 javascriptcore 欄目 iOS 简体版

原文原文鏈接

目標

本文介紹利用蘋果在iOS7時發佈的JavaScriptCore.framework框架進行js與OC的交互。咱們想要達到的目標是：javascript

OC調用網頁上的js方法
網頁js調用APP中的OC方法

JavaSciptCore.framework框架介紹

JavaScriptCore是webkit的一個重要組成部分，主要是對js進行解析和提供執行環境。具體介紹請看這篇簡書的文章:JavaScriptCore 使用html

準備環境

建立一個名爲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窗口。java

<!--  定義js函數  -->
    <script type="text/javascript">
        function test1()
        {
            alert("我是被OC調用的js方法")
        }
    </script>
複製代碼

body裏面建立了一個按鈕，點擊按鈕會調用printHelloWorld()方法。這裏沒有定義這個方法的實現，等下咱們會在OC代碼中定義git

<!-- 建立一個按鈕，點擊就調用 printHelloWorld()   函數 -->
    <button onclick=" printHelloWorld() ">在Xcode控制檯打印HelloWold</button>
複製代碼

好了，如今咱們能夠加載這個本地html文件了。github

#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()，如今咱們就來調用這個方法web

先導入JavaScriptCore.framework。工程->Build Phases->Link Binary With Libraries->點擊「+」->輸入「JavaScriptCore」->Add bash
在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被調用了測試
上面的代碼都是無參的，加入是有參數的呢？咱們在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);
    };
}
複製代碼

運行結果爲：