如何设置WebView支持js的Alert,Confirm,Prompt函数的弹出提示框.

原创 2015年11月19日 17:53:15

默认情况下,Android WebView是不支持js的Alert(),Confirm(),Prompt()函数的弹出提示框的.即使设置了setJavaScriptEnabled(true);也是没用的.那么,如何才能让WebView可以支持js的这3个函数呢.可以通过设置WebChromeClient对象来完成.WebChromeClient主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等等.

这里主要重写WebChromeClient的3个方法:

onJsAlert  :警告框(WebView上alert无效,需要定制WebChromeClient处理弹出)

onJsPrompt : 提示框.

onJsConfirm : 确定框.

效果图分别为:

1.Alert


2.Prompt


3.Confirm


先来看看js的页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <script type="text/javascript">
       function call(){
            var value = document.getElementById("input").value;
            alert(value);
       }
       //警告
       function onAlert(){
            alert("This is a alert sample from html");
       }
       //确定
       function onConfirm(){
          var b = confirm("are you sure to login?");
          alert("your choice is "+b);
       }
       //提示
       function onPrompt(){
           var b = prompt("please input your password","aaa");
           alert("your input is "+b);
       }
    </script>

</head>
<body>
    <input type="text" id="input" value="default"/>
    <button onclick=call()>点我弹出Alert</button></br>
    <input type="button" value="alert" onclick="onAlert()"/></br>
    <input type="button" value="confirm" onclick="onConfirm()"/></br>
    <input type="button" value="prompt" onclick="onPrompt()"/></br>
</body>

</html>


Android代码:

package com.example.chenys.webviewdemo;

import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.webkit.JsPromptResult;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.EditText;
import android.widget.TextView;

/**
 * Created by mChenys on 2015/11/19.
 */
public class TestAlertActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        WebView webView = new WebView(this);
        setContentView(webView);
        webView.requestFocus();
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);//启用支持js
        //设置响应js 的Alert()函数
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                AlertDialog.Builder b = new AlertDialog.Builder(TestAlertActivity.this);
                b.setTitle("Alert");
                b.setMessage(message);
                b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.confirm();
                    }
                });
                b.setCancelable(false);
                b.create().show();
                return true;
            }
            //设置响应js 的Confirm()函数
            @Override
            public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {
                AlertDialog.Builder b = new AlertDialog.Builder(TestAlertActivity.this);
                b.setTitle("Confirm");
                b.setMessage(message);
                b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.confirm();
                    }
                });
                b.setNegativeButton(android.R.string.cancel, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.cancel();
                    }
                });
                b.create().show();
                return true;
            }
            //设置响应js 的Prompt()函数
            @Override
            public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, final JsPromptResult result) {
                final View v = View.inflate(TestAlertActivity.this, R.layout.prompt_dialog, null);
                ((TextView) v.findViewById(R.id.prompt_message_text)).setText(message);
                ((EditText) v.findViewById(R.id.prompt_input_field)).setText(defaultValue);
                AlertDialog.Builder b = new AlertDialog.Builder(TestAlertActivity.this);
                b.setTitle("Prompt");
                b.setView(v);
                b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        String value = ((EditText) v.findViewById(R.id.prompt_input_field)).getText().toString();
                        result.confirm(value);
                    }
                });
                b.setNegativeButton(android.R.string.cancel, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.cancel();
                    }
                });
                b.create().show();
                return true;
            }
        });
        webView.loadUrl("file:///android_asset/index3.html");
    }
}


有2个需要注意的:

1.重写onJsPrompt 方法,需要我们自定一个提示的布局文件,如下:prompt_dialog.xml

就是一个提示的TextView和输入文本的EditTex而已.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/prompt_message_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <EditText
        android:id="@+id/prompt_input_field"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minWidth="250dp"
        android:selectAllOnFocus="true"
        android:scrollHorizontally="true"/>
</LinearLayout>

2.WebView需要支持js的话,要记得加启用js的支持.

 WebSettings settings = webView.getSettings();
 settings.setJavaScriptEnabled(true);





版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

android webview js alert对话框 不能弹出 解决办法

转自:http://blog.sina.com.cn/s/blog_4e1e357d0101ds5h.html 在配置了webview的 setting属性后,以前设置的都是可以直接弹出来的,今天写...

android webview之js alert处理

开始写webview的同学可能都遇到过这样的问题,当你的h5页面中包含js中的alert,confrim,prompt等弹窗时,运行时这些弹窗都是无效的。别着急android已经为我们预留出来接口来让...

android webview js alert对话框 不能弹出 解决办法

以前在用到webView的时候都是直接把Setting

android webview js alert对话框 不能弹出 解决办法

转自:http://blog.sina.com.cn/s/blog_4e1e357d0101ds5h.html android webview js alert对话框 不能弹出 ...
  • qqGrid
  • qqGrid
  • 2014年11月28日 15:20
  • 1264

android webview js alert对话框 不能弹出 解决办法

在配置了webview的 setting属性后,以前设置的都是可以直接弹出来的,今天写一个小demo时候莫名其妙的发现alert怎么也出来,即使设置了这么多也不行: webSettings.se...

android webview获取js中的alert、confirm、和prompt,以及获取其值

说明: 开发中遇到一个需要通过prompt来传值的情况。也就是通过捕获prompt弹出框的值,来显示在原生中,但是不弹出prompt框。 代码: 1、原生调用js代码 private WebVi...

Android webview调用js代码无效 webView.loadUrl("javascript:alert('hello')")

利用WebView调用js的alert方法一直无效的解决办法 webView.loadUrl("javascript:alert('hello')") 利用 webview调用...

android webview onJsAlert只调用一次的问题

android开发调用javascript的调试过程中,有时候需要使用onJsAlert来输出javascript方法的信息,以帮助我们进行问题定位。 覆写WebChromeClient的onJ...

2011/06/13 android 捕获js代码中的alert、confirm和prompt

今天稍微学习了下javascript的知识,接着就在网上看了个android捕获js代码中的消息的文章。文章写的很好,于是就想记录下来自己的java文件源码为: package com.android...

android webview onJsAlert 注意事项

最近在使用 WebView 的 onJsAlert 方法后,发现html页面点击没反应了,代码如下: mWebView.setWebChromeClient(new WebChromeClient(...
  • FX_SKY
  • FX_SKY
  • 2013年09月17日 16:52
  • 7703
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:如何设置WebView支持js的Alert,Confirm,Prompt函数的弹出提示框.
举报原因:
原因补充:

(最多只允许输入30个字)