这里主要重写WebChromeClient的3个方法:
onJsAlert :警告框(WebView上alert无效，需要定制WebChromeClient处理弹出)
onJsPrompt : 提示框.
onJsConfirm : 确定框.
效果图分别为:
1.Alert
2.Prompt
3.Confirm
先来看看js的页面代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=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而已.
[html] view plain copy
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns: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)
弹出提示框一般有3种
1)alert (普通提示框)
2)prompt (可输入的提示框)
3)confirm (可选择的提示框)
下面举个例子:
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="mal()">第一种:alert</button>
<button onclick="mpro()">第二种:prompt</button>
<button onclick="mcon()">第三种:confirm</button>
<script>
function mal(){
alert('这是一个普通的提示框')
}
function mpro(){
var val = prompt('这是一个可输入的提示框','这个参数为输入框默认值,可以不填哦')
//prompt会把输入框的值返回给你
}
function mcon(){
var boo = confirm('这是一个可选择的提示框,3种提示方式,学会了吗?')
//confirm 会返回你选择的选项,然后可以依据选择执行逻辑
if(boo){
alert('学会了,真聪明')
}else{
alert('再来一遍吧')
}
}
</script>
</body>
</html>
alert()方法：警告消息框；alert 方法有一个参数，即希望对用户显示的文本字符串。
该字符串不是 HTML 格式，该消息框提供了一个“确定”按钮让用户关闭该消息框，并且该消息框是模式对话框，也就是说，用户必须先关闭该消息框然后才能继续进行操作。
参考如下：
window.alert("欢迎！请按“确定”继续。")
