android 和 js 之间简单的相互调用

最新推荐文章于 2023-04-10 17:01:12 发布

sleticalboy

最新推荐文章于 2023-04-10 17:01:12 发布

阅读量358

点赞数

CC 4.0 BY-SA版权

分类专栏： android WebView 文章标签： android webview

本文链接：https://blog.youkuaiyun.com/SleticalBoy/article/details/77488625

android 同时被 2 个专栏收录

2 篇文章

订阅专栏

WebView

1 篇文章

订阅专栏

本文介绍如何在Android应用中实现Java代码与HTML中的JavaScript之间的互相调用。通过使用WebView组件及@JavascriptInterface注解，实现从Java调用JavaScript函数以及从JavaScript调用Java方法。

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

android 中 java 代码和 js 之间简单调用

涉及到的 android API

1, WebView

2, @JavascriptInterface

涉及到的方法：

WebView.getSettings().setJavascriptEnabled();
WebView.loadUrl();
WebView.addJavascriptInterface();
annotation: @android.webkit.JavascriptInterface

准备 html 文件

首先在 AS 工程对应的 module 下的 assets 资产目录中新建 index.html 文件并添加以下内容：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>android js communication</title>
    <script type="text/javascript">

        // java 调用 js 代码，修改 span 标签内容
        function js2Java() {
            document.getElementById('eSpan').innerHTML = 'java call js';
        }

        function js2JavaWithSth(url) {
            document.getElementById('eSpan').innerHTML = 'java call js with "' + url + '"';
        }

        // 弹出吐司
        function showToast() {
            window.jsInterface.showToast();
        }

        // html 页面携带内容，并弹出吐司
        function showToastWithContent(url){
            window.jsInterface.showUrl(url);
        }

    </script>
</head>
<body>
    <h1>android and javascript communication</h1>
    <button onclick="showToast()">call java</button>
    <button onclick="showToastWithContent('http://192.168.1.103:8089/_index.html')">
        call java with url</button>
    <br>
    <span id="eSpan" style="color: red;"></span> <br>
</body>
</html>

布局文件比较简单，不贴出来了

在 MainActivity.java 中调用相关的 API


private WebView mWebView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    // 初始化 WebView
    mWebView = (WebView) findViewById(R.id.webview);
    // 开启 javascript
    mWebView.getSettings().setJavaScriptEnabled(true);
    // 加载url，引用 assets/index.html 文件
    mWebView.loadUrl("file:///android_asset/index.html");
    // 添加 javascript 接口，以便 js 调用 java API
    mWebView.addJavascriptInterface(new JavascriptInterface(), "jsInterface");

    findViewById(R.id.btn_call_js).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // 调用 js 代码
            mWebView.loadUrl("javascript:js2Java()");
        }
    });

    findViewById(R.id.btn_call_js_with_sth).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            // 调用 js 代码
            mWebView.loadUrl("javascript:js2JavaWithSth(" + "'a string from java'" + ")");
        }
    });
}

/* js 调用 java代码 */
private class JavascriptInterface {

    /*只有添加了 JavascriptInterface 注解的方法才可以被 js 代码所调用*/
    @android.webkit.JavascriptInterface
    public void showToast() {
        Toast.makeText(MainActivity.this, "hello js", Toast.LENGTH_SHORT).show();
    }

    /*只有添加了 JavascriptInterface 注解的方法才可以被 js 代码所调用*/
    @android.webkit.JavascriptInterface
    public void showUrl(final String url) {
        Toast.makeText(MainActivity.this, url, Toast.LENGTH_SHORT).show();
    }
}