Gọi android function từ javascript

Chào các bạn, vừa rồi trong cái dự án mình được tham gia vào có một điểm khá đặc biệt. Xét về mặt nào đó với mục đích như là khi app đã đi vào hoạt động rồi mà muốn thay đổi text hay action hoặc giao diện nào đó trong app mà không muốn để người dùng phải update lại trên google play thì nó là tốt. NHưng mà có vẻ vất vả chút trong quá trình bảo trì hay thay đổi toàn bộ dự án nếu không thiết kế cẩn thận. Cách mà tôi nói đến ở đây đó là việc gọi function trong android từ javascript trong một trang html nào đó.

Dường như đây có vẻ như là một cách hơi dị, search trên mạng hoặc những người mình quen cũng không có nhiều người sử dụng cách này lắm. NHưng dù sao thì cũng là một cách hay dành cho những ai dùng đúng mục đích.

Để làm điều đó trước tiên tất nhiên là phải tạo một project rồi. ở đây tôi tạo project của mình là AndroidJavascript.

Nếu ứng dụng của bạn gọi tới trang html online ở server nào đó thì chúng ta cần permission internet cho ứng dụng. Vào file androidManifest và thêm

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

Trong file activity_main.xml tôi sẽ định nghĩa luôn cái webview ở đó cho nhanh:

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
/>

Trong file MainActivity.java tiện tạo luôn một class interface trong đó, đỡ phải tạo thêm new file làm gì cho phức tạp thêm.

public class WebAppInterface {
		Context mContext;
		WebAppInterface(Context c) {
			mContext = c;
		}

		/** Hiển thị toast khi gọi từ webview */
		@JavascriptInterface
		public void showToast(String toast) {
			Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
		}
	}

Tạo file framgia_test.html với nội dung như sau:

<input type="button" value="Click here" onClick="showAndroidToast('Welcome to framgia !')" />

<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

File html này tôi vứt luôn trong thư mục asset của ứng dụng để gọi cho dễ.

Tại sao lại Android.showToast. Cứ gọi là được sao? Tự dưng được cơ à? Chắc tới đây bạn cũng thắc mắc vậy phải không? Vâng, thật ra thì không phải tự dưng goij được vậy mà ta phải setup nó như sau khi load webview, ở đây tôi gọi luôn trong MainActivity.java

WebView myWebView = (WebView) findViewById(R.id.webview);
		WebSettings webSettings = myWebView.getSettings();
		webSettings.setJavaScriptEnabled(true);
		myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");
		myWebView.loadUrl("file:///android_asset/framgia_test.html");

Vậy là rõ, để có thể gọi được function trong android thì chúng ta cần add javascript interface cho webview của chúng ta với một cái tên mà chúng ta thích.

Vậy là xong rồi đó. Bạn có thể chạy thử ngay. Chúc bạn sẽ có một sự lựa chọn phù hợp nhất cho project của mình. Link download project demo đây các bạn: https://drive.google.com/file/d/0B7td9WR1ZtQ0cnVoOGFWT1ViRkU/view?usp=sharing