在Android WebView中检测特定按钮是否被点击

Question

我目前正在开发一款Android应用程序。该应用程序包含一个WebView，用于显示一个我不拥有的网站（例如WebStore）。

该应用程序应该能够识别/检测用户在该网站上点击特定按钮（例如“购买产品”按钮）。如果用户点击了这样的按钮，则应用程序会弹出一个Toast提示。

我知道每个网站都可能不同，但是通常如何编写点击检测程序呢？我读了几篇关于注入JavaScript等方面的文章，但是我并不真正理解这应该如何工作。是否有一种方法可以说：如果用户单击id = buy_button的按钮，则显示toast？

感谢您的帮助！

- Cédric Portmann

---

你好，你找到解决方案了吗？我也需要做同样的事情，请告诉我。 - sherkhan

Answer 1

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处理程序设置为弹出你的消息。

如果你需要特定的toast，则需要设置一个javascript接口，然后调用其中的一个方法。明白了吗？

- Steven Mark Ford

---

谢谢你的回答，不过wblaschko已经帮我解决了。 :) - Cédric Portmann

这适用于JavaScript函数，如果我需要调用一些本地方法怎么办？ - yogesh lokhande

Answer 2

让我给您提供一个完整的例子。 对于您特定的网站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')

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

- wblaschko

---

感谢您的回答。但是它似乎不起作用。我按照以下方式实现它：webView.addJavascriptInterface(new Object() { public void performClick() { Toast.makeText(getApplicationContext(), "结账！", Toast.LENGTH_LONG).show(); } }, "myBoundJavascriptMethod"); - Cédric Portmann

此外，我启用了JavaScript并相应地设置了整个视图。我将元素ID更改为buyingtools-add-to-cart-button。顺便说一下，我选取了http://store.nike.com/ch/de_de/pd/mercurial-superfly-v-tech-craft-2-herren-fussballschuh-fur-normalen-rasen/pid-11229711/pgid-11626158作为示例来进行测试。 - Cédric Portmann

哦，这是我得到的错误：I / chromium：[INFO：CONSOLE（1）]“Uncaught TypeError：无法读取null的属性'addEventListener'”，来源： - Cédric Portmann

请尝试使用"document.getElementById('buy_button').onclick = myBoundJavascriptMethod"代替，如果可以，请告诉我。 - wblaschko

<button id="buyingtools-add-to-cart-button" type="submit">..所以这是购买工具添加到购物车按钮吧？ - Cédric Portmann