Android WebView與JavaScript互動的實現方法

一、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/zh-tw/n/142641.html