[Tip / Trick] Tương tác với WebView thông qua JavascriptInterface.

Published in

blog.tuanbinh

3 min readMay 2, 2018

Để Android và Web có thể giao tiếp với nhau như là Android có thể sửa hoặc lấy giá trị từ website ngược lại trên website có thể call được đến các method của Android.

JavascriptInterface can help you.

Đây là một vài câu lệnh JavaScript cơ bản chúng ta sẽ xử dụng trong tutorial này:

document.getElementById () 
document.getElementsByClassName () 
document.getElementsByTagName () 
document.querySelector () 
document.querySelectorAll ()

Ý nghĩa của các hàm trên mình sẽ giải thích sau. Bây giờ chúng ta sẽ đi tìm hiểu xem JavascriptInterface là gì.

What is JavascriptInterface?

Nó hoạt động giống như một cầu nối.

Website có thể gọi được đến các method trên Android và ngược lại Android có thể làm bất cứ điều gì trên Website. Để điều khiển tương tác nội dung website với ứng dụng chúng ta sử dụng ngôn ngữ Javascript.

Để enable tính năng đó đầu tiên chúng ta sẽ phải gọi hàm addJavascriptInterface của webview như sau:

webview.addJavascriptInterface (this, "WebViewJS")

Để webview có thể gọi đến hàm trong Android thì trước mỗi hàm chúng ta phải khai báo 1 anotation là JavascriptInterface, ví dụ

@JavascriptInterface 
fun someMethodOnAndroid (body: String) { 
    ... 
}

Chúng ta sẽ chia làm 2 trường hợp.

Android giao tiếp với Webview
WebView giao tiếp ngược lại với Android

1. Android giao tiếp với Webview

Ví dụ: Chúng ta sẽ extract ra toàn bộ html string hiển thị trên WebView.

webview.loadUrl("javascript:WebViewJS.someMethodOnAndroid('<html>'+document.getElementsByTagName('html')[0].innerHTML+'</html>')")

Vậy là chúng ta đã có toàn bộ html string được trả về method someMethodOnAndroid đã được khai báo trước đó.

Chú ý: Nếu project sử dụng minSdkVersion ≥ 19.
webview.evaluateJavascript (script_string, result_callback)
sẽ thay thế cho webview.loadUrl (…).

2. WebView giao tiếp ngược lại với Android

Ví dụ đoạn code HTML sau sẽ gọi đến 1 method trên Android

Chú ý : Hãy đảm bảo rằng bạn đã viết đúng tên method, lint sẽ không check syntax nên hãy cẩn thận

Example Code

Trong ví dụ này, chúng ta sẽ tạo 1 webview link đến www.google.com.

Chúng ta sẽ

Chèn PlaceHolder cho thanh search
Hiển thị height tạo bởi thẻ <div> … </ div> bên dưới thanh Input trên

Tất cả đều được thực hiện phía Android

Theo đó mỗi khi WebView loadUrl(“https://www.google.com.vn/") xong, phương thức onPageFinished (…) được gọi. Tiếp theo sau đó là 2 lệnh sau cũng sẽ được thực thi

1. webview.loadUrl("javascript: $ WEBVIEW_JS.onHeight (document.body.getBoundingClientRect(). Height)")2. changeHintInput()

Giờ chúng ta hãy tập trung vào đoạn code

val WEBVIEW_JS = "WebViewJS" 
... 
webview.addJavascriptInterface(this, WEBVIEW_JS) 
...

JavascriptInterface có thể được sử dụng thông qua từ khóa gọi là “WebViewJS”.

Nhìn lại dòng 24, chúng ta thấy rằng

webview.loadUrl("javascript:$WEBVIEW_JS.onHeight(document.body.getBoundingClientRect().height)")

có thể viết javascript trên webview thông qua hàm loadUrl. Trong ví dụ trên chúng ta sẽ lấy chiều cao của body content sau đó trả về hàm onHeight dòng 65

Ở trong onHeight (…) chúng ta sẽ tạo ra 1 thẻ div mới sau đó append nó vào thẻ có id = main, tại đây sẽ hiển thị thông số chiều cao tại hàm onHeight trả về.

Và đây là kết quả khi chúng ta chạy chương trình

Đây chỉ là một ví dụ đơn giản tôi giới thiệu cho các bạn cách chúng ta có thể giao tiếp được với webview thông qua Android như thế nào, Hi vọng nó có thể giúp các bạn áp dụng được vào các trường hợp đặc thù của dự án.