WebView控件最全使用解析

一、WebView 概述
二、WebView使用基础篇
- 2.1添加方式
- 2.2 加载远程网页
- 2.3 加载本地网页
- 2.4 加载HTML片段
- 2.5 WebView 常用方法
三、WebView 进阶篇
- 3.1 WebSettings类
- 3.2 WebViewClient类
- - 常见方法
  - 使用案例
- 3.3 WebChromeClient类
- - 常用方法
  - 使用案例
  - 测试网页

一、WebView 概述

Android WebView控件是一个可以用来显示Web 网页的控件
Android的Webview在4.4之前采用了不webkit内核，4.4后直接使用了Chrome内核。
WebView继承自 AbsoluteLayout,继承关系如下：

二、WebView使用基础篇

2.1添加方式

在Manifest文件中添加访问权限

<!--    访问网络权限--><uses-permission android:name="android.permission.INTERNET" /><uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /><!--    访问sd卡需要添加的权限--><uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /><uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

并在application节点下添加 android:usesCleartextTraffic="true"

在布局文件里添加一个WebView控件

<WebViewandroid:id="@+id/webview"android:layout_width="match_parent"android:layout_height="match_parent" />

2.2 加载远程网页

WebView webView = findViewById(R.id.webview);
webView.loadUrl("http://csdn.net");

2.3 加载本地网页

首先创建一个普通的html网页

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebView Study</title>
</head>
<body><h1>这是H1</h1><h2>这是H2</h2><div>content</div>
</body>
</html>

把上面的html网页添加到Android工程的assert目录或者sd卡中

WebView webView =   findViewById(R.id.webview);
//加载本地assets目录下的网页
webView.loadUrl("file:///android_asset/test.html");
// 加载data/data 目录
webView.loadUrl("file:///data/data/包名/files/test.html");
//加载手机本地的html页面  -- 需要申请sd卡动态权限
webView.loadUrl("file://mnt/sdcard/test.html");

加载SD卡的文件需要申请动态权限，动态权限申请方法：Android 动态权限最全解析

2.4 加载HTML片段

String html = "<!DOCTYPE html>\n" +"<html lang=\"en\">\n" +"<head>\n" +"    <meta charset=\"UTF-8\">\n" +"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n" +"    <title>WebView Study</title>\n" +"</head>\n" +"<body>\n" +"    <h1>这是H1</h1>\n" +"    <h2>这是H2</h2>\n" +"    <div>content</div>\n" +"</body>\n" +"</html>";WebView webView = findViewById(R.id.webview);webView.loadData(html, "text/html", "UTF-8");

效果如下：

2.5 WebView 常用方法

清除缓存

//清除网页访问留下的缓存
//由于内核缓存是全局的因此这个方法不仅仅针对webview而是针对整个应用程序.
Webview.clearCache(true);//清除当前webview访问的历史记录
//只会webview访问历史记录里的所有记录除了当前访问记录
Webview.clearHistory()；//这个api仅仅清除自动完成填充的表单数据，并不会清除WebView存储到本地的数据
Webview.clearFormData()；

WebView 中网页的前进 / 后退

webView.goBack();//跳到上个页面
webView.goForward();//跳到下个页面
webView.canGoBack();//是否可以跳到上一页(如果返回false,说明已经是第一页)
webView.canGoForward();//是否可以跳到下一页(如果返回false,说明已经是最后一页)//以当前的index为起始点前进或者后退到历史记录中指定的steps
//如果steps为负数则为后退，正数则为前进
Webview.goBackOrForward(intsteps)
//重新加载当前请求
Webview.reload()

本地网页跳转

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebView Study</title>
</head>
<body>
<h1>这是H1</h1>
<h2>这是H2</h2>
<div>content</div>
<a href="file:///android_asset/test1.html">页面跳转1</a>
</body>
</html>

解决跳转用默认浏览器打开的问题

webView.setWebViewClient(new WebViewClient(){@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {view.loadUrl(url);// 强制在当前 WebView 中加载 urlreturn true;}});

三、WebView 进阶篇

3.1 WebSettings类

 WebSettings webSettings = webView.getSettings();//如果访问的页面中要与Javascript交互，则webview必须设置支持JavascriptwebSettings.setJavaScriptEnabled(true);
//设置自适应屏幕webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小webSettings.setLoadWithOverviewMode(false); // 缩放至屏幕的大小//缩放操作
webSettings.setSupportZoom(false); //支持缩放，默认为true。是下面那个的前提。
webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false，则该WebView不可缩放
webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件//其他细节操作
//缓存模式如下：
//LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据//LOAD_DEFAULT: （默认）根据cache-control决定是否从网络上取数据。//LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.//LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //webview缓存设置
webSettings.setAllowFileAccess(true); //设置可以访问本地文件
webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口
webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片
webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式
webSettings.setDatabaseEnabled(true)://是否开启数据库缓存

3.2 WebViewClient类

该类作用：处理各种通知 & 请求事件

常见方法

onPageStarted(WebView view, String url, Bitmap favicon):WebView 开始加载页面时回调，一次Frame加载对应一次回调。
onLoadResource(WebView view, String url):WebView 加载页面资源时会回调，每一个资源产生的一次网络加载，除非本地有当前 url 对应有缓存，否则就会加载。
shouldInterceptRequest(WebView view, String url):WebView 可以拦截某一次的 request 来返回我们自己加载的数据，这个方法在后面缓存会有很大作用。
shouldOverrideUrlLoading(WebView view, String url):是否在 WebView 内加载页面。
onReceivedSslError(WebView view, SslErrorHandler handler, SslError error):WebView ssl 访问证书出错，handler.cancel()取消加载，handler.proceed()对然错误也继续加载。
onPageFinished(WebView view, String url):WebView 完成加载页面时回调，一次Frame加载对应一次回调。
onReceivedError(WebView view, int errorCode, String description, String failingUrl):WebView 访问 url 出错。

使用案例

webView.setWebViewClient(new WebViewClient() {// 作用：开始载入页面调用的，我们可以设定一个loading的页面，告诉用户程序在等待网络响应@Overridepublic void onPageStarted(WebView view, String url, Bitmap favicon) {super.onPageStarted(view, url, favicon);Log.d("MainActivity", "开始加载");}//作用：在页面加载结束时调用。我们可以关闭loading 条，切换程序动作。@Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);Log.d("MainActivity", "加载结束");}// 链接跳转都会走这个方法@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {Log.d("MainActivity", "Url：" + url);view.loadUrl(url);// 强制在当前 WebView 中加载 urlreturn true;}//作用：在加载页面资源时会调用，每一个资源（比如图片）的加载都会调用一次。@Overridepublic void onLoadResource(WebView view, String url) {//设定加载资源的操作}//作用：加载页面的服务器出现错误时（如404）调用。@Overridepublic void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {switch (errorCode) {case 404:view.loadUrl("file:///android_assets/error_handle.html");break;}}//作用：处理https请求//webView默认是不处理https请求的，页面显示空白，需要进行如下设置：@Overridepublic void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {handler.proceed();    //表示等待证书响应// handler.cancel();      //表示挂起连接，为默认方式// handler.handleMessage(null);    //可做其他处理}});

3.3 WebChromeClient类

该类作用：辅助 WebView 处理 Javascript 的对话框,网站图标,网站标题等。

常用方法

onConsoleMessage(String message, int lineNumber,String sourceID):输出Web 端日志。
onProgressChanged(WebView view, int newProgress):当前 WebView
加载网页进度。
onJsPrompt(WebView view, String url, String message, String
defaultValue, JsPromptResult result):处理 JS 中的 Prompt对话框
onJsAlert(WebView view, String url, String message, JsResult result):
Js 中调用 alert() 函数，产生的对话框。
onReceivedTitle(WebView view, String title):接收web页面的 Title。
onReceivedIcon(WebView view, Bitmap icon):接收web页面的icon。

使用案例

 webView.setWebChromeClient(new WebChromeClient(){//作用：获得网页的加载进度并显示@Overridepublic void onProgressChanged(WebView view, int newProgress) {Log.d("MainActivity","newProgress："+ newProgress );super.onProgressChanged(view, newProgress);}//作用：输出Web 端日志@Overridepublic boolean onConsoleMessage(ConsoleMessage consoleMessage) {Log.d("MainActivity","consoleMessage："+ consoleMessage.message() );return super.onConsoleMessage(consoleMessage);}//作用：获取Web页中的标题@Overridepublic void onReceivedTitle(WebView view, String title) {super.onReceivedTitle(view, title);Log.d("MainActivity","标题："+ title);}//作用：获取Web页中的图标@Overridepublic void onReceivedIcon(WebView view, Bitmap icon) {super.onReceivedIcon(view, icon);}//作用：获取Web页中 Js中调用alert()函数，产生的对话框@Overridepublic boolean onJsAlert(WebView view, String url, String message, final JsResult result) {Log.d("MainActivity","onJsAlert："+ message);return super.onJsAlert(view, url, message, result);}@Overridepublic boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {Log.d("MainActivity","onJsPrompt："+ message);return super.onJsPrompt(view, url, message, defaultValue, result);}@Overridepublic boolean onJsConfirm(WebView view, String url, String message, JsResult result) {Log.d("MainActivity","onJsConfirm："+ message);return super.onJsConfirm(view, url, message, result);}});

测试网页

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebView Study</title><script>function clickPrompt() {prompt("prompt");}function clickAlert() {alert("alert");}function clicConfirm() {confirm("Confirm");}</script>
</head><body>
<button type="button" onclick="clickPrompt()">Prompt调用</button>
<button type="button" onclick="clickAlert()">Alert调用</button>
<button type="button" onclick="clicConfirm()">Confirm调用</button>
</body></html>

【Android】WebView控件最全使用解析相关推荐

android ratingbar不可点击,Android评分控件RatingBar使用实例解析
无论游戏,应用,网站,都少不了评分控件.在Android SDK 中提供了 RatingBar控件来实现相应的工作. 标签有几个常用评分相关属性 android:numStars,指定评分五角星数. ...
Android WebView控件
前言 WebView主要用来显示网页,采用Webkit内核. 1. 访问网页添加权限 <uses-permission android:name="android.permissio ...
android webview控件的缩放问题隐藏缩放控件
利用java的反射机制 public void setZoomControlGone(View view) { Class classType; Field field; try { classTyp ...
系出名门Android(7) - 控件(View)之ZoomControls, Include, VideoView, WebView, RatingBar, Tab
[索引页] [×××] 系出名门Android(7) - 控件(View)之ZoomControls, Include, VideoView, WebView, RatingBar, Tab, Spi ...
android开发中WebView控件的实例与注意要点——个人主页浏览器简易实现
转自:http://itindex.net/detail/53169- ... 80%E5%8F%91-webview 在Android开发中往往需要实现网页的浏览,webview就是android开 ...
Android的WebView控件载入网页显示速度慢的究极解决方案
Android的WebView控件载入网页显示速度慢的究极解决方案 [转载来源自http://hi.baidu.com/goldchocobo/] Android客户端中混搭HTML页面,会出现虽然H ...
Android使用webview控件加载本地html，通过Js与后台Java实现数据的传递
1.在布局文件中加WebView控件,在java中获取WebView对象. 2.加载本地html文件. webView.loadUrl("file:///android_asset/andr ...
Android Native APP开发笔记：使用WebView控件加载网页
文章目录目的基础使用处理网页导航加载本地网页 Web和Native之间交互调试Web应用处理页面重绘总结目的 WebView是一个比较常用的控件,功能上也比较单一,就是用来加载网页的, ...
android的webview控件载入网页显示速度慢的究极解决方案,【转】Android的WebView控件载入网页显示速度慢的究极解决方案...
Android客户端中混搭HTML页面,会出现虽然HTML内容载入完成,标题也正常显示,但是整个网页需要等到近秒(甚至更多)时间才会显示出来.研究了很久,搜遍了国外很多网站,也看过PhoneGap的代 ...

【Android】WebView控件最全使用解析

WebView控件最全使用解析

一、WebView 概述

二、WebView使用基础篇

2.1添加方式

2.2 加载远程网页

2.3 加载本地网页

2.4 加载HTML片段

2.5 WebView 常用方法

三、WebView 进阶篇

3.1 WebSettings类

3.2 WebViewClient类

常见方法

使用案例

3.3 WebChromeClient类

常用方法

使用案例

测试网页

【Android】WebView控件最全使用解析相关推荐

最新文章

热门文章