前言
在我們的日常開(kāi)發(fā)當(dāng)中,為了加快開(kāi)發(fā)效率,目前公司的一些功能需求是采用H5開(kāi)發(fā)的,所以就涉及到一個(gè)Js與Java的相互調(diào)用,Android提供了原生的WebView來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的加載,但是存在的一些安全隱患問(wèn)題,今天介紹一種安全方式來(lái)滿足Js與java互相調(diào)用的需求,它就是WebViewJavascriptBridge.
WebViewJavascriptBridge介紹
- WebViewJavascriptBridge是WebView和Js交互通信的橋梁，它是實(shí)現(xiàn)java和js的互相調(diào)用的橋梁惕味。替代了WebView的自帶的JavascriptInterface的接口，使得開(kāi)發(fā)者更方便的讓js和native靈活交互残制，使我們的開(kāi)發(fā)更加靈活和安全
- 目前實(shí)現(xiàn)JSBridge的開(kāi)源框架很多蹲蒲，這里介紹一個(gè)開(kāi)源框架：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調(diào)用Java方法并傳遞數(shù)據(jù)
可以通過(guò)registerHandler（）用來(lái)注冊(cè)一個(gè)java函數(shù)，來(lái)實(shí)現(xiàn)js回調(diào)的handler
//必須和js同名函數(shù)，注冊(cè)具體執(zhí)行函數(shù)忿檩，類(lèi)似java實(shí)現(xiàn)類(lèi)。
//第一參數(shù)是訂閱的java本地函數(shù)名字 第二個(gè)參數(shù)是回調(diào)Handler ,
參數(shù)返回js請(qǐng)求的resqustData,function.onCallBack（）回調(diào)到j(luò)s爆阶，調(diào)用function(responseData)
mBridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {
@Override public void handler(String data, CallBackFunction function) {
Log.e(TAG, "指定Handler接收來(lái)自web的數(shù)據(jù)：" + data);
function.onCallBack("指定Handler收到Web發(fā)來(lái)的數(shù)據(jù)燥透，回傳數(shù)據(jù)給你");
}
});
Js做如下聲明
function testClick1() {
//調(diào)用本地java方法
//第一個(gè)參數(shù)是 調(diào)用java的函數(shù)名字 第二個(gè)參數(shù)是要傳遞的數(shù)據(jù) 第三個(gè)參數(shù)js在被回調(diào)后具體執(zhí)行方法，responseData為java層回傳數(shù)據(jù)
var data='發(fā)送消息給java代碼指定接收';
window.WebViewJavascriptBridge.callHandler(
'submitFromWeb'
,data
, function(responseData) {
bridgeLog('來(lái)自Java的回傳數(shù)據(jù)： ' + responseData);
}
);
}
注意事項(xiàng)
-
Js調(diào)用Java方法的時(shí)候必須申明和初始化,不然Java返回的值,Js這邊接收不到
//聲明 //注冊(cè)事件監(jiān)聽(tīng) function connectWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge) } else { document.addEventListener( 'WebViewJavascriptBridgeReady' , function() { callback(WebViewJavascriptBridge) }, false ); } }
//初始化
//注冊(cè)回調(diào)函數(shù)辨图，第一次連接時(shí)調(diào)用 初始化函數(shù)
//接收默認(rèn)Java方法傳過(guò)來(lái)的參數(shù)
connectWebViewJavascriptBridge(function(bridge) {
bridge.init(function(message, responseCallback) {
bridgeLog('默認(rèn)接收收到來(lái)自Java數(shù)據(jù)： ' + message); var responseData = '默認(rèn)接收收到來(lái)自
Java的數(shù)據(jù)班套，回傳數(shù)據(jù)給你';
responseCallback(responseData);
});
//接收指定的Java方法傳過(guò)來(lái)的參數(shù)
bridge.registerHandler("functionInJs", function(data, responseCallback) {
bridgeLog('指定接收收到來(lái)自Java數(shù)據(jù)： ' + data); var responseData = '指定接收收到來(lái)自Java的數(shù)據(jù)，回傳數(shù)據(jù)給你';
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接收全部來(lái)自web的數(shù)據(jù)："+data);
function.onCallBack("DefaultHandler收到Web發(fā)來(lái)的數(shù)據(jù)故河，回傳數(shù)據(jù)給你");
}
});
//必須和js同名函數(shù)吱韭，注冊(cè)具體執(zhí)行函數(shù)，類(lèi)似java實(shí)現(xiàn)類(lèi)鱼的。
//第一參數(shù)是訂閱的java本地函數(shù)名字 第二個(gè)參數(shù)是回調(diào)Handler , 參數(shù)返回js請(qǐng)求的resqustData,function.onCallBack（）回調(diào)到j(luò)s杉女，調(diào)用function(responseData)
mBridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
Log.e(TAG, "指定Handler接收來(lái)自web的數(shù)據(jù)：" + data);
function.onCallBack("指定Handler收到Web發(fā)來(lái)的數(shù)據(jù)，回傳數(shù)據(jù)給你");
}
});
findViewById(R.id.to_web_default).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mBridgeWebView.send("發(fā)送數(shù)據(jù)給web默認(rèn)接收",new CallBackFunction(){
@Override
public void onCallBack(String data) {
Log.e(TAG, "來(lái)自web的回傳數(shù)據(jù)：" + data);
}
});
}
});
findViewById(R.id.to_web).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mBridgeWebView.callHandler("functionInJs","發(fā)送數(shù)據(jù)給web指定接收",new CallBackFunction(){
@Override
public void onCallBack(String data) {
Log.e(TAG, "來(lái)自web的回傳數(shù)據(jù)：" + 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="默認(rèn)傳遞數(shù)據(jù)給Web"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/to_web"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:text="指定傳遞數(shù)據(jù)給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() {
//發(fā)送消息給java代碼
var data = '發(fā)送消息給java代碼全局接收';
//第一個(gè)參數(shù)要發(fā)送的數(shù)據(jù) 第二個(gè)參數(shù)js在被回調(diào)后具體執(zhí)行方法鸳吸，responseData為java層回傳數(shù)據(jù)
window.WebViewJavascriptBridge.send(
data
, function(responseData) {
bridgeLog('來(lái)自Java的回傳數(shù)據(jù)： ' +responseData);
}
);
}
function testClick1() {
//調(diào)用本地java方法
//第一個(gè)參數(shù)是 調(diào)用java的函數(shù)名字 第二個(gè)參數(shù)是要傳遞的數(shù)據(jù) 第三個(gè)參數(shù)js在被回調(diào)后具體執(zhí)行方法熏挎，responseData為java層回傳數(shù)據(jù)
var data='發(fā)送消息給java代碼指定接收';
window.WebViewJavascriptBridge.callHandler(
'submitFromWeb'
,data
, function(responseData) {
bridgeLog('來(lái)自Java的回傳數(shù)據(jù)： ' + responseData);
}
);
}
function bridgeLog(logContent) {
document.getElementById("log_msg").innerHTML = logContent;
}
//注冊(cè)事件監(jiān)聽(tīng)
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function() {
callback(WebViewJavascriptBridge)
},
false
);
}
}
//注冊(cè)回調(diào)函數(shù)，第一次連接時(shí)調(diào)用 初始化函數(shù)
connectWebViewJavascriptBridge(function(bridge) {
bridge.init(function(message, responseCallback) {
bridgeLog('默認(rèn)接收收到來(lái)自Java數(shù)據(jù)： ' + message);
var responseData = '默認(rèn)接收收到來(lái)自Java的數(shù)據(jù)晌砾，回傳數(shù)據(jù)給你';
responseCallback(responseData);
});
bridge.registerHandler("functionInJs", function(data, responseCallback) {
bridgeLog('指定接收收到來(lái)自Java數(shù)據(jù)： ' + data);
var responseData = '指定接收收到來(lái)自Java的數(shù)據(jù)坎拐，回傳數(shù)據(jù)給你';
responseCallback(responseData);
});
})
</script>
</head>
<body>
<p>WebViewJsBridge</p>
<div>
<button onClick="testClick()">發(fā)送數(shù)據(jù)給默認(rèn)Handler接收</button>
</div>
<br/>
<div>
<button onClick="testClick1()">發(fā)送數(shù)據(jù)給指定Handler接收</button>
</div>
<br/>
<div id="log_msg">調(diào)用打印信息</div>
</body>
</html>
ios和Android通用聲明,針H5那邊
之前H5寫(xiě)的一套代碼,ios和Android不能通用,針對(duì)這種情況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內(nèi)定義的對(duì)應(yīng)
setupWebViewJavascriptBridge(function(bridge) {
//處理 oc 調(diào)用 js
/*bridge.registerHandler('registerAction',function(data,responseCallback) {
//處理oc給的傳參
alert('oc請(qǐng)求js 傳值參數(shù)是：'+data);
var responseData = { 'result':'handle success' };
//處理完，回調(diào)傳值給oc
responseCallback(responseData);
});*/
//js判斷手機(jī)操作系統(tǒng)(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': '測(cè)試中文!'
};
console.log('JS responding with', data);
responseCallback(data);
});
}
if (isIOS) { /*這個(gè)是ios操作系統(tǒng)*/ }
附上一篇傳送門(mén)
