Cách phát hiện nhấn nút HTML qua JavaScript trong Android WebView

Giới thiệu

Hướng dẫn này minh họa cách phát hiện sự kiện nhấn nút (button click) trên trang HTML được tải trong WebView Android, thông qua giao tiếp JavaScript ↔ Native Android bằng JavascriptInterface.

Các bước thực hiện

Bước 1: Tạo dự án mới

Mở Android Studio, chọn File → New Project và điền thông tin cần thiết.

Bước 2: Thiết kế giao diện (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btnLoadPage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="loadPage"
        android:text="Tải trang Web" />
</RelativeLayout>

Bước 3: Tạo file HTML (assets/page.html)

<html>
<body>
    First name: <input type="text" name="fname" id="txtfname"><br>
    Last name: <input type="text" name="lname" id="txtlname"><br>
    <script>
        function getValues() {
            document.getElementById("btnOK").value = 
                document.getElementById("txtfname").value + " " + 
                document.getElementById("txtlname").value;
        }
    </script>
    <button type="button" value="" id="btnOK" onclick="getValues(); ok.performClick(this.value);">OK</button>
</body>
</html>

Bước 4: Viết code MainActivity

package app.tutorialspoint.com.sample;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void loadPage(View view) {
        WebView browser = new WebView(this);
        browser.getSettings().setJavaScriptEnabled(true);
        browser.loadUrl("file:///android_asset/page.html");
        setContentView(browser);

        WebSettings ws = browser.getSettings();
        ws.setJavaScriptEnabled(true);
        
        browser.addJavascriptInterface(new Object() {
            @JavascriptInterface // Cho API 17+
            public void performClick(String str) {
                Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
            }
        }, "ok");
    }
}

Bước 5: Cấu hình AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.tutorialspoint.com.sample">

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Chạy ứng dụng

Kết nối thiết bị Android thật, chạy ứng dụng từ Android Studio. Nhấn "Tải trang Web", nhập tên và nhấn nút OK trên trang HTML để thấy Toast hiển thị.