How can we navigate to activity from web page button click event?

Question

I have two buttons in webview. I want to give manually click events to their. Below is my code;

WebPage Code

<form method="post" name="refer_now">
    <div class="refer-now-button">
      <!-- <button type="submit" class="refer-now-btn" id="refer-now">refer now</button> -->
      <input type="button" class="refer-now-btn" value="refer now" name="refernow" id="refernow" onClick="showAndroidToast('refer');" />
    </div>
  </form>

  <form method="post" name="refer_now_footer">
    <div class="refer-now-button">
      <!-- <button type="submit" class="refer-now-btn" id="refer_now_footer">refer now</button> -->
       <input type="button" class="refer-now-btn" value="refer now" name="refer-footer" id="refer-footer" onClick="showAndroidToast('bottom_refer');" />
    </div>
</form>

Below is my java code;

   mWebview.loadUrl(link);

            mWebview.setWebChromeClient(new WebChromeClient() {
                @Override
                public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                    //Required functionality here
                    return super.onJsAlert(view, url, message, result);
                }});
            mWebview.addJavascriptInterface(new WebAppInterface(this), "AndroidInterface");
            mWebview.getSettings().setJavaScriptEnabled(true);
            mWebview.getSettings().setLoadsImagesAutomatically(true);
            mWebview.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

    public class WebAppInterface {
    Context mContext;

    // Instantiate the interface and set the context
    WebAppInterface(Context c) {
        mContext = c;
    }

    @JavascriptInterface
    public void showevent(String toast) {
        if(toast.equalsIgnoreCase("refer")){
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
        }else if(toast.equalsIgnoreCase("bottom_refer")){
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
        }
    }
}

When I run this code; this gives me below errors:

"Uncaught ReferenceError: AndroidInterface is not defined",

Possible duplicate of [How to perform a button click inside a Webview Android](https://stackoverflow.com/questions/30113445/how-to-perform-a-button-click-inside-a-webview-android) — Mr.vicky patel, Apr 10 '19 at 10:23
@Mr.vicky this is not duplicate answer. I want to give multiple buttons click event. If you can give me better solution then it will helpful for me — Vishal Vaishnav, Apr 10 '19 at 10:44

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

To perform button click from webview in android:

HTML & Java script

<!DOCTYPE html>
<html lang="en">
<body>
<input type="button"  value="Say hello" onClick="showAndroidToast('OK')" />
<input type="button"  value="hello mr.vicky" onClick="showAndroidToast('MR.VICKY')" />
<br/><br/>

<script type="text/javascript">
        <!-- Sending value to Android -->
        function showAndroidToast(toast) {
            AndroidInterface.showToast(toast);
        }
      </script>
</body>
</html>

JAVA code

package com.ellvar.Activity.Common.Activity;

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.webkit.JavascriptInterface;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ImageView;
import android.widget.Toast;

import com.ellvar.CustomView.CustomDialog;
import com.ellvar.CustomView.CustomProgressDialog;
import com.ellvar.R;
import com.ellvar.Utils.Utility;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

public class TermsConditionActivitydemo extends AppCompatActivity {

    @BindView(R.id.wv_termscondition)
    WebView wvTermscondition;
    @BindView(R.id.iv_back)
    ImageView ivBack;
    CustomProgressDialog progressDialog;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_terms_condition);
        ButterKnife.bind(this);
        if (!Utility.getInstance().isNetworkAvailable(this)) {
            CustomDialog.getInstance().showalert(this, getString(R.string.please_check_internet_connection));
        }else{
            loaddata();
        }
    }
    private void loaddata() {
        wvTermscondition.loadUrl("file:///android_asset/index.html");
        wvTermscondition.setWebChromeClient(new WebChromeClient() {
                                  @Override
                                  public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                                      //Required functionality here
                                      return super.onJsAlert(view, url, message, result);
                                  }});
        wvTermscondition.addJavascriptInterface(new WebAppInterface(this), "AndroidInterface");
        wvTermscondition.getSettings().setJavaScriptEnabled(true);
        wvTermscondition.getSettings().setLoadsImagesAutomatically(true);
        wvTermscondition.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
    }


    @OnClick(R.id.iv_back)
    public void onViewClicked() {
        finish();
    }


    public class WebAppInterface {
        Context mContext;

        // Instantiate the interface and set the context
        WebAppInterface(Context c) {
            mContext = c;
        }

        @JavascriptInterface
        public void showToast(String toast) {
            if(toast.equalsIgnoreCase("OK")){
                Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
            }else if(toast.equalsIgnoreCase("MR.VICKY")){
                Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
            }
        }
    }


}

OUTPUT

Hii I got error: "Uncaught ReferenceError: AndroidInterface is not defined" — Vishal Vaishnav, Apr 11 '19 at 07:07
Please try to create new project and just past this two files because i have done it successfully and uploaded output also. — Mr.vicky patel, Apr 11 '19 at 07:11

score 0 · Answer 2 · answered Apr 10 '19 at 10:11

0

I'm not sure If you can call addJavaScriptInterface method multiple times with different names. Try moving your performClick1 method under same JavaScriptInterface like:

    view.addJavascriptInterface(new Object() {
        @JavascriptInterface
        public void performClick() {
            Intent i = new Intent(FollowPageActivity.this, MyLoyaltyActivity.class);
            startActivity(i);
        }

        @JavascriptInterface
        public void performClick1() {
            Intent i = new Intent(FollowPageActivity.this, MyLoyaltyActivity.class);
            startActivity(i);
        }
    }, "refer_now");// identify which button you click

answered Apr 10 '19 at 10:11

Uma Sankar

449
1
8
19

Can you tell me how can I navigate to application's particular activity via click of webpage button's click? – Vishal Vaishnav Apr 10 '19 at 10:26
Were you unable to navigate to activity as you mentioned in question? If not, please have a look @ https://stackoverflow.com/a/9194012/1496502 – Uma Sankar Apr 10 '19 at 12:33

edvard chen · Answer 3 · 2019-04-10T11:07:13.130

0

Form with name refer_now would be assigned to the same property of global object window.

It mean that refer_now in onclick="refer_now.performClick();" was the form element.

The Key is make sure that the name of form and the javascriptinterface name are different.

Here is a solution: keep the java code and change the html with following:

  <form method="post" name="refer_now_form">
    <div class="refer-now-button">
      <!-- <button type="submit" class="refer-now-btn" id="refer-now">refer now</button> -->
      <input type="submit" class="refer-now-btn" value="refer now" name="refernow" id="refernow" onclick="refer_now.performClick();" />
    </div>
  </form>

 <form method="post" name="refer_now_footer_form">
    <div class="refer-now-button">
      <!-- <button type="submit" class="refer-now-btn" id="refer_now_footer">refer now</button> -->
       <input type="submit" class="refer-now-btn" value="refer now" name="refer-footer" id="refer-footer" onclick="refer_now_footer.performClick1();" />
    </div>
</form>

edited Apr 10 '19 at 11:07

answered Apr 10 '19 at 10:12

edvard chen

2,320
1
12
10

How can I achieve this – Vishal Vaishnav Apr 10 '19 at 10:22
KEY line `
`. Your code was `
`. The name attributes are different
– edvard chen Apr 10 '19 at 10:28
So I need to write "form" in every button's name field? – Vishal Vaishnav Apr 10 '19 at 10:35
Just make sure the `name` of form and the second parameter in `view.addJavascriptInterface` call are not same. – edvard chen Apr 10 '19 at 10:49
Please write java code in your answer and also js code – Vishal Vaishnav Apr 10 '19 at 11:01
So that I can apply code and mark as well as check your answer – Vishal Vaishnav Apr 10 '19 at 11:02

How can we navigate to activity from web page button click event?

3 Answers3