javaScript与原生交互的方法

• UIWebView调用
• WebViewJavascriptBridge调用
• WKWebView调用

一、UIWebView

1、JS调用原生

//JS代码
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isiOS){   //IOS
    var params = {'money':this._money};
    window.jsObject(params);
}else if(window.mutual && window.mutual.jsObject){  //安卓
    mutual.jsObject(params);
}

//OC代码
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    context[@"jsObject"] = ^() {        
        NSLog(@"JS调用OC成功");
        NSArray *args = [JSContext currentArguments];
        for (JSValue *jsVal in args) {
            NSLog(@"%@", jsVal.toDictionary);
        }
    };
    }

// Java代码

2、原生调用JS

//JS代码
function jsObject(params){
    console.log(JSON.parse(params));
}

//OC代码

//Java代码

二、WebViewJavascriptBridge调用

1、JS调用原生

//JS代码
<script src="./jsBridge.js" type="text/javascript"></script>
window.WebViewJavascriptBridge.callHandler('jsObject', params, function(response){ });

//jsBridge.js
function setupWebViewJavascriptBridge(callback) {
    var u = navigator.userAgent;
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if(isiOS){
        if (window.WebViewJavascriptBridge) {
            callback(WebViewJavascriptBridge)
        } else {
            document.addEventListener(
                'WebViewJavascriptBridgeReady'
                , function() {
                    callback(WebViewJavascriptBridge)
                },
                false 
            );
        }
        if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
        if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }
}
//在改function 中添加原生调起js方法
setupWebViewJavascriptBridge(function(bridge) { 
    //注册原生调起方法
    //参数1： buttonjs 注册flag 供原生使用，要和原生统一
    //参数2： data  是原生传给js 的数据
    //参数3： responseCallback 是js 的回调，可以通过该方法给原生传数据
    // bridge.registerHandler("photoBack",function(data,responseCallback){
    //     //alert(data)
    //     location.href="/mystuff/index?user_token="+data.token;
    //     getuser_token=data.token;
    // });
})

//OS代码

//Java代码

2、原生调用JS

三、WKWebView调用

1、JS调用原生

//JS代码
if(isiOS){   //IOS
    var params = {'money':this.money};
    window.webkit.messageHandlers.jsObject.postMessage(params);
}

//OC代码
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
[config.userContentController addScriptMessageHandler:self name:@"jsObject"];
WKWebView *wkWebView = [[WKWebView alloc] initWithFrame:CGRectZero configuration:config];

#pragma mark - WKScriptMessageHandler

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    NSLog(@"name = %@",message.name);
    NSLog(@"body = %@",message.body);
    NSLog(@"frameInfo = %@",message.frameInfo);
    }

//Java代码

2、原生调用JS

//JS代码

//OC代码

//Java代码