Android開發之WebView與js的數據傳遞

時間 2021-02-14

標籤 javascript html java android web 服務器 ide 函數佈局 this 欄目 Android 简体版

原文原文鏈接

在Android開發中不可避免的會出現，使用一個WebView來顯示一個h5頁面。若是僅僅只是顯示h5頁面,這不須要特殊的處理，可是不少狀況下會出現，js和WebView的交互。好比：將html表單中的數據，傳遞到Activity中，在Activity中對數據校驗，再上傳到服務器。
javascript

那麼js和WebView如何進行的交互的呢？
html

建立AndroidHtml項目。主要代碼以下：
java

MainActivity.java:android

    private WebView mWebView;
    public static final String URL_TEST="file:///android_asset/index.html";

    @SuppressLint("JavascriptInterface")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWebView = (WebView) findViewById(R.id.webView);
        WebSettings settings = mWebView.getSettings();
        settings.setJavaScriptEnabled(true);

        mWebView.loadUrl(URL_TEST);
        //addJavascriptInterface這個方法中有兩個參數，第一個參數是添加一個對象，這個對象中封裝了在js中要調用的native方法，第二個參數是告訴js對象的名稱以便於調用native方法
        mWebView.addJavascriptInterface(this,"zzh");//
    }

    @JavascriptInterface//android 4.2之上的版本須要加上這個註解，表示將這個方法暴露給js調用
    public void callAndroidNativeMethod(String str){
        Log.d("MainActivity","---方法被執行了！！！-");
        Toast.makeText(this, "---"+str, Toast.LENGTH_LONG).show();
    }

註解@JavascriptInterface註解在Android版本4.2之上必需要加上。Google官方的解釋是web

Caution: If you've set your targetSdkVersion to 17 or higher, you must add the @JavascriptInterface annotation to any method that you want available to your JavaScript (the method must also be public). If you do not provide the annotation, the method is not accessible by your web page when running on Android 4.2 or higher.服務器

index.html:ide

<!DOCTYPE html>
<HTML lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" language="javascript">
            function callAndroidNativeMethod(){
                window.zzh.callAndroidNativeMethod("js中的數據傳遞到了Android中了");
            }
        </script>
    </head>
    <body>
        <button onclick="callAndroidNativeMethod()">點擊調用Java代碼</button>
    </body>
</HTML>

activity_main.xml中的佈局是：函數

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zzh.androidhtml.MainActivity">
    <Button
        android:id="@+id/button"
        android:text="Java調用js方法"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <WebView
        android:id="@+id/webView"
        android:layout_below="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></WebView>
</RelativeLayout>

好了，上面就是js中如何調用Android Native方法。下面來講說Android Native中怎麼調用js方法（要注意Native中調用js方法來處理Android中的業務邏輯的效率差，不建議使用此方式處理Android業務邏輯，可是也要知道如何使用）。佈局

private WebView mWebView;
public static final String URL_TEST="file:///android_asset/index.html";

@SuppressLint("JavascriptInterface")
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mWebView = (WebView) findViewById(R.id.webView);
    WebSettings settings = mWebView.getSettings();
    settings.setJavaScriptEnabled(true);

    mWebView.loadUrl(URL_TEST);
    mWebView.addJavascriptInterface(this,"zzh");

    findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            mWebView.loadUrl("javascript:callJavaScriptMethod()");
        }
    });
}

@JavascriptInterface//android 4.2之上的版本須要加上這個註解，表示將這個方法暴露給js調用
public void callAndroidNativeMethod(String str){
    Log.d("MainActivity","---方法被執行了！！！-");
    Toast.makeText(this, "---"+str, Toast.LENGTH_LONG).show();
}

index.html文件比較簡單this

<!DOCTYPE html>
<HTML lang="zh-CN">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" language="javascript">
            function callAndroidNativeMethod(){
                window.zzh.callAndroidNativeMethod("js中的數據傳遞到了Android中了");
            }
            function callJavaScriptMethod(){
                document.getElementById("content").innerHTML += "<br\>java調用了js函數";
            }
    </script>
</head>
<body>
<button onclick="callAndroidNativeMethod()">點擊調用Java代碼</button>
<div id="content"></div>
</body>
</HTML>

示例比較簡單，註釋也寫的比較清楚不作過多的講解，全憑本身領悟。