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

谁践踏了优雅 2024-02-18 18:47 50阅读 0赞

默认情况下,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

![SouthEast][]

2.Prompt

![SouthEast 1][]

3.Confirm

![SouthEast 2][]

先来看看js的页面代码:

**\[html\]** [view plain][] [copy][view plain]

1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3.  <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en">
4.  <head>
5.  <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
6.  <title>Document</title>
7.  <scripttype="text/javascript">
8.   function call()\{ 
9.   var value = document.getElementById("input").value; 
10.  alert(value); 
11.  \} 
12.  //警告 
13.  function onAlert()\{ 
14.  alert("This is a alert sample from html"); 
15.  \} 
16.  //确定 
17.  function onConfirm()\{ 
18.  var b = confirm("are you sure to login?"); 
19.  alert("your choice is "+b); 
20.  \} 
21.  //提示 
22.  function onPrompt()\{ 
23.  var b = prompt("please input your password","aaa"); 
24.  alert("your input is "+b); 
25.  \} 
26. </script>
27. 
28. </head>
29. <body>
30. <inputtype="text"id="input"value="default"/>
31. <buttononclick=call()>点我弹出Alert</button></br>
32. <inputtype="button"value="alert"onclick="onAlert()"/></br>
33. <inputtype="button"value="confirm"onclick="onConfirm()"/></br>
34. <inputtype="button"value="prompt"onclick="onPrompt()"/></br>
35. </body>
36. 
37. </html>

Android代码:

**\[java\]** [view plain][] [copy][view plain]

1.  package com.example.chenys.webviewdemo; 
2.  
3.  import android.app.Activity; 
4.  import android.app.AlertDialog; 
5.  import android.content.DialogInterface; 
6.  import android.os.Bundle; 
7.  import android.view.View; 
8.  import android.webkit.JsPromptResult; 
9.  import android.webkit.JsResult; 
10. import android.webkit.WebChromeClient; 
11. import android.webkit.WebSettings; 
12. import android.webkit.WebView; 
13. import android.widget.EditText; 
14. import android.widget.TextView; 
15. 
16. /\*\*
17.  \* Created by mChenys on 2015/11/19.
18.  \*/
19. publicclass TestAlertActivity extends Activity \{ 
20. @Override
21. protectedvoid onCreate(Bundle savedInstanceState) \{ 
22. super.onCreate(savedInstanceState); 
23.  WebView webView = new WebView(this); 
24.  setContentView(webView); 
25.  webView.requestFocus(); 
26.  WebSettings settings = webView.getSettings(); 
27.  settings.setJavaScriptEnabled(true);//启用支持js
28. //设置响应js 的Alert()函数
29.  webView.setWebChromeClient(new WebChromeClient() \{ 
30. @Override
31. publicboolean onJsAlert(WebView view, String url, String message, final JsResult result) \{ 
32.  AlertDialog.Builder b = new AlertDialog.Builder(TestAlertActivity.this); 
33.  b.setTitle("Alert"); 
34.  b.setMessage(message); 
35.  b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() \{ 
36. @Override
37. publicvoid onClick(DialogInterface dialog, int which) \{ 
38.  result.confirm(); 
39.  \} 
40.  \}); 
41.  b.setCancelable(false); 
42.  b.create().show(); 
43. returntrue; 
44.  \} 
45. //设置响应js 的Confirm()函数
46. @Override
47. publicboolean onJsConfirm(WebView view, String url, String message, final JsResult result) \{ 
48.  AlertDialog.Builder b = new AlertDialog.Builder(TestAlertActivity.this); 
49.  b.setTitle("Confirm"); 
50.  b.setMessage(message); 
51.  b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() \{ 
52. @Override
53. publicvoid onClick(DialogInterface dialog, int which) \{ 
54.  result.confirm(); 
55.  \} 
56.  \}); 
57.  b.setNegativeButton(android.R.string.cancel, new DialogInterface.OnClickListener() \{ 
58. @Override
59. publicvoid onClick(DialogInterface dialog, int which) \{ 
60.  result.cancel(); 
61.  \} 
62.  \}); 
63.  b.create().show(); 
64. returntrue; 
65.  \} 
66. //设置响应js 的Prompt()函数
67. @Override
68. publicboolean onJsPrompt(WebView view, String url, String message, String defaultValue, final JsPromptResult result) \{ 
69. final View v = View.inflate(TestAlertActivity.this, R.layout.prompt\_dialog, null); 
70.  ((TextView) v.findViewById(R.id.prompt\_message\_text)).setText(message); 
71.  ((EditText) v.findViewById(R.id.prompt\_input\_field)).setText(defaultValue); 
72.  AlertDialog.Builder b = new AlertDialog.Builder(TestAlertActivity.this); 
73.  b.setTitle("Prompt"); 
74.  b.setView(v); 
75.  b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() \{ 
76. @Override
77. publicvoid onClick(DialogInterface dialog, int which) \{ 
78.  String value = ((EditText) v.findViewById(R.id.prompt\_input\_field)).getText().toString(); 
79.  result.confirm(value); 
80.  \} 
81.  \}); 
82.  b.setNegativeButton(android.R.string.cancel, new DialogInterface.OnClickListener() \{ 
83. @Override
84. publicvoid onClick(DialogInterface dialog, int which) \{ 
85.  result.cancel(); 
86.  \} 
87.  \}); 
88.  b.create().show(); 
89. returntrue; 
90.  \} 
91.  \}); 
92.  webView.loadUrl("file:///android\_asset/index3.html"); 
93.  \} 
94. \}

有2个需要注意的:

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

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

**\[html\]** [view plain][] [copy][view plain]

1.  <?xmlversion="1.0"encoding="utf-8"?>
2.  <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
3.  android:layout\_width="match\_parent"
4.  android:layout\_height="match\_parent"
5.  android:orientation="vertical">
6.  
7.  <TextView
8.  android:id="@+id/prompt\_message\_text"
9.  android:layout\_width="match\_parent"
10. android:layout\_height="wrap\_content"/>
11. 
12. <EditText
13. android:id="@+id/prompt\_input\_field"
14. android:layout\_width="match\_parent"
15. android:layout\_height="wrap\_content"
16. android:minWidth="250dp"
17. android:selectAllOnFocus="true"
18. android:scrollHorizontally="true"/>
19. </LinearLayout>

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

**\[java\]** [view plain][] [copy][view plain]

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

[SouthEast]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/70f8495612ee4cefb4fe0ff7f0f66d15.png
[SouthEast 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d5b553ea443e48a1aba279b3df3685fb.png
[SouthEast 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/85fd8f8cfa394f30bdea3447d0ff3f57.png
[view plain]: http://blog.csdn.net/mChenys/article/details/49930739#