您的位置：首页 > 移动开发 > Android开发

Android混合开发之WebViewJavascriptBridge实现JS与java安全交互

2016-11-29 09:04 1101 查看

前言：

为了加快开发效率，目前公司一些功能使用H5开发，这里难免会用到Js与Java函数互相调用的问题，这个Android是提供了原生支持的，不过存在安全隐患，今天我们来学习一种安全方式来满足Js与java互相调用的需求。它就是WebViewJavascriptBridge。

学习动机：

先看下之前的解决办法：Android混合开发之WebView与Javascript交互

最近棒棒安全的一个市场推广来我们公司推广他们的产品，当时也没太引起我的注意，后来这个市场推广人员把我们的app的进行了他们的安全验证，然后发给我一份检测报告，关于WebView的检测内容大致如下：

<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>


View Code

总结：

这里仅仅是先找到了一种安全的调用方式，并没有进行真正的商用验证，接下来会对这个框架进一步了解，然后推广使用。


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航