{"id":20543801,"url":"https://github.com/chinalike/jsbridge","last_synced_at":"2025-07-14T18:06:24.803Z","repository":{"id":108542841,"uuid":"372749426","full_name":"ChinaLike/JsBridge","owner":"ChinaLike","description":"Android 中 WebView 与原生通信","archived":false,"fork":false,"pushed_at":"2024-04-18T06:23:06.000Z","size":7511,"stargazers_count":33,"open_issues_count":0,"forks_count":8,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-14T09:50:42.275Z","etag":null,"topics":["bridge","java","javascript","webview"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ChinaLike.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-01T08:03:01.000Z","updated_at":"2025-02-18T07:03:15.000Z","dependencies_parsed_at":"2023-11-16T09:28:46.410Z","dependency_job_id":"66c6b837-241f-4c97-8633-10159f5f982e","html_url":"https://github.com/ChinaLike/JsBridge","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/ChinaLike/JsBridge","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChinaLike%2FJsBridge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChinaLike%2FJsBridge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChinaLike%2FJsBridge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChinaLike%2FJsBridge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChinaLike","download_url":"https://codeload.github.com/ChinaLike/JsBridge/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChinaLike%2FJsBridge/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265327780,"owners_count":23747770,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bridge","java","javascript","webview"],"created_at":"2024-11-16T01:40:43.427Z","updated_at":"2025-07-14T18:06:24.740Z","avatar_url":"https://github.com/ChinaLike.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JsBridge\n[![](https://img.shields.io/badge/platform-android-brightgreen.svg)](https://developer.android.com/index.html)  [![API](https://img.shields.io/badge/API-17%2B-blue.svg?style=flat)](https://android-arsenal.com/api?level=17)  [![](https://jitpack.io/v/ChinaLike/JsBridge.svg)](https://jitpack.io/#ChinaLike/JsBridge)  [![Gradle-4.1.2](https://img.shields.io/badge/Gradle-4.1.2-brightgreen.svg)](https://img.shields.io/badge/Gradle-4.1.2-brightgreen.svg)  [![](https://img.shields.io/badge/language-kotlin-brightgreen.svg)](https://kotlinlang.org/)\n\n# SDK支持\n\n+ Js调用原生方法并支持异步回调和同步回调\n+ 原生调用Js方法并支持异步回调\n+ Js调用名称空间可自由配置，统一管理命名空间\n+ 支持Js调用原生方法多次回调，如果不想多次回调可以删除回调方法\n+ 支持部分Js框架中window并非顶级window\n\n# API介绍\n\n- `callJsFunction(function: String)`\n\n    原生调用Js的方法，不支持传递参数和回调\n    \n    \u003e 参数\n    \n    + function:调用Js的方法名称\n    \n- `callJsFunction(function: String, callback: JsCallback?)`\n\n    原生调用Js的方法，不支持传递参数但支持回调\n    \n    \u003e 参数\n    \n    + function:调用Js的方法名称\n    + callback:回调函数\n    \n- `callJsFunction(function: String, data: String?)`\n\n    原生调用Js的方法，支持传递参数，但不支持回调\n    \n    \u003e 参数\n    \n    + function:调用Js的方法名称\n    + data:字符串，传递给Js的参数\n\n- `callJsFunction(function: String, data: String?, callback: JsCallback?)`\n\n    原生调用Js的方法，支持传递参数和回调\n    \n    \u003e 参数\n    \n    + function:调用Js的方法名称\n    + data:字符串，传递给Js的参数\n    + callback:回调函数\n    \n- `jsCallName()`\n\n    Js调用原生的API命名空间，SDK统一了命名空间，默认为`JsBridge`，整个Js调用中只会使用这个命名，当然，如果是你不喜欢这个命名，或者需要根据项目更改为项目有关的命名，可以自定义WebView继承至[BaseWebView](https://github.com/ChinaLike/JsBridge/blob/main/library/src/main/java/com/core/web/base/BaseWebView.kt)重写该方法。\n    \n- `getWindow()`\n\n    Js中获取window的方法，建议不要随意修改。在特殊的Js框架中，获取系统的window需要window.window才能获取到，所以这时候可以自定义WebView继承至[BaseWebView](https://github.com/ChinaLike/JsBridge/blob/main/library/src/main/java/com/core/web/base/BaseWebView.kt)重写该方法。\n\n# 如何使用\n\n## 依赖引入\n\n\u003e Step 1.先在 build.gradle(Project:XXX) 的 repositories 添加:\n\n\tallprojects {\n\t\trepositories {\n\t\t\t...\n\t\t\tmaven { url \"https://jitpack.io\" }\n\t\t}\n\t}\n\u003e Step 2. 然后在 build.gradle(Module:XXX) 的 dependencies 添加:\n\n\tdependencies {\n           implementation 'com.github.ChinaLike:JsBridge:x.x.x'//x.x.x换成最新的版本号\n\t}\n        \n## 新建Js调用原生方法的类，参考：[JsBridgeToast](https://github.com/ChinaLike/JsBridge/blob/main/app/src/main/java/com/like/jsbridge/JsBridgeToast.kt)\n\n\u003e 注意：桥梁类需要实现`IJavascriptInterface`接口，如果不实现则是普通的桥梁类\n\n```js\npackage com.like.jsbridge\n\nimport android.content.Context\nimport android.os.Handler\nimport android.util.Log\nimport android.webkit.JavascriptInterface\nimport android.widget.Toast\nimport com.core.web.Callback\nimport com.core.web.CallbackBean\n\nclass JsBridgeToast(private val context: Context) : IJavascriptInterface  {\n\n    @JavascriptInterface\n    fun nativeNoArgAndNoCallback(){\n        Toast.makeText(context,\"调用原生无参数无回调方法\",Toast.LENGTH_SHORT).show()\n    }\n\n    @JavascriptInterface\n    fun nativeNoArgAndCallback(callback: Callback){\n        callback.success()\n    }\n\n    @JavascriptInterface\n    fun nativeArgAndNoCallback(params:String){\n        Toast.makeText(context,params,Toast.LENGTH_SHORT).show()\n    }\n\n    @JavascriptInterface\n    fun nativeArgAndCallback(params:String,callback: Callback):Boolean{\n        Toast.makeText(context,params,Toast.LENGTH_SHORT).show()\n        callback.success()\n\n        return false\n    }\n\n    @JavascriptInterface\n    fun nativeDeleteCallback(params:String,callback: Callback){\n        Toast.makeText(context,params,Toast.LENGTH_SHORT).show()\n        callback.success(isDelete = true)\n        Handler().postDelayed(Runnable {\n            callback.error(1,\"错误回调\")\n        },3000)\n    }\n\n    @JavascriptInterface\n    fun nativeNoDeleteCallback(params:String,callback: Callback){\n        Toast.makeText(context,params,Toast.LENGTH_SHORT).show()\n        callback.success(isDelete = false)\n        Handler().postDelayed(Runnable {\n            callback.error(1,\"错误回调\")\n        },3000)\n    }\n\n    @JavascriptInterface\n    fun nativeSyncCallback():String{\n        return \"原生同步回调\"\n    }\n}\n```\n\n## 新建MainActivity和xml文件,参考：[MainActivityKotlin](https://github.com/ChinaLike/JsBridge/blob/main/app/src/main/java/com/like/jsbridge/MainActivityKotlin.kt)和[activity_main](https://github.com/ChinaLike/JsBridge/blob/main/app/src/main/res/layout/activity_main.xml)\n\n+ 在xml文件中引入JsBridgeWebView\n\n```js\n\u003ccom.core.web.JsBridgeWebView\n        android:id=\"@+id/webView\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"match_parent\"/\u003e\n```\n\u003e 当然，如果没有特殊需要使用`JsBridgeWebView`就可以了，如果有定制WebView，则引入自己定制那个WebView就可以了，但是自定义的WebView需要继承[JsBridgeWebView](https://github.com/ChinaLike/JsBridge/blob/main/library/src/main/java/com/core/web/JsBridgeWebView.kt)\n\n+ 在Activity中调用`addJavascriptInterface`添加\n\n```js\nimport com.core.web.JsBridgeWebView;\n\nclass MainActivityKotlin : AppCompatActivity() {\n\n    private var webView: JsBridgeWebView? = null\n    \n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n        setContentView(R.layout.activity_main)\n        webView = findViewById(R.id.webView)\n        webView?.addJavascriptInterface(JsBridgeToast(this))\n        webView?.loadUrl(\"file:///android_asset/test.html\")\n}\n```\n\n\u003e 注意：webView的`addJavascriptInterface`方法可以多次调用，开发时可以根据业务功能进行解耦，`addJavascriptInterface`方法支持传递一个或两个参数，传递两个参数时第二个参数无效。但是如果没有实现`IJavascriptInterface`接口的类第二个参数应该传递自己想要的\n\n## 在Js中调用原生方法，参考：[test.html](https://github.com/ChinaLike/JsBridge/blob/main/app/src/main/assets/test.html)\n\n+ Js调用原生无参无回调方法\n\n    - Kotlin代码\n    \n    ```js\n    @JavascriptInterface\n    fun nativeNoArgAndNoCallback(){\n        Toast.makeText(context,\"调用原生无参数无回调方法\",Toast.LENGTH_SHORT).show()\n    }\n    ```\n    \n    - Java代码\n    \n    ```js\n    @JavascriptInterface\n    public void nativeNoArgAndNoCallback(){\n        Toast.makeText(context,\"调用原生无参数无回调方法\",Toast.LENGTH_SHORT).show();\n    }\n    ```\n    \n    - Js代码\n    \n    ```js\n    JsBridge.nativeNoArgAndNoCallback();\n    ```\n\n+ Js调用原生无参有回调方法\n\n    - Kotlin代码\n    \n    ```js\n    @JavascriptInterface\n    fun nativeNoArgAndCallback(callback: Callback){\n        callback.success()\n    }\n    ```\n    \n    - Java代码\n    \n    ```js\n    @JavascriptInterface\n    public void nativeNoArgAndCallback(Callback callback){\n        callback.success();\n    }\n    ```\n    \n    - Js代码\n    \n    ```js\n    JsBridge.nativeNoArgAndCallback(function(result){\n        alert(JSON.stringify(result));\n    });\n    ```\n  \n+ Js调用原生有参无回调方法\n\n    - Kotlin代码\n    \n    ```js\n    @JavascriptInterface\n    fun nativeArgAndNoCallback(params:String){\n        Toast.makeText(context,params,Toast.LENGTH_SHORT).show()\n    }\n    ```\n    \n    - Java代码\n    \n    ```js\n    @JavascriptInterface\n    public void nativeArgAndNoCallback(String params){\n        Toast.makeText(context,params,Toast.LENGTH_SHORT).show();\n    }\n    ```\n    \n    - Js代码\n    \n    ```js\n    JsBridge.nativeArgAndNoCallback(\"调用原生有参数无回调方法\");\n    ```\n\n+ Js调用原生有参有回调方法\n\n    - Kotlin代码\n    \n    ```js\n    @JavascriptInterface\n    fun nativeArgAndCallback(params:String,callback: Callback){\n        Toast.makeText(context,params,Toast.LENGTH_SHORT).show()\n        callback.success()\n    }\n    ```\n    \n    - Java代码\n    \n    ```js\n    @JavascriptInterface\n    public void nativeArgAndCallback(String params,Callback callback){\n        Toast.makeText(context,params,Toast.LENGTH_SHORT).show();\n        callback.success();\n    }\n    ```\n    \n    - Js代码\n    \n    ```js\n    JsBridge.nativeArgAndCallback(\"调用原生有参数有回调方法\",function(result){\n        alert(JSON.stringify(result))\n    });\n    ```\n    \n+ Js调用原生有参有回调方法，且只能回调一次\n\n    - Kotlin代码\n    \n    ```js\n    @JavascriptInterface\n    fun nativeDeleteCallback(params:String,callback: Callback){\n        Toast.makeText(context,params,Toast.LENGTH_SHORT).show()\n        callback.success(true)\n        Handler().postDelayed(Runnable {\n            callback.error(1,\"错误回调\")\n        },3000)\n    }\n    ```\n    \n    - Java代码\n    \n    ```js\n    @JavascriptInterface\n    public void nativeDeleteCallback(String params,Callback callback){\n        Toast.makeText(context,params,Toast.LENGTH_SHORT).show();\n        callback.success(true);\n        new Handler().postDelayed(new Runnable() {\n            @Override\n            public void run() {\n                callback.error(1,\"错误回调\");\n            }\n        },3000);\n    }\n    ```\n    \n    - Js代码\n    \n    ```js\n    JsBridge.nativeDeleteCallback(\"调用原生方法后删除回调\",function(result){\n\t\t\t\talert(JSON.stringify(result))\n\t\t\t},function(error){\n\t\t\t\talert(JSON.stringify(result))\n\t\t\t});\n    ```\n\n+ Js调用原生有参有回调方法，且能回调多次\n\n    - Kotlin代码\n    \n    ```js\n    @JavascriptInterface\n    fun nativeNoDeleteCallback(params:String,callback: Callback){\n        Toast.makeText(context,params,Toast.LENGTH_SHORT).show()\n        callback.success(false)\n        Handler().postDelayed(Runnable {\n            callback.error(1,\"错误回调\")\n        },3000)\n    }\n    ```\n    \n    - Java代码\n    \n    ```js\n    @JavascriptInterface\n    public void nativeNoDeleteCallback(String params,Callback callback){\n        Toast.makeText(context,params,Toast.LENGTH_SHORT).show();\n        callback.success(false);\n        new Handler().postDelayed(new Runnable() {\n            @Override\n            public void run() {\n                callback.error(1,\"错误回调\");\n            }\n        },3000);\n    }\n    ```\n    \n    - Js代码\n    \n    ```js\n    JsBridge.nativeNoDeleteCallback(\"调用原生方法后不删除回调\",function(result){\n\t\t\t\talert(JSON.stringify(result))\n\t\t\t},function(error){\n\t\t\t\talert(JSON.stringify(error))\n\t\t\t});\n    ```\n    \n+ Js调用原生同步回调数据\n\n    - Kotlin代码\n    \n    ```js\n    @JavascriptInterface\n    fun nativeSyncCallback():String{\n        return \"原生同步回调\"\n    }\n    ```\n    \n    - Java代码\n    \n    ```js\n    @JavascriptInterface\n    public String nativeSyncCallback(){\n        return \"原生同步回调\";\n    }\n    ```\n    \n    - Js代码\n    \n    ```js\n    var  result = JsBridge.nativeSyncCallback();\n    alert(result)\n    ```\n    \n\u003e `注意：`被`@JavascriptInterface`注解的方法，只支持最多两个参数，不论顺序。`无参数：`代表Js不传递参数过来也不回调；`一个参数：`可以是传递过来的参数或回调；`两个参数：`一个为参数，一个是回调。\n\n## 在原生中调用Js方法，参考：[MainActivity](https://github.com/ChinaLike/JsBridge/blob/main/app/src/main/java/com/like/jsbridge/MainActivity.java)\n\n+ 原生调用JS无参数无回调\n\n    - Js代码\n    \n    ```js\n    function jsNoArgAndNoCallback(){\n        alert(\"原生调用JS无参数无回调\");\n    }\n    ```\n    \n    - Java代码\n    \n    ```js\n    webView.callJsFunction(\"jsNoArgAndNoCallback\");\n    ```\n    \n    - Kotlin代码\n    \n    ```js\n    webView?.callJsFunction(\"jsNoArgAndNoCallback\")\n    ```\n\n+ 原生调用Js无参数有回调\n\n    - Js代码\n    \n    ```js\n    function jsNoArgAndCallback(callback){\n            alert(\"原生调用JS无参数有回调\");\n            callback(\"我是JS回调数据\");\n    }\n    ```\n    \n    - Java代码\n    \n    ```js\n    webView.callJsFunction(\"jsNoArgAndCallback\", callback -\u003e Toast.makeText(this, \"\" + callback, Toast.LENGTH_SHORT).show());\n    ```\n    \n    - Kotlin代码\n    \n    ```js\n    webView?.callJsFunction(\"jsNoArgAndCallback\", object : JsCallback {\n            override fun onCallback(callback: Any) {\n                Toast.makeText(this@MainActivityKotlin, \"$callback\", Toast.LENGTH_SHORT).show()\n            }\n        })\n    ```\n\n+ 原生调用Js有参数无回调\n\n    - Js代码\n    \n    ```js\n    function jsArgAndNoCallback(params){\n            alert(params);\n    }\n    ```\n    \n    - Java代码\n    \n    ```js\n    webView.callJsFunction(\"jsArgAndNoCallback\", \"原生传递过来的参数\");\n    ```\n    \n    - Kotlin代码\n    \n    ```js\n    webView?.callJsFunction(\"jsArgAndNoCallback\",\"原生传递过来的参数\")\n    ```\n\n+ 原生调用Js有参数有回调（可回调多次）\n\n    - Js代码\n    \n    ```js\n    function jsArgAndCallback(params,callback){\n            alert(params);\n            callback(\"我是JS第一次回调数据\");\n            setTimeout(function() {\n                    callback(\"我是JS第二次回调数据\");\n            }, 500);\n    }\n    ```\n    \n    - Java代码\n    \n    ```js\n    webView.callJsFunction(\"jsArgAndCallback\", \"原生传递过来的参数\", callback -\u003e Toast.makeText(this, \"\" + callback, Toast.LENGTH_SHORT).show());\n    ```\n    \n    - Kotlin代码\n    \n    ```js\n    webView?.callJsFunction(\"jsArgAndCallback\",\"原生传递过来的参数\", object : JsCallback {\n            override fun onCallback(callback: Any) {\n                Toast.makeText(this@MainActivityKotlin, \"$callback\", Toast.LENGTH_SHORT).show()\n            }\n        })\n    ```\n    \n+ 调用Js有参数有回调（只能回调一次）\n\n    - Js代码\n    \n    ```js\n    function jsArgAndDeleteCallback(params,callback){\n            alert(params);\n            callback(\"我是JS第一次回调数据\",true);\n            setTimeout(function() {\n                    callback(\"我是JS第二次回调数据\");\n            }, 500);\n    }\n    ```\n    \n    - Java代码\n    \n    ```js\n    webView.callJsFunction(\"jsArgAndDeleteCallback\", \"原生传递过来的参数\", callback -\u003e Toast.makeText(this, \"\" + callback, Toast.LENGTH_SHORT).show());\n    ```\n    \n    - Kotlin代码\n    \n    ```js\n    webView?.callJsFunction(\"jsArgAndDeleteCallback\",\"原生传递过来的参数\", object : JsCallback {\n            override fun onCallback(callback: Any) {\n                Toast.makeText(this@MainActivityKotlin, \"$callback\", Toast.LENGTH_SHORT).show()\n            }\n        })\n    ```\n    \n\u003e `注意：`原生调用Js代码，Js的方法最多支持两个参数，`无参数：`代表原生不传递参数过来也不用回调给原生； `一个参数：`可以是参数也可以是回调；`两个参数：`有序，第一个为参数，第二个为回调，代表原生传递过来参数，且需要回调给原生","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinalike%2Fjsbridge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchinalike%2Fjsbridge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinalike%2Fjsbridge/lists"}