在web開發(fā)中，我們會(huì)經(jīng)常使用到Alert、Confirm、Prompt等對話框，但是web自帶的對話框又很丑，很多時(shí)候我們不得不自己寫一些彈窗或者用一些第三方庫來實(shí)現(xiàn)，但是在Hybrid開發(fā)中，我們可以通過一些簡單操作，在web頁面用js調(diào)用原生的對話框，讓web頁面更接近原生體驗(yàn)。
先看看效果吧
效果圖.gif
下面看看具體是怎么實(shí)現(xiàn)的
assets文件夾下面新建一個(gè)index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<p>通過JS調(diào)用三種不同的原生對話框</p>
<p>Alert對話框</p>
<p>
<input type="submit" name="Submit1" value="展示Alert對話框" onclick="alertFun()" />
</p>
<p>Confirm對話框</p>
<p>
<input type="submit" name="Submit2" value="展示Confirm對話框" onclick="confirmFun()" />
</p>
<p>Prompt對話框</p>
<p>
<input type="submit" name="Submit3" value="展示Prompt對話框" onclick="promptFun()" />
</p>
<script language="JavaScript">
function alertFun() {
alert("這是js的alert,但是彈出的是原生的Alert警告對話框哦！")
};
function confirmFun() {
if (confirm("訪問百度?")) {
location.;
} else alert("取消訪問!");
};
function promptFun() {
var word = prompt("對YuTao說的話寫在下面吧", "對YuTao說的話寫在這里吧");
if (word) {
alert("你輸入了:" + word)
} else {
alert("呵呵,你什么都沒寫!");
}
}
</script>
</body>
</html>
WebView布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<WebView
android:id="@+id/wView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp" />
</LinearLayout>
新建一個(gè)prompt_view布局
<?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/text"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<EditText
android:id="@+id/edit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollHorizontally="true"
android:selectAllOnFocus="true" />
</LinearLayout>
加載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");
//設(shè)置WebChromeClient,處理網(wǎng)頁中的各種js事件
wView.setWebChromeClient(new MyWebChromeClient());
wView.loadUrl("file:///android_asset/index.html");
自定義一個(gè)類實(shí)現(xiàn)WebChromeClient類,并重寫三種不同對話框
//分別重寫onJsAlert,onJsConfirm,onJsPrompt方法
class MyWebChromeClient extends WebChromeClient {
@Override
public boolean onJsAlert(WebView view, String url, String message,
final JsResult result) {
//創(chuàng)建一個(gè)Builder來顯示網(wǎng)頁中的對話框
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) {
//①獲得一個(gè)LayoutInflater對象factory,加載指定布局成相應(yīng)對象
final LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
final View myview = inflater.inflate(R.layout.prompt_view, null);
//設(shè)置TextView對應(yīng)網(wǎng)頁中的提示信息,edit設(shè)置來自于網(wǎng)頁的默認(rèn)文字
((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) {
//取得輸入的值,傳給網(wǎng)頁處理
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;
}
}
其實(shí)原理很簡單，就是自定義一個(gè)類實(shí)現(xiàn)WebChromeClient類,并重寫三種不同對話框的處理方法
從html的js代碼可以看，我們在web中只寫了最簡單的js語法，沒有其他任何處理，所以這種實(shí)現(xiàn)還得Android配合。
最后送上源碼：源碼
