【摘要】按安卓开发目前现状来说，开发者大部分时间还是花在UI的屏幕适配上，使用原生控件开发成本已不是那么理想，而目前结合Html5和原生控件是解决UI适配的一种很好的选择，处于APP性能也会用java和native层进行结合。不管是哪种结合，其实原理都差不多，只要按照它的协议来，是很容易的。
对此针对 webView与js的通信上的问题，我简单做了如下总结，欢迎大家多多指正，共同进步。
如果你对 Android 原生方法实现 与 js 交互还不是很清楚，请移步至：
Android WebView 与Js 交互【 详解 一 】https://blog.csdn.net/adminlxb89/article/details/81702855
android使用html+javascript来制作页面https://www.cnblogs.com/HighFun/p/3458572.html#undefined
今天，主要介绍通过三方库实现 java 与 js 交互，学习下WebViewJavascriptBridge。
1.什么是webViewjavascripBridge？
WebViewJavascriptBridge是移动UIView和Html交互通信的桥梁，用作者的话来说就是实现java（ios为oc）和js的互相调用的桥梁。替代了WebView的自带的JavascriptInterface的接口，使得我们的开发更加灵活和安全。
2. 为什么要用webViewjavascripBridge？优势在哪里？
对于安卓开发有一段时间的人来说，知道安卓4.4以前谷歌的webview存在安全漏洞，网站可以通过js注入就可以随便拿到客户端的重要信息，甚至轻而易举的调用本地代码进行流氓行为，谷歌后来发现有此漏洞后，增加了防御措施，如果要是js调用本地代码，开发者必须在代码申明JavascriptInterface，
列如在4.0之前我们要使得webView加载js只需如下代码：
mWebView.addJavascriptInterface(new JsToJava(), "myjsfunction");
4.4之后调用需要在调用方法加入加入@JavascriptInterface注解，如果代码无此申明，那么也就无法使得js生效，也就是说这样就可以避免恶意网页利用js对安卓客户端的窃取和攻击。
但是即使这样，我们很多时候需要在js记载本地代码的时候，要做一些判断和限制，或者有可能也会做些过滤和对用户友好提示，因此JavascriptInterface也就无法满足我们的需求了，特此有大神就写出了WebViewJavascriptBridge框架。
JSBridge的开源库下载地址：https://github.com/lzyzsd/JsBridge。
3.如何使用webViewjavascripBridge?
3.1 将jsBridge.jar引入到我们的工程
Eclispe: 导入jar包， 或者直接copyjar源码, jar可以到gitHub上下载。
Android Studio:
repositories {
maven { url "https://jitpack.io" }
}
dependencies {
compile 'com.github.lzyzsd:jsbridge:1.0.4'
}
3.2 布局文件
3.3 JsBridgeSimpleActivity.java
public class JsBridgeSimpleActivity extends AppCompatActivity {
private static final String TAG = JsBridgeSimpleActivity.class.getSimpleName();
@Bind(R.id.tv_show_result)
TextView tvShowResult;
@Bind(R.id.webView)
BridgeWebView webView;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_js_bridge_simple);
ButterKnife.bind(this);
initView();
}
private void initView() {
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
//初始化JSBridge,与 js 建立链接
webView.setDefaultHandler(new DefaultHandler());
webView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
return super.onJsAlert(view, url, message, result);
}
});
webView.loadUrl("file:///android_asset/jsbridge.html");
//注册函数，让js 调用
webView.registerHandler("submitFromWeb", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
Log.i(TAG, "这是 html 返回的数据：\n" + data);
Toast.makeText(JsBridgeSimpleActivity.this, data, Toast.LENGTH_LONG).show();
//对数据处理后，回传给js
String substring = data.substring(0, 5);
if (function != null) {
function.onCallBack(substring);
}
}
});
}
@OnClick({R.id.btn_send_message_to_js, R.id.btn_call_js_method})
public void onViewClicked(View view) {
switch (view.getId()) {
case R.id.btn_send_message_to_js: //发消息给js
mJavaSendToMessage();
break;
case R.id.btn_call_js_method: //java 调用js 方法
mJavaCallJs();
break;
}
}
private void mJavaSendToMessage() {
//java 发送给 js 的数据
// webView.send("hello");
webView.send("Hello", new CallBackFunction() {
@Override
public void onCallBack(String data) {
Log.i(TAG, "java 发送给 js 数据后的 回调数据：\n" + data);
}
});
}
private void mJavaCallJs() {
webView.callHandler("functionInJs", "data from java", new CallBackFunction() {
@Override
public void onCallBack(String data) {
Log.i(TAG, "回调数据来自 js =:\n" + data);
}
});
}
}
3.4 Html和js实现代码
js调用java
function testClick() {
var str1 = document.getElementById("text1").value;
var str2 = document.getElementById("text2").value;
//发送消息给java代码
var data = "name=" + str1 + ",pass=" + str2;
window.WebViewJavascriptBridge.send(
data
, function(responseData) {
document.getElementById("show").innerHTML = "repsonseData from java, data = " +responseData
});
}
function testClick1() {
var str1 = document.getElementById("text1").value;
var str2 = document.getElementById("text2").value;
//调用本地java方法
window.WebViewJavascriptBridge.callHandler(
'submitFromWeb'
, {'param': str1}
, function(responseData){
document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
});
}
function bridgeLog(logContent) {
document.getElementById("show").innerHTML = logContent;
}
//注册事件监听
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function() {
callback(WebViewJavascriptBridge)
},
false
);
}
}
//注册回调函数，第一次连接时调用 初始化函数
connectWebViewJavascriptBridge(function(bridge) {
bridge.init(function(message, responseCallback) {
console.log('JS got a message', message);
var data = {
'Javascript Responds': 'Wee!'
};
console.log('JS responding with', data);
responseCallback(data);
});
//注册函数，让java 调用
bridge.registerHandler("functionInJs", function(data, responseCallback) {
document.getElementById("show").innerHTML = ("data from Java: = " + data);
var responseData = "Javascript Says Right back aka!";
responseCallback(responseData);
});
})
4.小结
通过以上代码示例，不难发现此框架的优雅和简便，对js和java双方来说，如果Html中的js需要调用java代码，而java代码没做任何实现，那么js中方法也是无效的，反之java代码注册的函数，没在js里去回调实现，那么Java层也是无法获取js中数据的，由此可见，此通信是双方支持的，必须由双方来约定，这样就避免了Android之前存在的js注入漏洞，也很大的提高了安全性，也可以保证我们的网页数据不被第三方的APP获取。
参考文章：https://blog.csdn.net/sk719887916/article/details/47189607
JsBridge使用和原理https://www.jianshu.com/p/910e058a1d63
