【问题标题】:Detect click on HTML button through javascript in Android WebView通过Android WebView中的javascript检测点击HTML按钮
【发布时间】:2011-05-03 04:38:19
【问题描述】:

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

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

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

【问题讨论】:

    标签: javascript android click webview


    【解决方案1】:

    经过一番阅读,我终于自己搞定了。当您对 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 方法中处理点击事件:

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

    希望对一些人有所帮助

    【讨论】:

    • @Sephy 你能解释一下什么是有效的,拒绝它们是按钮还是 JavaWebInterface 对象? onclick 方法是因为您实现了 onclick 侦听器或类似的东西?很抱歉,我无法运行上面的代码。请帮忙。谢谢
    • @Sephy 这在 Android 2.3 中不起作用。我有什么方法可以实现吗?
    • 这里有人吗?它也不适用于 4.1 和 4.2。请帮忙
    • 不在assets文件夹中的远程url,如何获取点击
    • @Sephy:我假设这里的对象应该有一个点击监听器,函数的名称并不重要,Ami 对吧?或者说它只是 performClick 可以替换为任何文本?
    【解决方案2】:

    这是一个更简单的解决方案。在 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>
    

    【讨论】:

    • 在我看来和我的完全一样,虽然只有一个按钮。请注意,我会将 javascript 界面绑定到 Button 而不是简单的 Object,这样您就可以受益于按钮周围的整套方法和内容!
    • peastman 的方法实际上更好,至少在语义上。绑定到Button 会诱使人们认为它们之间存在联系,但实际上并没有。代码并不关心你是否将 JavaScript 绑定到 ButtonBitmap 或普通的 Object。它会调用你告诉它的任何函数。您无法访问额外的方法。例如,在 Java Button 对象上调用 setText() 不会更改 HTML 按钮的文本。
    • 重要!对于 api 级别 17+ 的设备,不要忘记添加“@JavascriptInterface”注释。来自developer.android.com/guide/webapps/webview.html 注意:如果您将 targetSdkVersion 设置为 17 或更高,则必须将“@JavascriptInterface”注释添加到您希望 JavaScript 可用的任何方法(该方法也必须是公共的)。如果您不提供注释,则在 Android 4.2 或更高版本上运行时,您的网页将无法访问该方法。
    • 我试过但不适合我。请看stackoverflow.com/questions/20917235/…
    • 无法添加 javascriptInterface
    【解决方案3】:

    如果您还想检索按钮值。

    Java:

    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>
    

    【讨论】:

    • 这个名称“performClick”在 java 和 javascript 中是否必须相同?
    • 这个名称“performClick”在 java 和 javascript 中是否必须相同?
    • @user1530779 是的,因为它是 Object 函数的名称
    【解决方案4】:
        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>

    【讨论】:

      【解决方案5】:
      <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" ) ;
      

      【讨论】:

        【解决方案6】:

        使用下面的 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>

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2014-01-21
          • 1970-01-01
          • 1970-01-01
          • 2018-06-04
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多