Android Webview 偵測網頁Button click 事件(實作網頁與APP互動效果)

此篇介紹如何透過以下代碼讓Android偵測Web傳送過來的訊息 

1. 傳送字串

代碼如下:

網頁端:

<input onclick="showAndroidToast('網頁來的訊息')" type="button" value="傳給裝置訊息" />&nbsp;<div><br /></div><div><br /></div><div><br /></div><div><script type="text/javascript">

    function showAndroidToast(toast) {

        Android.showToast(toast); => Android=addJavaScriptInterface第二個參數Android,showToast為function name.

    }

</script>

Android App端:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    myWebView = findViewById(R.id.webview);
    myWebView.setWebViewClient(new CustomWebViewClient());
    WebSettings webSettings = myWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");
    myWebView.loadUrl("https://tsaibi1234.blogspot.com/2023/05/android-webview-button-click.html")
}

public class WebAppInterface {
    Context mContext;

    /**
     * Instantiate the interface and set the context
     */
    WebAppInterface(Context c) {
        mContext = c;
    }

    @JavascriptInterface
    public void showToast(String message) {
        Log.d(TAG, "showToast, message: " + message);
        Toast.makeText(mContext, message, Toast.LENGTH_SHORT).show();
    }
}

 

2. 傳送物件

網頁端:

<input onclick="sendObjectToAndroid()" type="button" value="傳送物件給裝置" />

<script type="text/javascript">

    function sendObjectToAndroid() {

        

        var timestamp = new Date().getTime();

        

        var data = {

            message: "網頁來的訊息",

            timestampString: new Date(timestamp).toLocaleString(),

        };

        // data變數轉為JSON字符串

        var jsonString = JSON.stringify(data);

        // 呼叫 Android 的方法並傳遞JSON字符串

        Android.showObject(jsonString);

    }

</script>

Android App端:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    myWebView = findViewById(R.id.webview);
    myWebView.setWebViewClient(new CustomWebViewClient());
    WebSettings webSettings = myWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");
    myWebView.loadUrl("https://tsaibi1234.blogspot.com/2023/05/android-webview-button-click.html")
}

public class WebAppInterface {
    private MessageFromWeb messageFromWeb;
    private Context mContext;

    WebAppInterface(Context c) {
        mContext = c;
    }

    /**
     * Instantiate the interface and set the context
     */

    // function name 不能改，否則網頁點擊會偵測不到
    @JavascriptInterface
    public void showObject(String jsonString) {
        Log.d(TAG, "showObject, jsonString: " + jsonString);
        try {
            Gson gson = new Gson();
            messageFromWeb = gson.fromJson(jsonString, MessageFromWeb.class);
            Log.d(TAG, "showObject, messageFromWeb: " + messageFromWeb.getMessage());
            Toast.makeText(mContext, messageFromWeb.getTimestampString() + messageFromWeb.getMessage(), Toast.LENGTH_SHORT).show();
        } catch (Exception e) {
            Log.e(TAG, Log.getStackTraceString(e));
        }
    }

}

public static class MessageFromWeb {

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public String getTimestampString() {
        return timestampString;
    }

    public void setTimestampString(String timestampString) {
        this.timestampString = timestampString;
    }

    private String message;
    private String timestampString;
}