在web开发中，我们会经常使用到Alert、Confirm、Prompt等对话框，但是web自带的对话框又很丑，很多时候我们不得不自己写一些弹窗或者用一些第三方库来实现，但是在Hybrid开发中，我们可以通过一些简单操作，在web页面用js调用原生的对话框，让web页面更接近原生体验。

先看看效果吧

下面看看具体是怎么实现的

assets文件夹下面新建一个index.html

    
        
    
通过JS调用三种不同的原生对话框
Alert对话框
    
Confirm对话框
    
Prompt对话框
    
复制代码

WebView布局

        
     
    复制代码

新建一个prompt_view布局

    
        
         
     
      复制代码

加载web页面到webview

wView = (WebView) findViewById(R.id.wView);//获得WebSetting对象,支持js脚本,可访问文件,支持缩放,以及编码方式WebSettings webSettings = wView.getSettings();webSettings.setJavaScriptEnabled(true);webSettings.setAllowFileAccess(true);webSettings.setBuiltInZoomControls(true);webSettings.setDefaultTextEncodingName("UTF-8");//设置WebChromeClient,处理网页中的各种js事件wView.setWebChromeClient(new MyWebChromeClient());wView.loadUrl("file:///android_asset/index.html");复制代码

自定义一个类实现WebChromeClient类,并重写三种不同对话框

//分别重写onJsAlert,onJsConfirm,onJsPrompt方法    class MyWebChromeClient extends WebChromeClient {        @Override        public boolean onJsAlert(WebView view, String url, String message,                                 final JsResult result) {            //创建一个Builder来显示网页中的对话框            new Builder(MainActivity.this).setTitle("Alert对话框").setMessage(message)                    .setPositiveButton("确定", new OnClickListener() {                        @Override                        public void onClick(DialogInterface dialog, int which) {                            result.confirm();                        }                    }).setCancelable(false).show();            return true;        }        @Override        public boolean onJsConfirm(WebView view, String url, String message,                                   final JsResult result) {            new Builder(MainActivity.this).setTitle("Confirm对话框").setMessage(message)                    .setPositiveButton("确定", new OnClickListener() {                        @Override                        public void onClick(DialogInterface dialog, int which) {                            result.confirm();                        }                    })                    .setNegativeButton("取消", new DialogInterface.OnClickListener() {                        @Override                        public void onClick(DialogInterface dialog, int which) {                            result.cancel();                        }                    }).setCancelable(false).show();            return true;        }        @Override        public boolean onJsPrompt(WebView view, String url, String message,                                  String defaultValue, final JsPromptResult result) {            //①获得一个LayoutInflater对象factory,加载指定布局成相应对象            final LayoutInflater inflater = LayoutInflater.from(MainActivity.this);            final View myview = inflater.inflate(R.layout.prompt_view, null);            //设置TextView对应网页中的提示信息,edit设置来自于网页的默认文字            ((TextView) myview.findViewById(R.id.text)).setText(message);            ((EditText) myview.findViewById(R.id.edit)).setText(defaultValue);            //定义对话框上的确定按钮            new Builder(MainActivity.this).setTitle("Prompt对话框").setView(myview)                    .setPositiveButton("确定", new OnClickListener() {                        @Override                        public void onClick(DialogInterface dialog, int which) {                            //取得输入的值,传给网页处理                            String value = ((EditText) myview.findViewById(R.id.edit)).getText().toString();                            result.confirm(value);                        }                    })                    .setNegativeButton("取消", new OnClickListener() {                        @Override                        public void onClick(DialogInterface dialog, int which) {                            result.cancel();                        }                    }).show();            return true;        }    }复制代码

其实原理很简单，就是自定义一个类实现WebChromeClient类,并重写三种不同对话框的处理方法

从html的js代码可以看，我们在web中只写了最简单的js语法，没有其他任何处理，所以这种实现还得Android配合。

最后送上源码：