UIWebView中Objective C和JavaScript通訊

aron1992發表於2019-04-04
UIWebViewObjectJavaScript

JS和OC的互動，使用到JavaScriptCore這個框架，用到的類和協議有JSExport 、JSContext

網頁很簡單，只有一個button按鈕，button按鈕的事件點選主要執行了wst.duobao('123');，wst是自定義的一個普通JS物件，在OC中需要使用到wst捕獲對應的js方法呼叫。
網頁html程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5page-oc</title>

    <script>
        wst = new Object();
        wst.duobao = function () {}

        function btn1Click() {
            wst.duobao('123');
            alert("after call");
        }
    </script>

</head>
<body>

<input type="button" value="button c" onclick="btn1Click()">

</body>
</html>
複製程式碼

OC處理JS的事件回撥，主要步驟

  1. 定義JSContext的物件jsContext。
  2. 在WebView的代理方法webViewDidFinishLoad:中呼叫[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]獲取到JSContext的物件。
  3. 呼叫_jsContext[@"wst"] = self;註冊JS中的物件wst派發的方法的處理模組，這裡是把處理wst模組的代理設定為當前類，實際中如果有多個模組可以使用一個自定義的實現JSExport來單獨處理JS的邏輯，本例中有實現了JSExport協議的自定義協議JavaScriptObjectiveCDelegate，具體看第4點。
  4. 自定義繼承JSExport協議JavaScriptObjectiveCDelegate，這邊定義JS和OC互動的介面。
  5. 實現JavaScriptObjectiveCDelegate，重寫對應的方法處理JS的回撥，注意JS回撥的方法是在子執行緒執行的，如果涉及到UI操作，需要派發到主執行緒中處理。

OC呼叫JS方法

呼叫JSContext的方法evaluateScript，引數為JS程式碼即可

 [_jsContext evaluateScript:@"alert('oc call js')"];
複製程式碼

完整的程式碼如下：


// 自定義繼承`JSExport`協議，這邊定義JS和OC互動的介面
@protocol JavaScriptObjectiveCDelegate <JSExport>

- (void)duobao(NSString*)params;

@end

@interface YTTWebViewController ()<UIWebViewDelegate, UIScrollViewDelegate, JavaScriptObjectiveCDelegate>

@property (nonatomic, strong) UIWebView *webView;
@property (nonatomic, strong, readonly) JSContext *jsContext;

@end

// ...

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
    if (_jsContext == nil) {
        // 1.從WebView中獲取到JSContext物件
        _jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
        
        // 2. 關聯列印異常
        _jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
            context.exception = exceptionValue;
            NSLog(@"異常資訊：%@", exceptionValue);
        };
        _jsContext[@"wst"] = self;
    }
    
    // OC呼叫JS
    [_jsContext evaluateScript:@"alert('oc call js')"];
}

#pragma mark - JavaScriptObjectiveCDelegate
-(void)duobao {
    // JS呼叫OC是在子執行緒
    NSLog(@"current thread = %@", [NSThread currentThread]);
    dispatch_async(dispatch_get_main_queue(), ^{
        NSLog(@"js call oc");
    });
}
複製程式碼

相關文章