前言
在我们的日常开发当中,为了加快开发效率,目前公司的一些功能需求是采用H5开发的,所以就涉及到一个Js与Java的相互调用,Android提供了原生的WebView来实现网页的加载,但是存在的一些安全隐患问题,今天介绍一种安全方式来满足Js与java互相调用的需求,它就是WebViewJavascriptBridge.
WebViewJavascriptBridge介绍
- WebViewJavascriptBridge是WebView和Js交互通信的桥梁，它是实现java和js的互相调用的桥梁。替代了WebView的自带的JavascriptInterface的接口，使得开发者更方便的让js和native灵活交互，使我们的开发更加灵活和安全
- 目前实现JSBridge的开源框架很多，这里介绍一个开源框架：https://github.com/lzyzsd/JsBridge
WebViewJavascriptBridge使用方式
-
添加配置信息
allprojects { repositories { jcenter() maven { url "https://jitpack.io" } } } -
在module的build.pradle中添加如下配置
dependencies { compile 'com.github.lzyzsd:jsbridge:1.0.4' } -
用BridgeWebView替换WebView
<com.github.lzyzsd.jsbridge.BridgeWebView android:id="@+id/test_bridge_webView" android:layout_width="match_parent" android:layout_height="match_parent"/>
Js调用Java方法并传递数据
可以通过registerHandler（）用来注册一个java函数，来实现js回调的handler
//必须和js同名函数，注册具体执行函数，类似java实现类。
//第一参数是订阅的java本地函数名字 第二个参数是回调Handler ,
参数返回js请求的resqustData,function.onCallBack（）回调到js，调用function(responseData)
mBridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {
@Override public void handler(String data, CallBackFunction function) {
Log.e(TAG, "指定Handler接收来自web的数据：" + data);
function.onCallBack("指定Handler收到Web发来的数据，回传数据给你");
}
});
Js做如下声明
function testClick1() {
//调用本地java方法
//第一个参数是 调用java的函数名字 第二个参数是要传递的数据 第三个参数js在被回调后具体执行方法，responseData为java层回传数据
var data='发送消息给java代码指定接收';
window.WebViewJavascriptBridge.callHandler(
'submitFromWeb'
,data
, function(responseData) {
bridgeLog('来自Java的回传数据： ' + responseData);
}
);
}
注意事项
-
Js调用Java方法的时候必须申明和初始化,不然Java返回的值,Js这边接收不到
//声明 //注册事件监听 function connectWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge) } else { document.addEventListener( 'WebViewJavascriptBridgeReady' , function() { callback(WebViewJavascriptBridge) }, false ); } }
//初始化
//注册回调函数，第一次连接时调用 初始化函数
//接收默认Java方法传过来的参数
connectWebViewJavascriptBridge(function(bridge) {
bridge.init(function(message, responseCallback) {
bridgeLog('默认接收收到来自Java数据： ' + message); var responseData = '默认接收收到来自
Java的数据，回传数据给你';
responseCallback(responseData);
});
//接收指定的Java方法传过来的参数
bridge.registerHandler("functionInJs", function(data, responseCallback) {
bridgeLog('指定接收收到来自Java数据： ' + data); var responseData = '指定接收收到来自Java的数据，回传数据给你';
responseCallback(responseData);
});
})
整体代码示例
MainActivity
public class MainActivity extends AppCompatActivity {
private static final String TAG=MainActivity.class.getSimpleName();
private BridgeWebView mBridgeWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
}
private void initViews(){
mBridgeWebView= (BridgeWebView) findViewById( R.id.test_bridge_webView);
mBridgeWebView.loadUrl("file:///android_asset/wx.html");
mBridgeWebView.setDefaultHandler(new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
Log.e(TAG, "DefaultHandler接收全部来自web的数据："+data);
function.onCallBack("DefaultHandler收到Web发来的数据，回传数据给你");
}
});
//必须和js同名函数，注册具体执行函数，类似java实现类。
//第一参数是订阅的java本地函数名字 第二个参数是回调Handler , 参数返回js请求的resqustData,function.onCallBack（）回调到js，调用function(responseData)
mBridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
Log.e(TAG, "指定Handler接收来自web的数据：" + data);
function.onCallBack("指定Handler收到Web发来的数据，回传数据给你");
}
});
findViewById(R.id.to_web_default).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mBridgeWebView.send("发送数据给web默认接收",new CallBackFunction(){
@Override
public void onCallBack(String data) {
Log.e(TAG, "来自web的回传数据：" + data);
}
});
}
});
findViewById(R.id.to_web).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mBridgeWebView.callHandler("functionInJs","发送数据给web指定接收",new CallBackFunction(){
@Override
public void onCallBack(String data) {
Log.e(TAG, "来自web的回传数据：" + data);
}
});
}
});
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context="com.whoislcj.jsbridge.MainActivity">
<com.github.lzyzsd.jsbridge.BridgeWebView
android:id="@+id/test_bridge_webView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<Button
android:id="@+id/to_web_default"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:text="默认传递数据给Web"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/to_web"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:text="指定传递数据给Web"
android:layout_height="wrap_content"/>
</LinearLayout>
wx.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script >
function testClick() {
//发送消息给java代码
var data = '发送消息给java代码全局接收';
//第一个参数要发送的数据 第二个参数js在被回调后具体执行方法，responseData为java层回传数据
window.WebViewJavascriptBridge.send(
data
, function(responseData) {
bridgeLog('来自Java的回传数据： ' +responseData);
}
);
}
function testClick1() {
//调用本地java方法
//第一个参数是 调用java的函数名字 第二个参数是要传递的数据 第三个参数js在被回调后具体执行方法，responseData为java层回传数据
var data='发送消息给java代码指定接收';
window.WebViewJavascriptBridge.callHandler(
'submitFromWeb'
,data
, function(responseData) {
bridgeLog('来自Java的回传数据： ' + responseData);
}
);
}
function bridgeLog(logContent) {
document.getElementById("log_msg").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) {
bridgeLog('默认接收收到来自Java数据： ' + message);
var responseData = '默认接收收到来自Java的数据，回传数据给你';
responseCallback(responseData);
});
bridge.registerHandler("functionInJs", function(data, responseCallback) {
bridgeLog('指定接收收到来自Java数据： ' + data);
var responseData = '指定接收收到来自Java的数据，回传数据给你';
responseCallback(responseData);
});
})
</script>
</head>
<body>
<p>WebViewJsBridge</p>
<div>
<button onClick="testClick()">发送数据给默认Handler接收</button>
</div>
<br/>
<div>
<button onClick="testClick1()">发送数据给指定Handler接收</button>
</div>
<br/>
<div id="log_msg">调用打印信息</div>
</body>
</html>
ios和Android通用声明,针H5那边
之前H5写的一套代码,ios和Android不能通用,针对这种情况H5需做如下声明
//申明交互
function setupWebViewJavascriptBridge(callback) {
//Android使用
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
}
else{
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function() {
callback(WebViewJavascriptBridge)
},
false
);
}
//ios使用
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 = '[https://__bridge_loaded__](https://__bridge_loaded__/)';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
//处理交互 方法名要和 native app内定义的对应
setupWebViewJavascriptBridge(function(bridge) {
//处理 oc 调用 js
/*bridge.registerHandler('registerAction',function(data,responseCallback) {
//处理oc给的传参
alert('oc请求js 传值参数是：'+data);
var responseData = { 'result':'handle success' };
//处理完，回调传值给oc
responseCallback(responseData);
});*/
//js判断手机操作系统(ios或者是Android)
var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
//安卓，初始化jsBridge
bridge.init(function(message, responseCallback) {
console.log('JS got a message', message);
var data = {
'Javascript Responds': '测试中文!'
};
console.log('JS responding with', data);
responseCallback(data);
});
}
if (isIOS) { /*这个是ios操作系统*/ }
附上一篇传送门
