[Android] Sử dụng JavascriptInterface trong webview

Sử dụng JavascriptInterface trong webview

I. Giới thiệu.

• WebView là một giao diện để tải và hiển thị nội dung web cũng như cung cấp các tính năng của một trình duyệt cơ bản.
• Webview còn cung cấp môi trường để có thể thưc thi JavaScript.
• Thông qua javascript chúng ta có thể điều khiển tương tác nội dung website với ứng dụng.
• Tùy ý điều chỉnh hiện thị nội dung website trên ứng dụng.

II. Sử dụng JavascriptInterface.

• Tạo 1 đối tượng JavascriptInterface

   class MyJavaScriptInterface {
        _@JavascriptInterface
		public void scrollWidth(String jsResult) {
		}
    }

- scrollWidth(): hàm này sẽ được thực thi trong câu lệnh javascript
- @JavascriptInterface: quyền truy cập javascript yêu cầu API Level 17

• Cài đặt một đối tượng Java vào webview để có thể truy cập từ JavaScript.

    webView.addJavascriptInterface(new MyJavaScriptInterface(), "HTMLOUT");

- HTMLOUT : định danh đối tượng để sử dụng trong câu lệnh javascript

• Liên kết với đối tượng javascript vừa tạo với webview

	mWebview.loadUrl("javascript:( function () { var result = document.documentElement.scrollWidth; window.HTMLOUT.scrollWidth(result); } ) ()");

- Thêm key  “javascript:” trước nội dung câu lệnh để webview hiểu đó là 1 hàm javascript.
- window.HTMLOUT.scrollWidth(result): thực hiện gọi hàm  scrollWidth() trong đối tượng MyJavaScriptInterface để lấy giá trị trong biến result, thông qua định danh HTMLOUT.

• Loại bỏ hoạt động javascript

    RemoveJavascriptInterface(“HTMLOUT”);

• Code demo:

    public class TestWebview extends Activity {
    WebView webView;

    _@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_webview);
        initWebview();
    }

    private void initWebview() {
        webView = (WebView) findViewById(R.id.webview_test);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new MyJavaScriptInterface(), "HTMLOUT");
        webView.setWebViewClient(new WebViewClient() {

            _@Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
            }

            _@Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }

            _@Override
            public void onPageFinished(WebView view, String url) {
                setJavascript();
            }

        });
        webView.loadUrl("http://framgia.com/jp/contact.html");
    }

    class MyJavaScriptInterface {
       _@JavascriptInterface
       public void scrollWidth(String jsResult) {
           Log.d("DAT", "Width webview = " + jsResult);
       }
    }

    private void setJavascript() {
        webView.loadUrl(
                "javascript:( " +
                        "function () {" +
                        " var result = document.documentElement.scrollWidth; window.HTMLOUT.scrollWidth(result); " +
                        "} ) ()"
        );
    }
  }

III. Tổng Kết

• JavascriptInterface trong webview là một kỹ thuật nâng cao, nó có thể giải quyết các vấn đề thực hiện tương tác đến các website.
• JavascriptInterface thích hợp xử lý hiển thị những văn bản có style phực tạp cần sử dụng HTML, hay đọc các file epub.
• Ứng dụng của JavascriptInterface webview vào thực tiễn không nhiều vì hầu hết các ứng dụng đều chia ra 2 mảng phần biệt web và mobile. Nhưng nếu cần sự kết hợp giữa 2 mảng này thì JavascriptInterface hoàn toàn đủ khả năng thực hiện điều đó.

Tài liệu tham khảo: https://developer.android.com/reference/android/webkit/JavascriptInterface.html