web-dev-qa-db-fra.com

Détectez le clic sur le bouton HTML via javascript dans Android WebView

Je ne suis pas très familier avec javascript mais je pense que c'est la meilleure façon d'atteindre mon objectif. Sinon, veuillez me corriger.

J'ai un texte de licence 2 boutons à la fin. Tout cela est écrit en HTML dans un WebView car il y a des liens dans la licence. Maintenant, je veux que lorsque l'utilisateur clique sur le bouton "ok" dans le WebView, cela déclenche un javascript ou un écouteur que je peux saisir dans Java pour déclencher un Intent pour avancer dans l'application. (Le bouton Annuler ferait l'inverse, mais si je sais en faire un, je peux faire l'autre.;))

Est-ce que cela vous rappelle quelque chose? Toute explication ou exemple de code est la bienvenue.

javascriptandroidclickwebview
37
Sephy

Je l'ai finalement obtenu par moi-même après quelques lectures. Un peu dur quand on ne sait rien sur javascript et quand la doc est assez fine sur le sujet.
Voici ma solution, j'espère que cela aidera les autres:

Avec une page HTML contenant 2 boutons à la fin comme ça:

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

J'envoie l'événement du clic au javascript en haut de ma page HTML:

<script language="javascript">

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

</script>

valid et refuse sont 2 Java objets que j'ai passés par l'interface javascript pour utiliser leurs méthodes. Donc en Java, j'ai créé 2 boutons (pas vraiment affichés dans l'Activité, uniquement ici pour leurs méthodes et sont en quelque sorte des ombres des boutons HTML:

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

Ensuite, j'ai ajouté javascript à mon WebView:

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

Et enfin, gérez les événements de clic dans la méthode onClick:

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

J'espère que cela aidera certaines personnes

60
Sephy

Voici une solution plus simple. Du côté Java côté, créez un écouteur pour chaque bouton. Il n'a pas besoin d'être d'une classe particulière, car la méthode sera recherchée en utilisant la réflexion:

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

Ensuite, dans le HTML, appelez-le directement à partir de la balise bouton:

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

Dans le cas où vous souhaitez également récupérer la valeur du bouton.

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

fichier 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>
2
Raviraj Desai