Android WebView与JS交互方式：庖丁解牛之术

2023-12-27 05:55:25

Android WebView 与 JavaScript：无缝交互之道

在现代移动应用开发中，Android WebView 扮演着至关重要的角色，它作为展示网页内容的利器，与原生代码无缝交互。与 JavaScript (JS) 携手，WebView 赋予开发者掌控网页内容并创建高度动态且交互式应用的能力。本文将深入探讨 Android WebView 与 JS 的交互方式，提供全面而透彻的指南。

WebView 与 JS：交互之门

WebView 本质上是一个浏览器控件，它加载并呈现 HTML、CSS 和 JS 等网页内容。JS 是一种嵌入网页中的脚本语言，它能够动态操作网页元素，为用户提供互动体验。当 WebView 加载包含 JS 脚本的网页时，便开启了 WebView 与 JS 之间的交互之门。

JS 调用 Android：三重妙法

JS 调用 Android 的方式可谓精彩纷呈，有三种独特的方法，各显神通。

1. addJavascriptInterface：灵动代言人

addJavascriptInterface 方法是 JS 调用 Android 最为灵活的方式。通过该方法，开发者可以在 Android 代码中定义一个 Java 对象，并将其映射到 JS 中。这样，JS 脚本便可通过映射的对象调用 Android 中 Java 对象的方法，实现跨界交互。

2. WebChromeClient：特殊能力的掌控者

WebChromeClient 是 WebView 的一个客户端类，它提供了对特殊功能（如文件选择器、网页进度条等）的控制。JS 脚本可以通过注入 WebChromeClient 来实现对这些特殊功能的调用。

3. JSBridge：便捷桥梁

JSBridge 是一种第三方库，它为 JS 和 Android 之间的交互提供了简洁易用的桥梁。开发者只需在 Android 代码中初始化 JSBridge，然后在 JS 中使用 JSBridge 对象即可与 Android 代码交互。

Android 调用 JS：一呼百应

与 JS 调用 Android 相对应，Android 也可以主动调用 JS，实现对网页内容的动态控制。

1. evaluateJavascript：无处不在的指挥官

evaluateJavascript 方法允许 Android 代码在 WebView 中执行 JS 代码。通过该方法，开发者可以动态改变网页内容，实现诸如更新 UI、获取网页数据等操作。

案例解析：庖丁解牛

理论固然重要，但实践是检验真理的唯一标准。下面我们通过两个案例，庖丁解牛 Android WebView 与 JS 的交互，直观地领略其精妙之处。

案例 1：JS 调用 Android 显示 Toast

在这个案例中，JS 通过 addJavascriptInterface 方法映射了一个 Android Java 对象，并调用了该对象中的 showToast() 方法，成功在 Android 中显示了 Toast 信息。

Java 代码：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView webView = findViewById(R.id.webView);
        webView.addJavascriptInterface(new JSKit(), "mjs");
    }

    public class JSKit {
        @JavascriptInterface
        public void showToast(String message) {
            Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
        }
    }
}

HTML 代码：

<!DOCTYPE html>
<html>
<body>
<script>
    function showToast() {
        mjs.showToast("Hello from JS!");
    }
</script>
</body>
</html>

案例 2：Android 调用 JS 获取网页标题

在这个案例中，Android 通过 evaluateJavascript 方法在 WebView 中执行了一段 JS 代码，获取了网页的标题，并将其打印到了 Logcat 中。

Java 代码：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView webView = findViewById(R.id.webView);
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                view.evaluateJavascript("document.title", new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String value) {
                        Log.d("MainActivity", "网页                    }
                });
            }
        });
    }
}

HTML 代码：

<!DOCTYPE html>
<html>
<head>
    
</head>
<body>
</body>
</html>

结语：道法自然，游刃有余

Android WebView 与 JS 的交互方式丰富多彩，为移动开发提供了无限的可能。理解并掌握这些交互方式，开发者可以轻松实现跨越 WebView 与 Android 之间的无缝通信，构建更加强大、灵活的移动应用。记住，道法自然，运筹帷幄，方能游刃有余地驾驭 WebView 与 JS 的交互之道。

常见问题解答