How to show android alert dialog in Webview?

Question

I am Developing an app with webview but I don\'t know how to enable JavaScript to show alert dialog in webview.

I ever tried this one but it\'s isn\'t work for me. first

Answer 1

Try this code:

public OnClickListener imageButtonViewOnClickListener = new OnClickListener() {
public void onClick(View v) {

LayoutInflater inflater = LayoutInflater.from(MyActivity.this);

// error here
View alertDialogView = inflater.inflate(R.layout.alert_dialog_layout, null);

WebView myWebView = (WebView) findViewById(R.id.DialogWebView);
myWebView.loadData(webContent, "text/html", "utf-8");
AlertDialog.Builder builder = new AlertDialog.Builder(MyActivity.this);
builder.setView(alertDialogView);

builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
    public void onClick(DialogInterface dialog, int which) {
        dialog.cancel();
    }
}).show();
}
};

XML:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:orientation="vertical">

<WebView android:id="@+id/DialogWebView" android:layout_height="wrap_content"
android:layout_width="fill_parent" android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:textAppearance="?android:attr/textAppearanceMedium" />

Answer 2

It is not mandatory to use WebChromeClient if you want to display message box from JavaScript alert function. You can create interfaces between your JavaScript code and client-side Android code.

In the below example, your JavaScript code can call a method in your Android code to display a Dialog, instead of using JavaScript's alert() function. I found that this is the most convenient and widely supported way to display alerts.

Include the following classes in your Android application:

File: WebAppInterface.java

import android.content.Context;
import android.webkit.JavascriptInterface;

public class WebAppInterface {
    Context mContext;

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

    /** Show a Message box from the web page */
    @JavascriptInterface
    public void androidAlert(String message) {
        DialogBox dbx = new DialogBox();
        dbx.dialogBox(message, "I get it", "",mContext);
    }
}

File: DialogBox.java

import android.app.AlertDialog;
import android.app.Dialog;
import android.content.Context;
import android.content.DialogInterface;

public class DialogBox {    
    public boolean dialogBox(String msg, String okButton, String cancelButton, final Context activity) {
        Dialog v = null;
        AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(activity);
        alertDialogBuilder.setMessage(msg);
        if (okButton != "") {
            alertDialogBuilder.setPositiveButton(okButton,
                    new DialogInterface.OnClickListener() {    
                        @Override
                        public void onClick(DialogInterface arg0, int arg1) { /**/ }
                    });
        }    
        if (cancelButton != "") {
            alertDialogBuilder.setNegativeButton(cancelButton,
                    new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface arg0, int arg1) { /**/ }
                    });
        }

        AlertDialog alertDialog = alertDialogBuilder.create();
        alertDialog.show();
        return true;
    }    
}

Next, bind the WebAppInterface class to the JavaScript that runs in your WebView with addJavascriptInterface() and name the interface Android:

WebView mWebView = (WebView) findViewById(R.id.webview);
mWebView.addJavascriptInterface(new WebAppInterface(this), "Android");

This creates an interface called Android for JavaScript running in the WebView. At this point, your web application has access to the WebAppInterface class. Below is some HTML and JavaScript that creates a message box using the new interface when the user clicks a button:

<input type="button" value="Alert!" onClick="javascript:Android.androidAlert('It works!');" />

At the click of the button, the Android interface is used to call the WebAppInterface.androidAlert() method.

A bit of warning: Using addJavascriptInterface() allows JavaScript to control your Android application. This can be a very useful feature or a dangerous security issue. As such, you should not use addJavascriptInterface() unless you wrote all of the HTML and JavaScript that appears in your WebView.

Answer 3

To enable JavaScript dialogue on your webview, you can try this answer

Answer 4

If u want to show a native AlertDialog from an event in WebView, then this is what u r looking for Binding JavaScript code to Android code.

The sample code is available on this link..The example there show a Toast..u can show an AlertDialog insted.

Answer 5

As Per Your Code i thought you don't set following setting Webviewclient and Webcromeclient to enable Javascript in Webview.

 mWebView.setWebViewClient(new WebViewClient());
 mWebView.setWebChromeClient(new WebChromeClient());

Then you load your Html page with following code.

 mWebView.loadUrl("file:///android_asset/"+Your_Html_Page);

And This is Html part in your Webview.

<!DOCTYPE html>
<html>
<head>
    <script>
    function myFunction()
    {
        alert("Hello! I am an alert box!");
    }
    </script>
</head>
<body>

<input type="button" onclick="myFunction()" value="Show alert box" />
</body>
</html>

try this might be helpful.