检测是否在 Android WebView 中单击了特定按钮

Question

我目前正在开发一个 android 应用程序。这个应用程序包含一个 WebView 并显示一个我不拥有的网站。(Fe a WebStore)

该应用程序应该识别/检测用户何时单击本网站上的特定按钮（例如“购买产品”按钮）。如果用户点击这样的按钮，那么应用程序会弹出一个祝酒词。

我知道这对于每个网站都会有所不同，但是我通常如何对点击检测进行编程？我阅读了一些关于注入 JavaScript 等的文章，但是我真的不明白这应该如何工作。有没有办法说：如果用户点击 id=buy_button 的按钮，然后显示 toast？

谢谢你的帮助！

Answer 1

让我为您提供一个完整的示例。对于您的特定网站http://store.nike.com/ch/de_de/pd/mercurial-superfly-v-tech-craft-2-herren-fussballschuh-fur-normalen-rasen/pid-11229711/pgid-11626158

{
    ...

    webview.getSettings().setJavaScriptEnabled(true);
    webview.getSettings().setDomStorageEnabled(true);
    webview.addJavascriptInterface(new MyJavaScriptInterface(this), "ButtonRecognizer");

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

        private void loadEvent(String javascript){
            webview.loadUrl("javascript:"+javascript);
        }

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

        private String getButtons(){
            return "var buttons = document.getElementsByClassName('add-to-cart'); console.log(buttons.length + ' buttons');\n";
        }
    });

    webview.loadUrl("http://store.nike.com/ch/de_de/pd/mercurial-superfly-v-tech-cra\u200C\u200Bft-2-herren-fussballschuh-fur-normalen-rasen/pid-11229711/pgid-11626158");

    ...
}


class MyJavaScriptInterface {

    private Context ctx;

    MyJavaScriptInterface(Context ctx) {
        this.ctx = ctx;
    }

    @JavascriptInterface
    public void boundMethod(String html) {
        new AlertDialog.Builder(ctx).setTitle("HTML").setMessage("It worked")
                .setPositiveButton(android.R.string.ok, null).setCancelable(false).create().show();
    }

}

这会将按钮的 onClick 更改为您需要的。

对于其他所有人，看起来 getElementById() 或 Android 问题存在特定于页面的问题，但按类 (getElementsByClassName()) 获取元素按预期工作。此外，可能需要将 getElementsByClassName() 替换为 getElementsByName()，例如在此网站上：https : //www.digitec.ch/de/s1/product/lexon-flip-wecker-3522142。你将把 getElementsByName('AddProductToCart') 放在哪里

信息：由于 IDE，clickListener 方法中的 \n 和奇怪的字符串组合是这样设置的。（“;”在字符串中引起问题）。

Answer 2

webview.setWebViewClient(new WebViewClient() {
public void onPageFinished(WebView view, String url) {
   view.loadUrl("javascript:document.getElementById('buy_button').onclick = function(){alert('my message');}");
}
});

这告诉您的 webview，当它完成加载时，它需要执行您的自定义 javascript 代码。在这种情况下，js 代码会在页面上搜索 ID 为“buy button”的元素，并设置 onclick 处理程序以提醒您的消息。

如果您特别需要敬酒，那么您将需要设置一个 javascript 接口，然后在其上调用一个方法。有道理？