Android WebView与JavaScript互动的实现方法

RBJQ • 2024-10-12 09:45 • 编程

一、WebView类及其内置函数

WebView是Android提供的一个可以用来展示网页的控件，能够很好地兼容各种网页，例如HTML5、js和CSS等。除了展示网页，WebView还可以和JavaScript进行互动。以下是WebView类中内置的一些函数，在JavaScript中可以通过window对象调用。

// 加载一个网页
public void loadUrl (String url)

// 返回前一个网页，如果当前页到达了顶部，则返回false
public boolean canGoBack ()

// 同上，返回后一个网页
public boolean canGoForward ()

// 返回当前网页的标题
public String getTitle ()

// 触发前进、后退操作
public void goBack ()
public void goForward ()

二、JavaScriptInterface和addJavascriptInterface函数

为了实现WebView和JavaScript的互动，我们需要使用JavaScriptInterface接口，将一个Java对象公开给JavaScript调用。在Java对象中，我们可以定义一些公开方法，通过这些公开方法可以与JavaScript交互。在WebView中，可以通过addJavascriptInterface函数将Java对象和JavaScriptInterface接口绑定，这样JavaScript就可以调用Java对象中的方法。

三、实现方法

1.在HTML中调用Java方法

以下是一个简单的HTML页面，当用户点击按钮时，会触发一个JavaScript函数，并使用Java方法showToast()

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      function showToast() {
        Android.showToast();
      }
    </script>
  </head>
  <body>
    <input type="button" value="按钮" onclick="showToast()" />
  </body>
</html>

接下来是Java代码，首先加载了上面的HTML页面，然后绑定了一个名为Android的Java对象。

WebView webView = findViewById(R.id.web_view);
webView.getSettings().setJavaScriptEnabled(true); // 启用JavaScript支持
webView.loadUrl("file:///android_asset/demo.html");
webView.addJavascriptInterface(new JsInterface(), "Android"); // 添加一个名为Android的对象到JavaScript中

下面是Java对象JsInterface的代码，它实现了showToast()方法，用来展示一个Toast消息，当页面中的按钮被点击时该方法会被调用。

class JsInterface {
  @JavascriptInterface // 添加@JavascriptInterface注释
  public void showToast() {
    Toast.makeText(MainActivity.this, "Hello World!", Toast.LENGTH_SHORT).show();
  }
}

2.在Java中调用JavaScript函数

下面的Java代码展示了如何在Java代码中调用前端JavaScript中的一个函数，这个函数会修改HTML中的元素颜色。

WebView webView = findViewById(R.id.web_view);
webView.getSettings().setJavaScriptEnabled(true); // 启用JavaScript支持
webView.loadUrl("file:///android_asset/demo.html");
webView.addJavascriptInterface(new JsInterface(), "Android"); // 添加一个名为Android的对象到JavaScript中

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        String jsFunc = "javascript:changeColor('#ffffff')"; // 调用一个名为changeColor的函数，将元素颜色改为白色
        webView.loadUrl(jsFunc);
    }
});

class JsInterface {
  @JavascriptInterface // 添加@JavascriptInterface注释
  public void showToast() {
    Toast.makeText(MainActivity.this, "Hello World!", Toast.LENGTH_SHORT).show();
  }
}

在上面的代码中，首先加载了HTML页面，然后重写了WebViewClient的onPageFinished()方法，当页面加载成功后，调用JavaScript的changeColor()函数，将元素颜色改为白色。

四、总结

本文介绍了Android WebView与JavaScript互动的实现方法，主要包括WebView类及其内置函数、JavaScriptInterface和addJavascriptInterface函数。这些知识点能够帮助我们在应用开发中实现WebView和JavaScript的互动，提升用户体验。

原创文章，作者：RBJQ，如若转载，请注明出处：https://www.506064.com/n/142641.html