在Android WebView中检测HTML按钮单击

Question

So in my Android app I open a webview that consists of a form and a button (to submit). The button element looks like this:

 <button role="button" class="btn ng-binding" ng-click="actions.collect()" tooltip="default" title="Check form">SAVE</button> 

Everything works except for when I lose internet connection. I am then not able to detect the button click. I would in this case like to show an error message saying the user is offline if button is clicked. How can I do that in my Activity? I'm pretty new to this so please give me more detailed answer if possible.

Thanks!

Answer 1

You must work with javascript interface like this:

{
...

myWebview.getSettings().setJavaScriptEnabled(true);
myWebview.getSettings().setDomStorageEnabled(true);
myWebview.addJavascriptInterface(new MyJavaScriptInterface(this), "ButtonCheck");

myWebview.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        loadMyEvent(clickListener());
    }

    private void loadMyEvent(String javascript){
        myWebview.loadUrl("javascript:"+javascript);
    }

    private String clickListener(){
        return getMyButtons()+ "for(var i = 0; i < buttons.length; i++){\n" +
                "\tbuttons[i].onclick = function(){ console.log('click worked.'); ButtonCheck.boundMethod('button clicked'); };\n" +
                "}";
    }

    private String getMyButtons(){
        return "var buttons = document.getElementsByClassName('your-button-class'); console.log(buttons.length + ' buttons');\n";
    }
});

myWebview.loadUrl("http://....");

...
}


class MyJavaScriptInterface {

    private Context context;

    MyJavaScriptInterface(Context ctx) {
        context = ctx;
    }

    @JavascriptInterface
    public void boundMethod(String html) {
        //Check internet connection
    }

}