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

时间:2010-10-31 21:48:05

标签: javascript android click webview

我对javascript不是很熟悉,但我认为这是达到目的的最好方法。如果没有,请纠正我。

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

这会给某人敲钟声吗? 欢迎任何解释或示例代码。

6 个答案:

答案 0 :(得分:59)

经过一番阅读后,我终于得到了它。当你对javascript一无所知以及文档在这个主题上相当薄时,有点难 这是我的解决方案,希望这会有助于其他人:

最后一个HTML页面包含2个按钮:

<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方法中的click事件:

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

希望这能帮助一些人

答案 1 :(得分:38)

这是一个更简单的解决方案。在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 type="button" onclick="ok.performClick();">OK</button>

答案 2 :(得分:20)

如果您还想检索按钮值。

爪哇:

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>

答案 3 :(得分:2)

    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文件

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

答案 4 :(得分:0)

<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" ) ;

答案 5 :(得分:0)

使用下面的 Android 代码和 web 代码也在下面的 android 代码中给出。 我已经实现了以下所有代码,并且在 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>