1. jsbridge框架的基本使用
框架地址 https://github.com/lzyzsd/JsBridge
导入省略。
使用BridgeWebView来代替webview控件。
在js中初始化WebViewJavascriptBridge。
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function() {
callback(WebViewJavascriptBridge)
},
false
);
}
}
- android调用js
bwv.callHandler("functionInJs", "data from Java"+ "哈哈", new CallBackFunction() {
@Override
public void onCallBack(String data) {
Log.i("12312", "reponse data from js " + data);
}
});
对应js代码,以handlerName匹配对应。这里handlerName为functionInJs。
connectWebViewJavascriptBridge(function(bridge) {
bridge.init(function(message, responseCallback) {
console.log('JS got a message', message);
});
//对应的
bridge.registerHandler("functionInJs", function(data, responseCallback) {
if (responseCallback) {
var responseData = "Javascript Says Right back aka!";
responseCallback(responseData);
}
});
})
- js调用android
//js
function onClickForTest(){
window.WebViewJavascriptBridge.callHandler(
'submitFromWeb'
, {'param': '来自html'}
, function(responseData) {
}
);
}
触发上面js方法,就会触发下面的handler方法执行。调用匹配就是通过handlerName来确认的。这里handlerName是submitFromWeb。
bridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
// handler: {"param":"来自html"}
Log.d("submitFromWeb", "handler: "+data);
}
});
2.原生webview与android交互
- android调用js
//js代码
function callJS(){
alert("android调用js");
}
方式有二:
(1)、webview的loadUrl()
loadUrl()网页后,loadUrl()调用 js
wv.loadUrl("javascript:callJS()");
如果调用js的alert,开启JavaScript后,要允许js弹窗,调用setWebChromeClient,重写WebChromeClient的onJsAlert(),使用AlertDialog.Builder实现弹窗
.
(2)、webview的evaluateJavascript() android4.4后才可使用
wv.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//js返回值
}
});
- js调用android
有三种方式:
(1)webview的addJavascriptInterface(此方法在4.2版本之前有漏洞)
创建JsCallAndroid ,定义js需要调用的方法,并添加注解JavascriptInterface
public class JsCallAndroid {
@JavascriptInterface
public void test(String data) {
Log.d("JsCallAndroid", data);
}
}
js代码
function testAndroid(){
test.test("js调用了Android的方法");
}
通过点击html的button来触发
<button type="button" id="button1" onclick="testAndroid()" />
使用addJavascriptInterface
wv.addJavascriptInterface(new JsCallAndroid(),"test");
(2)WebViewClient的shouldOverrideUrlLoading()
android代码
//这个android 5.0 以上使用
wv.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
Log.d("request", request.toString() + "");
return super.shouldOverrideUrlLoading(view, request);
}
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return super.shouldOverrideUrlLoading(view, url);
}
});
js代码
<button type="button" id="button1" title="test" onclick="testAndroid()" />
function testAndroid(){
document.location = "js://sendName?name=111&age=222";
}
(3)通过WebChromeClient的onJsAlert、onJsConfirm、onJsPrompt
function testAndroid(){
var result=prompt("请输入");
}
<button type="button" id="button1" onclick="testAndroid()" >test</button>
对应android代码
wv.setWebChromeClient(new WebChromeClient(){
@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
return super.onJsPrompt(view, url, message, defaultValue, result);
}
});
alert()、confirm()对应onJsAlert、onJsConfirm