iOS下JS與OC互相調(diào)用

在我們實際的開發(fā)過程中,經(jīng)常會遇到JS與OC相互調(diào)用的過程,現(xiàn)將一些常用的方法整理出來。
1.UIWebView 代理方法攔截URL。
2.WKWebView 代理方法攔截URL。
3.利用系統(tǒng)庫JavaScriptCore。

1.UIWebView 代理方法攔截URL

JS調(diào)用OC
js部分相關(guān)代碼

<div>
  <button class=\"btn\" type=\"button\" onclick=\"btnClick2()\">
    JS調(diào)用OC方法 一個參數(shù)
  </button>
</div>
function btnClick2() { location.href = \"testhtml://method2?iPhone7Plus\"}

testhtml是你和h5約定好的,通過在UIWebView的代理方法,實現(xiàn)調(diào)用OC的方法。
oc相關(guān)代碼

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    
    void (^AlertViewBlock)(NSString * title,NSString * message,NSString * cancel) = ^(NSString * title,NSString * message,NSString * cancel){
        UIAlertView * alertView = [[UIAlertView alloc] initWithTitle:title message:message delegate:self cancelButtonTitle:cancel otherButtonTitles:nil];
        [alertView show];
    };
    
    NSString * urlString = request.URL.absoluteString;
    NSString * scheme = @"testhtml://";
    if ([urlString hasPrefix:scheme]) {
        //
        NSString * subString = [urlString substringFromIndex:scheme.length];
        NSArray * temp = [subString componentsSeparatedByString:@"?"];
        NSString * method = [temp firstObject];
        
        if ([method isEqualToString:@"method1"]) {
            AlertViewBlock(@"JS調(diào)用OC方法",@"無參",@"取消");
        }else if ([method isEqualToString:@"method2"]) {
            NSString * param = [temp lastObject];
            AlertViewBlock(@"JS調(diào)用OC方法",[NSString stringWithFormat:@"一個參數(shù)\n參數(shù)為:%@",param],@"取消");
        }else if ([method isEqualToString:@"method3"]) {
            NSString * string = [temp lastObject];
            NSRange range = [string rangeOfString:@"&"];
            NSString * param1 = [string substringToIndex:range.location];
            NSString * param2 = [string substringFromIndex:range.location + 1];
            AlertViewBlock(@"JS調(diào)用OC方法",[NSString stringWithFormat:@"兩個參數(shù)\n參數(shù)為:%@,%@",param1,param2],@"取消");
        }
    }
    
    return YES;
}

OC調(diào)用JS
js相關(guān)代碼

function alertName(msg) { alert('OC調(diào)用JS 一個參數(shù) ' + msg )}

oc相關(guān)代碼
在oc中創(chuàng)建一個按鈕,點擊按鈕,調(diào)用js中的alertName方法

- (IBAction)buttonClick:(UIButton *)button{
       NSLog(@"OC調(diào)用JS 一個參數(shù)");
       // 如果js的方法中需要傳入多個參數(shù),可以通過字符串拼接的方式實現(xiàn)
       NSString * testJS = [NSString stringWithFormat:@"alertName('%d')",10];
       [self.webView stringByEvaluatingJavaScriptFromString:testJS];
 }

2.WKWebView攔截URL實現(xiàn)

WKWebView是Apple在iOS8推出的Webkit框架中的負(fù)責(zé)網(wǎng)頁的渲染與展示的類,區(qū)別如下:

  1. UIWebView會導(dǎo)致內(nèi)存問題,WKWebView相比UIWebView速度更快,占用內(nèi)存更少,支持更多的HTML特性。
  2. 同時WKWebView可以很容易地實現(xiàn)H5頁面加載進度。
  3. WKWebView不能彈出前端的alert,需在代理方法中彈出原生alertController。

JS調(diào)用OC
實現(xiàn)WKNavigationDelegate的代理方法,在方法中通過判斷與h5定義好的方法名稱,去調(diào)用對應(yīng)的OC方法

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{
    NSString * absoluteString = [navigationAction.request.URL.absoluteString stringByRemovingPercentEncoding];
    NSString * scheme = @"testhtml://";
    // JS調(diào)用OC
    if ([absoluteString hasPrefix:scheme]) {
        [self jsCallOCMethodWithRequest:navigationAction.request];
        decisionHandler(WKNavigationActionPolicyCancel);
    }else {
        decisionHandler(WKNavigationActionPolicyAllow);
    }
}

OC調(diào)用JS
點擊OC中的button按鈕,去調(diào)用JS中的方法,在button的方法中加入以下代碼:

NSString * testJS = [NSString stringWithFormat:@"ocCallJs('%d')",arc4random_uniform(100)];
 [self.wkWebView evaluateJavaScript:testJS completionHandler:^(id _Nullable response, NSError * _Nullable error) {}];

3.JavaScriptCore

1.導(dǎo)入<JavaScriptCore/JavaScriptCore.h>
2.遵循<UIWebViewDelegate>并實現(xiàn)- (void)webViewDidFinishLoad:(UIWebView *)webView方法。
與前兩個攔截URL明顯不同的是,JS可以直接調(diào)用原生的方法了。
JS調(diào)用OC
js代碼

<div><button class=\"btn\" type=\"button\" onclick=\"btnClick4()\">JS調(diào)用OC方法(JavaScriptCore)</button></div>
function btnClick4() { ocClick('10');}\

oc代碼
在UIWebView的- (void)webViewDidFinishLoad:(UIWebView *)webView代理方法中

JSContext * context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    //! 監(jiān)聽JS代碼里面的jsToOc方法(執(zhí)行效果上可以理解成重寫了JS的jsToOc方法)
    context[@"ocClick"] = ^(NSString * str1, NSString * str2) {
        dispatch_async(dispatch_get_main_queue(), ^{
            NSLog(@"str1 %@ , --- str2 %@ ,",str1,str2);
            // 要執(zhí)行的oc代碼
        });
    };

OC調(diào)用JS
js代碼

function ocCallJs(action, params) { document.getElementById(\"returnValue\").innerHTML = action + '?' + params;}

oc代碼

    // 寫法1.
//    [context[@"ocCallJs"] callWithArguments:@[@"111",@"222"]];
    
    // 寫法2.
    NSString *jsStr = [NSString stringWithFormat:@"ocCallJs('%d','%d')",15,20];
    [context evaluateScript:jsStr];

注意點:JavaScriptCore可以通過JS直接調(diào)用原生函數(shù),所以相對于攔截URL響應(yīng),JS與原生的數(shù)據(jù)傳遞更方便。
因為WKWebView不能通過KVC獲取JSContext對象,所以原生使用JavaScriptCore做數(shù)據(jù)交互的時候,就不能用WKWebView去加載H5頁面。

demo

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容