Android WebView 与Js 交互【 详解 二】—— JSBridge 三方库轻松实现

本文详细介绍使用WebViewJavascriptBridge框架实现Android原生与HTML5页面的高效、安全交互。通过具体示例,展示了如何配置环境、注册处理函数及实现双向通信,有效避免了JS注入漏洞,增强了应用的安全性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

【摘要】按安卓开发目前现状来说,开发者大部分时间还是花在UI的屏幕适配上,使用原生控件开发成本已不是那么理想,而目前结合Html5和原生控件是解决UI适配的一种很好的选择,处于APP性能也会用java和native层进行结合。不管是哪种结合,其实原理都差不多,只要按照它的协议来,是很容易的。

对此针对 webView与js的通信上的问题,我简单做了如下总结,欢迎大家多多指正,共同进步。

如果你对 Android 原生方法实现 与 js 交互还不是很清楚,请移步至:

  Android WebView 与Js 交互【 详解 一 】  https://blog.youkuaiyun.com/adminlxb89/article/details/81702855

  android使用html+javascript来制作页面    https://www.cnblogs.com/HighFun/p/3458572.html#undefined

今天,主要介绍通过三方库实现 java 与 js 交互,学习下WebViewJavascriptBridge。

1.什么是webViewjavascripBridge?

WebViewJavascriptBridge是移动UIView和Html交互通信的桥梁,用作者的话来说就是实现java(ios为oc)和js的互相调用的桥梁。替代了WebView的自带的JavascriptInterface的接口,使得我们的开发更加灵活和安全。

2. 为什么要用webViewjavascripBridge?优势在哪里?

    对于安卓开发有一段时间的人来说,知道安卓4.4以前谷歌的webview存在安全漏洞,网站可以通过js注入就可以随便拿到客户端的重要信息,甚至轻而易举的调用本地代码进行流氓行为,谷歌后来发现有此漏洞后,增加了防御措施,如果要是js调用本地代码,开发者必须在代码申明JavascriptInterface,

   列如在4.0之前我们要使得webView加载js只需如下代码:

mWebView.addJavascriptInterface(new JsToJava(), "myjsfunction");  

     4.4之后调用需要在调用方法加入加入@JavascriptInterface注解,如果代码无此申明,那么也就无法使得js生效,也就是说这样就可以避免恶意网页利用js对安卓客户端的窃取和攻击。

        但是即使这样,我们很多时候需要在js记载本地代码的时候,要做一些判断和限制,或者有可能也会做些过滤和对用户友好提示,因此JavascriptInterface也就无法满足我们的需求了,特此有大神就写出了WebViewJavascriptBridge框架。

 JSBridge的开源库下载地址:https://github.com/lzyzsd/JsBridge

3.如何使用webViewjavascripBridge?

   3.1 将jsBridge.jar引入到我们的工程

        Eclispe: 导入jar包, 或者直接copyjar源码, jar可以到gitHub上下载。

        Android Studio: 

repositories {
    maven { url "https://jitpack.io" }
}

dependencies {
    compile 'com.github.lzyzsd:jsbridge:1.0.4'
}

   3.2 布局文件

  3.3  JsBridgeSimpleActivity.java 

public class JsBridgeSimpleActivity extends AppCompatActivity {
    private static final String TAG = JsBridgeSimpleActivity.class.getSimpleName();
    @Bind(R.id.tv_show_result)
    TextView tvShowResult;
    @Bind(R.id.webView)
    BridgeWebView webView;


    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_js_bridge_simple);
        ButterKnife.bind(this);
        initView();
    }

    private void initView() {
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);
        //初始化JSBridge,与 js 建立链接
        webView.setDefaultHandler(new DefaultHandler());
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {

                return super.onJsAlert(view, url, message, result);
            }
        });
        webView.loadUrl("file:///android_asset/jsbridge.html");

        //注册函数,让js 调用
        webView.registerHandler("submitFromWeb", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                Log.i(TAG, "这是 html 返回的数据:\n" + data);
                Toast.makeText(JsBridgeSimpleActivity.this, data, Toast.LENGTH_LONG).show();
                //对数据处理后,回传给js
                String substring = data.substring(0, 5);
                if (function != null) {
                    function.onCallBack(substring);
                }
            }
        });

    }

    @OnClick({R.id.btn_send_message_to_js, R.id.btn_call_js_method})
    public void onViewClicked(View view) {
        switch (view.getId()) {
            case R.id.btn_send_message_to_js: //发消息给js
                mJavaSendToMessage();

                break;
            case R.id.btn_call_js_method: //java 调用js 方法
                mJavaCallJs();
                break;
        }
    }

    private void mJavaSendToMessage() {
        //java 发送给 js 的数据
//                webView.send("hello");
        webView.send("Hello", new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                Log.i(TAG, "java 发送给 js 数据后的 回调数据:\n" + data);
            }
        });
    }

    private void mJavaCallJs() {
        webView.callHandler("functionInJs", "data from java", new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                Log.i(TAG, "回调数据来自 js =:\n" + data);
            }
        });
    }
}

  3.4 Html和js实现代码

<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <title>js调用java</title>
</head>
<body>
<p>
    <xmp id="show"></xmp>
</p>
<p>
    <xmp id="init"></xmp>
</p>

<p>
    <input type="text" id="text1" value="用户名(username)"/>
</p>
<p>
    <input type="text" id="text2" value="password"/>

<p>
    <input id="enter" onclick="testClick();" type="button" value="发消息给Native"/>
</p>
<p>
    <input id="enter1" onclick="testClick1();" type="button" value="调用Native方法"/>
</p>

</body>

<script>

        function testClick() {
        var str1 = document.getElementById("text1").value;
        var str2 = document.getElementById("text2").value;
        //发送消息给java代码
        var data = "name=" + str1 + ",pass=" + str2;
        window.WebViewJavascriptBridge.send(
        data
        , function(responseData) {
        document.getElementById("show").innerHTML = "repsonseData from java, data = " +responseData
        });
        }

        function testClick1() {
        var str1 = document.getElementById("text1").value;
        var str2 = document.getElementById("text2").value;
        //调用本地java方法
        window.WebViewJavascriptBridge.callHandler(
        'submitFromWeb'
        , {'param': str1}
        , function(responseData){
        document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
        });
        }

        function bridgeLog(logContent) {
        document.getElementById("show").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) {
        console.log('JS got a message', message);
        var data = {
        'Javascript Responds': 'Wee!'
        };
        console.log('JS responding with', data);
        responseCallback(data);
        });

        //注册函数,让java 调用
        bridge.registerHandler("functionInJs", function(data, responseCallback) {
        document.getElementById("show").innerHTML = ("data from Java: = " + data);
        var responseData = "Javascript Says Right back aka!";
        responseCallback(responseData);
        });
        })

</script>

</html>

4.小结

通过以上代码示例,不难发现此框架的优雅和简便,对js和java双方来说,如果Html中的js需要调用java代码,而java代码没做任何实现,那么js中方法也是无效的,反之java代码注册的函数,没在js里去回调实现,那么Java层也是无法获取js中数据的,由此可见,此通信是双方支持的,必须由双方来约定,这样就避免了Android之前存在的js注入漏洞,也很大的提高了安全性,也可以保证我们的网页数据不被第三方的APP获取。

参考文章:https://blog.youkuaiyun.com/sk719887916/article/details/47189607

JsBridge使用和原理 https://www.jianshu.com/p/910e058a1d63

5.其他三方库代替 Android WebView

AgentWeb , 一个简洁易用的 Android Web 库:    https://www.jianshu.com/p/c80da1c41af7

腾讯浏览器(X5WebView的使用):    https://blog.youkuaiyun.com/EUEHEUEN/article/details/79414551

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值