为了方便开发者实现在app内展示网页并与网页交互的需求,Android SDK提供了WebView组件。 它继承自AbsoluteLayout,展示网页的同时,也可以在其中放入其他的子View。现如今,Hybrid应用似乎占据的APP的主流类型,那么关于WebView的使用就变得越发的重要。从Android 4.4(KitKat)开始,原本基于WebKit的WebView开始基于Chromium内核,这一改动大大提升了WebView组件的性能以及对HTML5,CSS3,JavaScript的支持。不过它的API却没有很大的改动,在兼容低版本的同时只引进了少部分新的API,并不需要你做很大的改动。链接 https://developer.android.com/guide/webapps/migrating.html
在WebView中,有几个地方是我们可以使用来定制我们的WebView各种行为的,分别是:WebSettings、JavaScriptInterface、WebViewClient以及WebChromeClient。
WebView常用方法
- String getUrl():获取当前页面的URL。
- reload():重新reload当前的URL,即刷新。
- boolean canGoBack():用来确认WebView里是否还有可回退的历史记录。通常我们会在WebView里重写返回键的点击事件,通过该方法判断WebView里是否还有历史记录,若有则返回上一页。
- boolean canGoForward():用来确认WebView是否还有可向前的历史记录。
- boolean canGoBackOrForward(int steps):以当前的页面为起始点,用来确认WebView的历史记录是否足以后退或前进给定的步数,正数为前进,负数为后退。
- goBack():在WebView历史记录后退到上一项。
- goForward():在WebView历史记录里前进到下一项。
- getScrollY():该方法返回的当前可见区域的顶端距整个页面顶端的距离,也就是当前内容滚动的距离。
- getHeight():方法都返回当前WebView这个容器的高度。其实以上两个方法都属于View。
- getContentHeight():该方法返回整个HTML页面的高度,但该高度值并不等同于当前整个页面的高度,因为WebView有缩放功能, 所以当前整个页面的高度实际上应该是原始HTML的高度再乘上缩放比例。因此,准确的判断方法应该是
if (webView.getContentHeight() * webView.getScale() == (webView.getHeight() + webView.getScrollY())) {
//已经处于底端
}
if(webView.getScrollY() == 0){
//处于顶端
}
- pageUp(boolean top):将WebView展示的页面滑动至顶部。
- pageDown(boolean bottom):将WebView展示的页面滑动至底部。
WebSettings
WebSettings是用来管理WebView配置的类。当WebView第一次创建时,内部会包含一个默认配置的集合。若我们想更改这些配置,便可以通过WebSettings里的方法来进行设置。
WebSettings对象可以通过WebView.getSettings()获得,它的生命周期是与它的WebView本身息息相关的,如果WebView被销毁了,那么任何由WebSettings调用的方法也同样不能使用。
获取WebSettings对象
WebSettings webSettings = webView.getSettings();
WebSettings常用方法
(几乎所有的set方法都有相应的get方法,这里就只介绍set了。
另,所有未写方法返回值类型的皆为空类型)
- setJavaScriptEnabled(boolean flag):设置WebView是否可以运行JavaScript。
- setJavaScriptCanOpenWindowsAutomatically(boolean flag):设置WebView是否可以由JavaScript自动打开窗口,默认为false,通常与JavaScript的window.open()配合使用。
- setAllowFileAccess(boolean allow):启用或禁用WebView访问文件数据。
- setBlockNetworkImage(boolean flag):禁止或允许WebView从网络上加载图片。需要注意的是,如果设置是从禁止到允许的转变的话,图片数据并不会在设置改变后立刻去获取,而是在WebView调用reload()的时候才会生效。
这个时候,需要确保这个app拥有访问Internet的权限,否则会抛出安全异常。
通常没有禁止图片加载的需求的时候,完全不用管这个方法,因为当我们的app拥有访问Internet的权限时,这个flag的默认值就是false。 - setSupportZoom(boolean support):设置是否支持缩放。
- setBuiltInZoomControls(boolean enabled):显示或不显示缩放按钮(wap网页不支持)。
- setSupportMultipleWindows(boolean support):设置WebView是否支持多窗口。
- setLayoutAlgorithm(WebSettings.LayoutAlgorithm l):指定WebView的页面布局显示形式,调用该方法会引起页面重绘。默认值为LayoutAlgorithm#NARROW_COLUMNS。
- setNeedInitialFocus(boolean flag):通知WebView是否需要设置一个节点获取焦点当WebView#requestFocus(int,android.graphics.Rect)被调用时,默认为true。
- setAppCacheEnabled(boolean flag):启用或禁用应用缓存。
- setAppCachePath(String appCachePath):设置应用缓存路径,这个路径必须是可以让app写入文件的。该方法应该只被调用一次,重复调用会被无视~
- setCacheMode(int mode):用来设置WebView的缓存模式。当我们加载页面或从上一个页面返回的时候,会按照设置的缓存模式去检查并使用(或不使用)缓存。
缓存模式有四种:
1. LOAD_DEFAULT:默认的缓存使用模式。在进行页面前进或后退的操作时,如果缓存可用并未过期就优先加载缓存,否则从网络上加载数据。这样可以减少页面的网络请求次数。
2. LOAD_CACHE_ELSE_NETWORK:只要缓存可用就加载缓存,哪怕它们已经过期失效。如果缓存不可用就从网络上加载数据。
3. LOAD_NO_CACHE:不加载缓存,只从网络加载数据。
4. LOAD_CACHE_ONLY:不从网络加载数据,只从缓存加载数据。
通常我们可以根据网络情况将这几种模式结合使用,比如有网的时候使用LOAD_DEFAULT,离线时使用
5. LOAD_CACHE_ONLY、LOAD_CACHE_ELSE_NETWORK,让用户不至于在离线时啥都看不到。
- setDatabaseEnabled(boolean flag):启用或禁用数据库缓存。
- setDomStorageEnabled(boolean flag):启用或禁用DOM缓存。
- setUserAgentString(String ua):设置WebView的UserAgent值。
- setDefaultEncodingName(String encoding):设置编码格式,通常都设为“UTF-8”。
- setStandardFontFamily(String font):设置标准的字体族,默认“sans-serif”。
- setCursiveFontFamily:设置草书字体族,默认“cursive”。
- setFantasyFontFamily:设置CursiveFont字体族,默认“cursive”。
- setFixedFontFamily:设置混合字体族,默认“monospace”。
- setSansSerifFontFamily:设置梵文字体族,默认“sans-serif”。
- setSerifFontFamily:设置衬线字体族,默认“sans-serif”
- setDefaultFixedFontSize(int size):设置默认填充字体大小,默认16,取值区间为[1-72],超过范围,使用其上限值。
- setDefaultFontSize(int size):设置默认字体大小,默认16,取值区间[1-72],超过范围,使用其上限值。
- setMinimumFontSize:设置最小字体,默认8. 取值区间[1-72],超过范围,使用其上限值。
- setMinimumLogicalFontSize:设置最小逻辑字体,默认8. 取值区间[1-72],超过范围,使用其上限值。
以上就是一些WebSettings的常用方法,具体的使用以及一些缓存的问题会在接下来的代码以及文章中有更加直观的说明
WebViewClient
从名字上不难理解,这个类就像WebView的委托人一样,是帮助WebView处理各种通知和请求事件的,我们可以称他为WebView的“内政大臣”。
- onLoadResource(WebView view, String url):该方法在加载页面资源时会回调,每一个资源(比如图片)的加载都会调用一次。
- onPageStarted(WebView view, String url, Bitmap favicon):该方法在WebView开始加载页面且仅在Main frame loading(即整页加载)时回调,一次Main frame的加载只会回调该方法一次。我们可以在这个方法里设定开启一个加载的动画,告诉用户程序在等待网络的响应。
- onPageFinished(WebView view, String url):该方法只在WebView完成一个页面加载时调用一次(同样也只在Main frame loading时调用),我们可以可以在此时关闭加载动画,进行其他操作。
- onReceivedError(WebView view, WebResourceRequest request, WebResourceError error):该方法在web页面加载错误时回调,这些错误通常都是由无法与服务器正常连接引起的,最常见的就是网络问题。 这个方法有两个地方需要注意:
1.这个方法只在与服务器无法正常连接时调用,类似于服务器返回错误码的那种错误(即HTTP ERROR),该方法是不会回调的,因为你已经和服务器正常连接上了(全怪官方文档(︶^︶));
2.这个方法是新版本的onReceivedError()方法,从API23开始引进,与旧方法onReceivedError(WebView view,int errorCode,String description,String failingUrl)不同的是,新方法在页面局部加载发生错误时也会被调用(比如页面里两个子Tab或者一张图片)。这就意味着该方法的调用频率可能会更加频繁,所以我们应该在该方法里执行尽量少的操作。
- onReceivedHttpError(WebView view, WebResourceRequest request, WebResourceResponse errorResponse):上一个方法提到onReceivedError并不会在服务器返回错误码时被回调,那么当我们需要捕捉HTTP ERROR并进行相应操作时应该怎么办呢?API23便引入了该方法。当服务器返回一个HTTP ERROR并且它的status code>=400时,该方法便会回调。这个方法的作用域并不局限于Main Frame,任何资源的加载引发HTTP ERROR都会引起该方法的回调,所以我们也应该在该方法里执行尽量少的操作,只进行非常必要的错误处理等。
- onReceivedSslError(WebView view, SslErrorHandler handler, SslError error):当WebView加载某个资源引发SSL错误时会回调该方法,这时WebView要么执行handler.cancel()取消加载,要么执行handler.proceed()方法继续加载(默认为cancel)。需要注意的是,这个决定可能会被保留并在将来再次遇到SSL错误时执行同样的操作。
- WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request):当WebView需要请求某个数据时,这个方法可以拦截该请求来告知app并且允许app本身返回一个数据来替代我们原本要加载的数据。
比如你对web的某个js做了本地缓存,希望在加载该js时不再去请求服务器而是可以直接读取本地缓存的js,这个方法就可以帮助你完成这个需求。你可以写一些逻辑检测这个request,并返回相应的数据,你返回的数据就会被WebView使用,如果你返回null,WebView会继续向服务器请求。
- boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request):哈~ 终于到了这个方法,在最开始的基础演示时我们用到了这个方法。从实践中我们知道,当我们没有给WebView提供WebViewClient时,WebView如果要加载一个url会向ActivityManager寻求一个适合的处理者来加载该url(比如系统自带的浏览器),这通常是我们不想看到的。于是我们需要给WebView提供一个WebViewClient,并重写该方法返回true来告知WebView url的加载就在app中进行。这时便可以实现在app内访问网页。
- onScaleChanged(WebView view, float oldScale, float newScale):当WebView得页面Scale值发生改变时回调。
- boolean shouldOverrideKeyEvent(WebView view, KeyEvent event):默认值为false,重写此方法并return true可以让我们在WebView内处理按键事件。
WebChromeClient
如果说 WebViewClient 是帮助 WebView 处理各种通知、请求事件的“内政大臣”的话,那么WebChromeClient就是辅助WebView处理Javascript的对话框,网站图标,网站title,加载进度等偏外部事件的“外交大臣”。
- onProgressChanged(WebView view, int newProgress):当页面加载的进度发生改变时回调,用来告知主程序当前页面的加载进度。
- onReceivedIcon(WebView view, Bitmap icon):用来接收web页面的icon,我们可以在这里将该页面的icon设置到Toolbar。
- onReceivedTitle(WebView view, String title):用来接收web页面的title,我们可以在这里将页面的title设置到Toolbar。
以下两个方法是为了支持web页面进入全屏模式而存在的(比如播放视频),如果不实现这两个方法,该web上的内容便不能进入全屏模式。 - onShowCustomView(View view, WebChromeClient.CustomViewCallback callback):该方法在当前页面进入全屏模式时回调,主程序必须提供一个包含当前web内容(视频 or Something)的自定义的View。
- onHideCustomView():该方法在当前页面退出全屏模式时回调,主程序应在这时隐藏之前show出来的View。
- Bitmap getDefaultVideoPoster():当我们的Web页面包含视频时,我们可以在HTML里为它设置一个预览图,WebView会在绘制页面时根据它的宽高为它布局。而当我们处于弱网状态下时,我们没有比较快的获取该图片,那WebView绘制页面时的gitWidth()方法就会报出空指针异常~ 于是app就crash了。。
这时我们就需要重写该方法,在我们尚未获取web页面上的video预览图时,给予它一个本地的图片,避免空指针的发生。 - View getVideoLoadingProgressView():重写该方法可以在视频loading时给予一个自定义的View,可以是加载圆环 or something。
- boolean onJsAlert(WebView view, String url, String message, JsResult result):处理Javascript中的Alert对话框。
- boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result):处理Javascript中的Prompt对话框。
- boolean onJsConfirm(WebView view, String url, String message, JsResult result):处理Javascript中的Confirm对话框
- boolean onShowFileChooser(WebView webView, ValueCallback filePathCallback, WebChromeClient.FileChooserParams fileChooserParams):该方法在用户进行了web上某个需要上传文件的操作时回调。我们应该在这里打开一个文件选择器,如果要取消这个请求我们可以调用filePathCallback.onReceiveValue(null)并返回true。
- onPermissionRequest(PermissionRequest request):该方法在web页面请求某个尚未被允许或拒绝的权限时回调,主程序在此时调用grant(String [])或deny()方法。如果该方法没有被重写,则默认拒绝web页面请求的权限。
- onPermissionRequestCanceled(PermissionRequest request):该方法在web权限申请权限被取消时回调,这时应该隐藏任何与之相关的UI界面。
1、设置WebView支持js
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
webView.addJavascriptInterface(new JavaScriptInterface(), "JHAPP");
2、Android调用JS(有2种方法)
- 通过WebView的loadUrl()
必须另开线程进行JS方法调用(否则无法调用)
final String parameter = "{" +
"\"lng\":\"" + shoplng + "\"," +
"\"lat\":\"" + shoplat + "\"," +
"\"addr\":\"" + shopAddr +
"\"}";
webView.post(new Runnable() {
@Override
public void run() {
webView.loadUrl("javascript:setLocation('" + parameter + "')");
}
});
无参无返回值函数
String call = "javascript:readyToGo()";webView.loadUrl(call);
有参无返回值函数
String call = "javascript:alertMessage(\"" + "content" + "\")";webView.loadUrl(call);
- 通过WebView的evaluateJavascript()
优点:该方法比第一种方法效率更高、使用更简洁。
因为该方法的执行不会使页面刷新,而第一种方法(loadUrl )的执行则会。
Android 4.4 后才可使用
有参数有返回值的函数
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
//第一个参数为js中的方法名,该段代码每执行一次则调用js方法一次
webView.evaluateJavascript("setLocation('" + parameter + "')", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
//此处为 js 返回的结果 有返回值时我们可以调用mWebView.evaluateJavascript()方法
}
});
}
特别注意:JS代码调用一定要在 onPageFinished() 回调之后才能调用,否则不会调用。
3、JS去调用Android
private class JavaScriptInterface {
//被JS调用的方法必须加入@JavascriptInterface注解
@JavascriptInterface
public void getLocation() {
Message msg = new Message();
msg.what = GET_LOCATION;
mHandler.sendMessage(msg);
}
}
private void initWebSettings() {
WebSettings settings = mWebView.getSettings();
//支持获取手势焦点
mWebView.requestFocusFromTouch();
//支持JS
settings.setJavaScriptEnabled(true);
//支持插件
settings.setPluginState(WebSettings.PluginState.ON);
//设置适应屏幕
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
//支持缩放
settings.setSupportZoom(false);
//隐藏原生的缩放控件
settings.setDisplayZoomControls(false);
//支持内容重新布局
settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
settings.supportMultipleWindows();
settings.setSupportMultipleWindows(true);
//设置缓存模式
settings.setDomStorageEnabled(true);
settings.setDatabaseEnabled(true);
settings.setCacheMode(WebSettings.LOAD_DEFAULT);
settings.setAppCacheEnabled(true);
settings.setAppCachePath(mWebView.getContext().getCacheDir().getAbsolutePath());
//设置可访问文件
settings.setAllowFileAccess(true);
//当webview调用requestFocus时为webview设置节点
settings.setNeedInitialFocus(true);
//支持自动加载图片
if (Build.VERSION.SDK_INT >= 19) {
settings.setLoadsImagesAutomatically(true);
} else {
settings.setLoadsImagesAutomatically(false);
}
settings.setNeedInitialFocus(true);
//设置编码格式
settings.setDefaultTextEncodingName("UTF-8");
}
private void initWebViewClient() {
mWebView.setWebViewClient(new WebViewClient() {
//页面开始加载时
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
mProgressbar.setVisibility(View.VISIBLE);
}
//页面完成加载时
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
mProgressbar.setVisibility(View.GONE);
}
//是否在WebView内加载新页面
@Override
public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
view.loadUrl(request.toString());
return true;
}
//网络错误时回调的方法
@Override
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
super.onReceivedError(view, request, error);
/**
* 在这里写网络错误时的逻辑,比如显示一个错误页面
*
* 这里我偷个懒不写了
* */
}
@TargetApi(Build.VERSION_CODES.M)
@Override
public void onReceivedHttpError(WebView view, WebResourceRequest request, WebResourceResponse errorResponse) {
super.onReceivedHttpError(view, request, errorResponse);
}
});
}
private void initWebChromeClient() {
mWebView.setWebChromeClient(new WebChromeClient() {
private Bitmap mDefaultVideoPoster;//默认的视频展示图
@Override
public void onReceivedTitle(WebView view, String title) {
super.onReceivedTitle(view, title);
setToolbarTitle(title);
}
@Override
public Bitmap getDefaultVideoPoster() {
if (mDefaultVideoPoster == null) {
mDefaultVideoPoster = BitmapFactory.decodeResource(
getResources(), R.drawable.video_default
);
return mDefaultVideoPoster;
}
return super.getDefaultVideoPoster();
}
});
}
/**
* 设置Toolbar标题
*
* @param title
*/
private void setToolbarTitle(final String title) {
Log.d("setToolbarTitle", " WebDetailActivity " + title);
if (mToolbar != null) {
mToolbar.post(new Runnable() {
@Override
public void run() {
mToolbar.setTitle(TextUtils.isEmpty(title) ? getString(R.string.loading) : title);
}
});
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return super.onCreateOptionsMenu(menu);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.page_up:
Toast.makeText(getApplicationContext(), "页面向上", Toast.LENGTH_SHORT).show();
mWebView.pageUp(true);
break;
case R.id.page_down:
Toast.makeText(getApplicationContext(), "页面向下", Toast.LENGTH_SHORT).show();
mWebView.pageDown(true);
break;
case R.id.refresh:
Toast.makeText(getApplicationContext(), "刷新~", Toast.LENGTH_SHORT).show();
mWebView.reload();
default:
return super.onOptionsItemSelected(item);
}
return super.onOptionsItemSelected(item);
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
//如果按下的是回退键且历史记录里确实还有页面
if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
mWebView.goBack();
return true;
} else {
Toast.makeText(getApplicationContext(), "考试结束,恭喜您考试合格!", Toast.LENGTH_LONG).show();
}
return super.onKeyDown(keyCode, event);
}}