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

关注

原创最新推荐文章于 2026-09-20 21:42:17 发布 1.3k 阅读 AI 写同款· GEO 优化 ›

Kotlin实现jsBridge技术详解随着移动互联网的蓬勃发展，混合应用模式成为了众多开发者的新选择。在这个模式中，JavaScript Bridge（简称jsBridge）扮演了一个关键角色，它是连接原生应用（Native App）与移动网页（Web View）之间的一座桥梁。通过jsBridge，我们可以实现两者之间的数据交换和功能调用，使得原生应用可以调用JavaScript代码，同时JavaScript代码也能操作原生接口。这个过程不仅增强了应用的动态性和可扩展性，还能够在不更新应用的情况下，更新Web页面和功能逻辑。阅读详情

【摘要】按安卓开发目前现状来说，开发者大部分时间还是花在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