WebView与Js交互-JsBridge的使用

前言

在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中。

/**
 * 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 resu