繁体   English   中英

通过Android WebView中的javascript检测HTML按钮的点击

[英]Detect click on HTML button through javascript in Android WebView

我对 javascript 不是很熟悉,但我认为这是实现我的目的的最佳方式。 如果没有,请纠正我。

我最后有一个许可证文本 2 个按钮。 所有这些都是在WebView HTML 编写的,因为许可证中有一些链接。 现在,我希望当用户单击WebView的“确定”按钮时,这会触发一些 javascript 或侦听器,我可以在 Java 中抓取它们以触发Intent在应用程序中前进。 (取消按钮会做相反的事情,但如果我知道如何做一个,我可以做另一个。;))

这是否给某人敲响了警钟? 欢迎任何解释或示例代码。

经过一番阅读,我终于自己掌握了它。 当您对 javascript 一无所知并且文档对这个主题非常薄时,这有点困难。
这是我的解决方案,希望这会对其他人有所帮助:

带有一个包含 2 个按钮的 HTML 页面,如下所示:

<div>
     <button type="button" id="ok" style="font-weight: 700; margin-right: 20px;" onclick="validClick();">J'accepte</button>
     <button type="button" id="no" onclick="refuseClick();">Je refuse</button>
</div>

我将点击事件发送到 HTML 页面顶部的 javascript :

<script language="javascript">

   function validClick()
   {
      valid.performClick();
      document.getElementById("ok").value = "J'accepte";
   }
   function refuseClick()
   {
      refuse.performClick();
      document.getElementById("no").value = "Je refuse";
   }

</script>

validrefuse是我通过 javascript 接口传递的 2 个 java 对象,以使用它们的方法。 因此,在 Java 中,我创建了 2 个按钮(并未真正显示在 Activity 中,仅在此处显示它们的方法,并且是 HTML 按钮的阴影:

valid = new Button(ctx);
valid.setOnClickListener(this);
refuse = new Button(ctx);
refuse.setOnClickListener(this);

然后我将 javascript 添加到我的WebView

// Enablejavascript
WebSettings ws = wv.getSettings();
ws.setJavaScriptEnabled(true);
// Add the interface to record javascript events
wv.addJavascriptInterface(valid, "valid");
wv.addJavascriptInterface(refuse, "refuse");

最后,在 onClick 方法中处理点击事件:

@Override
public void onClick(View v) {
    if (v.equals(valid)) {
        //do Something
    } else if (v.equals(refuse)) {
        //do Something else }
}

希望这会帮助一些人

这是一个更简单的解决方案。 在 Java 端,为每个按钮创建一个侦听器。 它不需要是任何特定的类,因为将使用反射查找该方法:

WebSettings ws = wv.getSettings();
ws.setJavaScriptEnabled(true);
wv.addJavascriptInterface(new Object()
{
  public void performClick()
  {
    // Deal with a click on the OK button
  }
}, "ok");

然后在 HTML 中,直接从 button 标签调用它:

<button type="button" onclick="ok.performClick();">OK</button>

如果您还想检索按钮值。

爪哇:

WebSettings ws = wv.getSettings();
ws.setJavaScriptEnabled(true);
wv.addJavascriptInterface(new Object()
{
   @JavascriptInterface           // For API 17+
   public void performClick(String strl)
   {
      stringVariable = strl;
      Toast.makeText (YourActivity.this, stringVariable, Toast.LENGTH_SHORT).show();
   }
}, "ok");

HTML:

<button type="button" value="someValue" onclick="ok.performClick(this.value);">OK</button>
    WebView browser = new WebView(this);
    browser.getSettings().setJavaScriptEnabled(true);
    browser.loadUrl("file:///android_asset/page.html");
    setContentView(browser);
    WebSettings ws = browser.getSettings();
    ws.setJavaScriptEnabled(true);
    browser.addJavascriptInterface(new Object()
    {
        @JavascriptInterface           // For API 17+
        public void performClick(String strl)
        {

            Toast.makeText (MainActivity.this, strl, Toast.LENGTH_SHORT).show();

        }
    }, "ok");

page.html 文件

 <html> <body> First name: <input type="text" name="fname" id="txtfname"><br> Last name: <input type="text" name="lname" id="txtlname"><br> <script> function getValues() { document.getElementById("btnOK").value = document.getElementById("txtfname").value+" "+document.getElementById("txtlname").value; } </script> <button type="button" value="" id="btnOK" onclick="getValues();ok.performClick(this.value);">OK</button> </body> </html>

<b><button type = "button" value = "print" onclick="ok.performClick(this.value)" id="ok">PRINT</button></b>


webView.addJavascriptInterface( new Object() {
        @JavascriptInterface // For API 17+
        public void performClick (String strl) {
            //performClick 
        }
    } , "ok" ) ;

使用下面的Android代码和Android代码下面也给出的Web代码。 我已经实现了下面的所有代码并且它在 android 版本 11 中运行得非常好

 mWebView.loadUrl(outputResponse.getRedirectUserTo());
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        Intent returnIntent = new Intent();
                        returnIntent.putExtra("result",message);
                        setResult(Activity.RESULT_OK,returnIntent);
                        finish();
                    }
                });
                return true;
            }
        });

        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        });

 function validClick() { alert("Success"); }
 { background:#f2f2f2; } .payment { border:2px solid #01BD9A; height:280px; border-radius:20px; background:#fff; } .payment_header { background:#01BD9A; padding:20px; border-radius:20px 20px 0px 0px; } .button_clk { background:#F55951; padding:10px; margin-top: 30; border-radius:20px 20px 20px 20px; } .check { margin:0px auto; width:50px; height:50px; border-radius:100%; background:#fff; text-align:center; } .check i { vertical-align:middle; line-height:50px; font-size:30px; } .content { text-align:center; } .content h1 { font-size:25px; padding-top:25px; } .content a { width:200px; height:35px; color:#fff; border-radius:30px; padding:5px 10px; background:rgba(255,102,0,1); transition:all ease-in-out 0.3s; } .content a:hover { text-decoration:none; background:#000; }
 <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <body> <div class="container"> <div class="row"> <div class="col-md-6 mx-auto mt-5"> <div class="payment"> <div class="payment_header"> <div class="check"><i class="fa fa-check" aria-hidden="true"></i></div> </div> <div class="content"> <h1>Payment Success !</h1> <div> <button class="button_clk" type="button" id="ok" onclick="validClick();">Go Back</button> </div> </div> </div> </div> </div> </div> </body>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM