前言
在WebView的开发中，经常需要用到本地函数与H5界面或者Js交互，传递数据等，但是都知道Android本身自带的WebView与Js交互方式通过addJavascriptInterface这种桥接方式存在安全隐患问题，这个可以网上查一大堆，这里提供一种可行的方式进行交互，方便Android与IOS同时使用–WebViewJavascriptBridge。
github地址
https://github.com/lzyzsd/JsBridge
功能
- Js调用Android（IOS）本地方法（获取回调）；
- Android（IOS）本地调用Html函数；
- Android（IOS）本地调用Html函数并获取回调；
使用方法
添加依赖
repositories {
// ...
maven { url "https://jitpack.io" }
}
dependencies {
compile 'com.github.lzyzsd:jsbridge:1.0.4'
}
这里需要注意的一个坑：不建议直接添加github依赖，1.0.4版本存在很多问题，会在使用中出现不稳定情况，例如js无法获取Android（IOS）的回调值等。
推荐方式
直接将该库中的library clone下来，作为Module导入并依赖。
简单封装JS库文件
为了使Android和IOS同时使用，方便开发时Html界面调用，这里抽出一个JS库，统一Android和IOS的调用方式。
以下代码都是js文件中的（NativeApp.js）
判断手机类型
/**
* 获取系统类型 （根据userAgent判断）
* IOS 苹果
* ANDROID 安卓
* UNKOWN 未知
*/
getOSType : function(){
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(isAndroid){
return 'ANDROID';
}else if(isiOS){
return 'IOS';
}else{
return 'UNKOWN';
}
}
设置Android手机桥接
/**
* android系统js桥接口设置
* @param {Object} callback 桥接口回调函数 桥接方式固定写法
*/
setUpAndroidBridge: function (callback) {
if(window.WebViewJavascriptBridge) {
return callback(WebViewJavascriptBridge);
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady',
function() {
return callback(WebViewJavascriptBridge);
},
false
);
}
}
设置IOS手机桥接
IOS在使用时配置该库的代码如下：
/**
* IOS系统js桥接口设置
* @param {Object} callback 桥接口回调函数 桥接方式固定写法
*/
setUpIOSBridge : function (callback) {
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__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
设置Android和IOS统一桥接口
为了方便Html端的调用，在JS文件中，将Android和IOS的桥接口统一设置。
/**
* Android和IOS 统一桥接口
*
* data 请求参数封装
* 如 var data = {
* 'action': 'closeWebViewPage',
* 'data':'关闭当前webView视图'
*
* };
*
* callback 结果返回值回调
* 如 var callbackFun = function(resultdata){
* //resultdata 为具体返回值封装
* }
*
*
*/
setUpBridge:function(data,resultCallback){
var osType = this.getOSType();//获取系统类型
//按系统类型 分别执行原生交互
if(osType=='IOS') {
//苹果手机交互方式 消息体为字面量对象(json格式)： action 代表执行的动作 data 代表传递的数据
this.setUpIOSBridge(function(bridge) {
bridge.callHandler('IOSNativeApp',data, function(response) {
if(typeof resultCallback == 'function') {
resultCallback(response);
}
});
});
} else if(osType == 'ANDROID') {
//安卓手机交互方式
this.setUpAndroidBridge(function(bridge) {
bridge.callHandler('AndroidNativeApp', data, function(response) {
if(typeof resultCallback == 'function') {
resultCallback(response);
}
});
});
}else {
//其他类型
}
}
JS调用函数
在Js中设置两个函数，分别实现不同的功能（一个是关闭本地界面，一个是回传用户信息），为了方便在Html中调用，这里在JS中设置了两个方法，可以根据自己的实际情况封装，这里只是为了演示。
关闭（返回）界面：
/**
* 关闭当前WebView视图页面，并返回上一级原生界面
*/
closeWebViewPage : function() {
var data = {
'action': 'closeWebViewPage',
'data':'关闭当前webView视图'
};
this.setUpBridge(data,null);
}
获取当前登录用户：
/**
* 获取当前用户信息
* resultCallback 为一个回调处理函数，函数参数为返回值
* 如
* var resultCallback = function(resultData){
*
* }
*
*/
getCurrentUserInfo :function(resultCallback) {
var data = {
'action': 'getCurrentUserInfo',
'data':'获取用户信息'
};
this.setUpBridge(data,resultCallback);
}
JS库文件整体代码
var NativeApp = {
closeWebViewPage : function() {...}
getCurrentUserInfo :function(resultCallback) {...}
getOSType : function(){...}
setUpBridge:function(data,resultCallback){...}
setUpIOSBridge : function (callback) {...}
setUpAndroidBridge: function (callback) {...}
}
Html页面设置
这里需要将定义好的Js库引入使用，这里设置了两个点击按钮用于调用java本地方法（一个关闭界面，一个获取用户数据），并定义两个用于显示内容的标签（一个显示java主动调用带的参数，一个用于显示主动获取的java数据）。
<!DOCTYPE html>
<!--导入-->
<script type="text/javascript" src="NativeApp.js" ></script>
<script>
function testClick() {
//关闭web页面
NativeApp.closeWebViewPage();
}
var resultCallBack = function(resultData){
bridgeLog('来自Java的回传数据： ' + resultData);
}
function testClick1() {
//获取用户信息
NativeApp.getCurrentUserInfo(resultCallBack);
}
var resultCallBack2 = function(result) {
showDataFromNative(result);
}
function bridgeLog(logContent) {
document.getElementById("log_msg").innerHTML = logContent;
}
function showDataFromNative(dataFromNative) {
document.getElementById("data_from_native").innerHTML = dataFromNative;
}
NativeApp.setUpAndroidBridge(function(bridge) {
bridge.registerHandler("functionInJs", function(data, resultCallback){
console.log("Js收到Native的调用（需要返回值）：" + data);
showDataFromNative(data);
resultCallback("js 已接收");
});
})
NativeApp.setUpAndroidBridge(function(bridge) {
bridge.registerHandler("functionInJs_2", function(data, resultCallback){
console.log("Js收到Native的调用：" + data);
showDataFromNative(data);
});
})
</script>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>测试WebViewJsBridge</p>
<div>
<button onClick="testClick()">关闭视图界面</button>
</div>
<br/>
<div>
<button onClick="testClick1()">获取用户信息</button>
</div>
<br/>
<div id="log_msg">data</div>
<br/>
<div id="data_from_native">data</div>
</body>
</html>
界面显示如下：
js1.png
Html这里调用的时候需要注意的是，我这里是通过两个点击按钮去主动触发的JS调用本地方法，这里没法在Js中直接使用（即在Js中直接NativeApp.closeWebViewPage()）,但是可以通过settimeout来触发：
setTimeout(function(){
console.log("setTimeout--->");
NativeApp.getCurrentUserInfo(resultCallBack);
},500);
Android端使用（这里省略IOS，用法基本相同）
xml布局设置
使用该库时，需要将原生的webView控件改为BridgeWebView。为了方便演示，下面多加几个点击控件和显示控件。
<com.github.lzyzsd.jsbridge.BridgeWebView
android:id="@+id/test_bridge_webView"
android:layout_width="match_parent"
android:layout_below="@+id/web_view"
android:layout_height="200dp"/>
<Button
android:id="@+id/btn_to_js"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_below="@+id/test_bridge_webView"
android:text="Native调用JS并获取JS返回值"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/btn_to_js_2"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_below="@+id/btn_to_js"
android:text="Native调用JS"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/tv_text"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_below="@+id/btn_to_js_2"
android:padding="5dp"
android:layout_height="wrap_content"/>
Java代码（客户端调用）
注册webview监听
给WebView注册监听，当Html页面调用java本地函数时，会响应。这里第一个参数为本地java代码与Js端的约定协议内容，即Js指定要调用的java函数，第二个参数为回调，即java收到Js的调用之后做的回调，这里我将两个合在一起处理了。
mBridgeWebView.loadUrl("file:///android_asset/new_file.html");
mBridgeWebView.registerHandler("AndroidNativeApp", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
Log.e(TAG, "指定Handler接收来自web的数据：" + data);
try {
JSONObject jsonObject = new JSONObject(data);
String action = jsonObject.get("action").toString();
String data1 = jsonObject.getString("data");
Log.e("tag", "action-- : " + action);
Log.e("tag", "data -- : " + data1);
if(action.equals("closeWebViewPage")) {
finish();
} else if(action.equals("getCurrentUserInfo")) {
function.onCallBack(userName);
} else {
}
} catch (JSONException e) {
e.printStackTrace();
}
}
});
Java主动调用Js函数
java主动调用Js，Js给出回调返回值
this.button1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String data = "data from native";
mBridgeWebView.callHandler("functionInJs", data, new CallBackFunction() {
@Override
public void onCallBack(String data) {
textView.setText("Native接收到Js返回参数：" + data);
}
});
}
});
java主动调用Js，不需要获取返回值
this.button2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String data = "data from native";
mBridgeWebView.callHandler("functionInJs_2", data, null);
}
});
测试截图
- Js调用Android本地方法，不需要获取返回值
java1.png
- Js调用Android本地方法，并获取返回值
java2.png
js2.png
- Android本地调用Js方法，不需要返回值
java3.png
js3.png
- Android本地调用Js方法，并获取返回值
java4.png
js4.png
网友评论