How to catch element click by ID in Android webview?

Question

I have the viewPager component which is containing the several webviews with HTML content from remote server.

Is it simple HTML code without possibility to change the HTMl output on the server side.

I would like to ask, how can i catch the click(tap) event on the specified element with the given ID in Android?

ViewPager

private void initViewPager() {
        pager = (ViewPager) findViewById(R.id.my_pager);
        adapter = new FragmentStatePagerAdapter(
                getSupportFragmentManager()
        ) {
            @Override
            public int getCount() {
                // This makes sure getItem doesn't use a position
                // that is out of bounds of our array of URLs
                Logger.d(String.valueOf(mWelcomeController.loadedPagesToDisplay.size()));
                return mWelcomeController.loadedPagesToDisplay.size();
            }

            @Override
            public android.support.v4.app.Fragment getItem(int position) {
                Logger.d(mWelcomeController.loadedPagesToDisplay.toString());
                return BrowserFragment.newInstance(
                        mWelcomeController.loadedPagesToDisplay.get(position)
                );
            }
        };

        //Let the pager know which adapter it is supposed to use
        pager.setAdapter(adapter);
    }

Because I cannot modify the HTML output on the server side (maybe inject some attributes into DOM on device ?) I cannot use something like that:

http://www.scriptscoop.com/t/21b53b896c9e/javascript-how-to-detect-button-click-in-webview-android.html

Detect click on HTML button through javascript in Android WebView.

I would like just something like this:

• Find the given element in the HTML code
• Update the HTML code (add onclick event)
• Catch this event in native code

Answer 1

For that you need to parse the html, a good html parser for Java (and therefor also Android) is Jsoup.

You can do something like:

// Connect to the web site
Document doc = Jsoup.connect(url).get();
Element button = doc.select("#buttonid");
button.html("new stuff here");
//parse back and put in webview
String finaloutput = doc.html();

Answer 2

1.

// setting
wv.addJavascriptInterface(new MyJsToAndroid(),"my");
WebSettings settings = wv.getSettings();
settings.setJavaScriptEnabled(true);

2.

// JsCallBack
class MyJsToAndroid extends Object{
    @JavascriptInterface
    public void myClick(String idOrClass) {
        Log.d(TAG, "myClick-> " + idOrClass);
    }
}

3.

// JS--
    public static String addMyClickCallBackJs() {
        String js = "javascript:";
        js += "function myClick(event){" +
                "if(event.target.className == null){my.myClick(event.target.id)}" +
                "else{my.myClick(event.target.className)}}";
        js += "document.addEventListener(\"click\",myClick,true);";
        return js;
    }

4.

@Override
public void onPageFinished(WebView wv, String url) {
//...
    wv.evaluateJavascript(addMyClickCallBackJs(),null);
//...
}

So, look at the 2 log.