Android WebView 相关知识

一、WebView基础使用

WebView是安卓中用来显示html文本内容的的控件，对html5也有很好的支持，ios的控件UIWebView差不多。

使用WebView并不需要开通网络权限

网上有文章说webview需要开通internet权限，否则会出Web page not available错误，这是不对的，出现Web page not available并不是因为使用了webview，而是webview访问了网络，如果webview只是加载本地html（比如assets目录中的文件），或者只是加载带有html文本的字符串，即使没有internet权限，也不会报错。

如何调用webview
xml中

[java]<WebView
android:id="@+id/blog_detail_webview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"/>[/java]

activity中

[java]mWebView = (WebView)findViewById(R.id.blog_detail_webview);
mWebView.getSettings().setJavaScriptEnabled(false);
mWebView.getSettings().setSupportZoom(false);
mWebView.getSettings().setBuiltInZoomControls(false);
mWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
mWebView.getSettings().setDefaultFontSize(18);[/java]

基本设置

上面的java代码部分相信大家都懂，可以看到WebView 和其他控件不同的地方在于其属性设置是调用mWebView.getSettings()来完成的，不知道谷歌这样设计的用意，其中：

[java]mWebView.getSettings().setJavaScriptEnabled(false);[/java]

表示不支持js，如果想让java和js交互或者本身希望js完成一定的功能请把false改为true。

[java]mWebView.getSettings().setSupportZoom(false);[/java]

设置是否支持缩放，我这里为false，默认为true。

[java]mWebView.getSettings().setBuiltInZoomControls(false);[/java]

设置是否显示缩放工具，默认为false。

[java]mWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);[/java]

一般很少会用到这个，用WebView组件显示普通网页时一般会出现横向滚动条，这样会导致页面查看起来非常不方便。LayoutAlgorithm是一个枚举，用来控制html的布局，总共有三种类型：
NORMAL：正常显示，没有渲染变化。
SINGLE_COLUMN：把所有内容放到WebView组件等宽的一列中。
NARROW_COLUMNS：可能的话，使所有列的宽度不超过屏幕宽度。

[java]
mWebView.getSettings().setDefaultFontSize(18);[/java]

设置默认的字体大小，默认为16，有效值区间在1-72之间。

加载内容

（1）加载assets目录下的本地网页

一般我们都是把html文件放在assets目录下， WebView调用assets目录下的本地网页和图片等资源非常方便，使用形如

[java]mWebView.loadUrl("file:///android_asset/html/test1.html");[/java]

的调用方法即可。

（2）加载远程网页

[java]mWebView.loadUrl("http://www.google.com");[/java]

（3）使用 LoadData 或者 loadDataWithBaseURL方法加载内容

有时候我们的webview可能只是html片段，而不是一个完整的网页，事实上绝大多数时候都是如此，完整的网页无需做成应用，而直接在浏览器访问。

这种情况我们使用 LoadData 或者 loadDataWithBaseURL方法，后者用的最多：

[java]
void loadDataWithBaseURL (String baseUrl, String data, String mimeType, String encoding, String historyUrl)

loadDataWithBaseURL()比loadData()多两个参数，可以指定HTML代码片段中相关资源的相对根路径，也可以指定历史Url，其余三个参数相同。[/java]

这里主要注意参数baseUrl，baseUrl指定了你的data参数中数据是以什么地址为基准的，因为data中的数据可能会有超链接或者是image元素，而很多网站的地址都是用的相对路径，如果没有baseUrl，webview将访问不到这些资源。

举个例子：

[java]
String body ="示例：这里有个img标签，地址是相对路径<img src=’/uploads/allimg/130923/1FP02V7-0.png’ />";
mWebView.loadDataWithBaseURL("http://www.jcodecraeer.com", body, "text/html", "utf-8",null);[/java]

如果baseUrl没有指定为http://www.jcodecraeer.com，那么这张图片将显示不出来。

上面的例子其实演示了loadDataWithBaseURL的用法，我们直接加载一个字符串里面的html内容，而有些时候这些内容是从assets目录下的本地网页文件中读取，下面我们将html/test1.html中的内容通过LoadData来加载：

[java]

String data = "";
try {
// 读取assets目录下的文件需要用到AssetManager对象的Open方法打开文件
InputStream is = getAssets().open("html/test2.html");
// loadData()方法需要的是一个字符串数据所以我们需要把文件转成字符串
ByteArrayBuffer baf = new ByteArrayBuffer(500);
int count = 0;
while ((count = is.read()) != -1) {
baf.append(count);
}
data = EncodingUtils.getString(baf.toByteArray(), "utf-8");
} catch (IOException e) {
e.printStackTrace();
}[/java]

// 下面两种方法都可以加载成功
mWebView.loadData(data, “text/html”, “utf-8”);
// wv.loadDataWithBaseURL(“”, data, “text/html”, “utf-8”, “”);
这种通过读取文件再用loadData加载其实和mWebView.loadUrl(“file:///android_asset/html/test1.html”)是一致的，只不过loadData方式因为没有指定地址的基准url，html/test1.html文件中一些资源文件或者链接地址会失效。

loadDataWithBaseURL和loadData两个方法加载的HTML代码片段的不同点在于，loadData()中的html data中不能包含’#’, ‘%’, ‘\’, ‘?’四中特殊字符，在平时测试时，你的数据时，你的数据里含有这些字符，但不会出问题，当出问题时，你可以替换下。
%，会报找不到页面错误，页面全是乱码。乱码样式见符件。

#，会让你的goBack失效，但canGoBAck是可以使用的。于是就会产生返回按钮生效，但不能返回的情况。

WebView内容的处理

android 中webView控件 padding不起作用
在一个布局文件中有一个WebView，想使用padding属性让左右向内留出一些空白，但是padding属性不起左右，内容照样贴边显示，反而移动了右边滚动条的位置。android的bug，用一个外围的layout包含webview，可以有所改进，但不能完全解决。其实正确的做法是在webView的加载的css中增加padding,没必要为了padding而更改xml布局文件。

重写shouldOverrideUrlLoading时指定url

指定只有url里包含eoe.cn的时候才在webview里打开，否则还是启动浏览器打开.

[java]
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
LogUtil.i(this, "url=" url);
if ( url.contains("eoe.cn") == true){
view.loadUrl(url);
return true;
}else{
Intent in = new Intent (Intent.ACTION_VIEW , Uri.parse(url));
startActivity(in);
return true;
}
}
[/java]

android:scrollbarStyle控制滚动条位置

WebView有一个设置滚动条位置的属性：android:scrollbarStyle 可以是insideOverlay可以是outsideOverlay，两个的区别是SCROLLBARS_INSIDE_OVERLAY的样式是滚动条在整个page里，类似css中的padding，看代码下的这个图吧，很清晰.

[java]mWebView.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY);
mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);[/java]

二、WebView和JavaScrip交互

分两种情况
1、js中调用android中代码
2、android中调用js代码

第一种情况js调用android代码关键步骤:

Android程序:
第一步设置webview的javascript代码可用
mWebView.getSettings().setJavaScriptEnabled(true);

第二步 实现交互接口

[java]interface MyJavaScriptInterface {
void nativeMethod();
}
MyJavaScriptInterface myJavaScriptInterface = new MyJavaScriptInterface() {
@Override
public void nativeMethod() {
Toast.makeText(WebViewActivity.this,"对话框",Toast.LENGTH_SHORT).show();
}

};
[/java]

第三步 添加交互接口实例到webview（关键）

[java]/**
* WebView.addJavascriptInterface(Object,String)方法
* Object 交互接口对象
* String 交互接口名称
*/
mWebView.addJavascriptInterface(myJavaScriptInterface, "MyJavaScriptInterface");[/java]

html页面代码实例 ：

[java]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>表单</title>
<script>
//window:浏览器窗口对象
//MyJavaScriptInterface：js与原生android应用交互的接口名
//showToast: js与原生android应用交互的接口的方法名
function toNativeFunction()
{
window.MyJavaScriptInterface.nativeMethod();
}

</script>
</head>

<body>
<button onclick="toNativeFunction()">执行跳转</button>
</body>
</html>[/java]

第二种情况Android调用js代码

mWebView.loadUrl(“javascript:testByNative()”);
html页面实现javascript方法testByNative

[java] <script>
function testByNative(){
window.location.href = "https://ai.zhousir.top"; //跳转到指定url
}

</script>[/java]

三、WebView页面加载效果

[java] public void setWebVieClient(){
mWebView.setWebViewClient(new WebViewClient(){
/**
* 请求的url嵌入webview显示
*/
@Override
public boolean shouldOverrideUrlLoading(WebView webview, String url) {
webview.loadUrl(url);
return true;
}

/**
* 加载web页面调用
* @param view
* @param url
* @param favicon
*/
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
mLoadTxt.setText("正在加载中…..");
}

/**
* web页面加载完成调用
* @param view
* @param url
*/
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
mLoadTxt.setText("加载完成");
}

});

mWebView.setWebChromeClient(new WebChromeClient(){
/**
* web页面加载进度转变调用
* @param view
* @param newProgress
*/
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
Logs.e("onProgressChanged :"+newProgress);
mLoadingSeekBar.setProgress(newProgress);
}
});

}[/java]

[java]@Override
/**
*嵌入网页回退操作
*/
public boolean onKeyDown(int keyCode, KeyEvent event) {
if(keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) {
mWebView.goBack();// 返回前一个页面
return true;
}
return super.onKeyDown(keyCode, event);
}[/java]

四、WebView缓存相关

当我们加载Html时候，会在我们data/应用package下生成database与cache两个文件夹:
我们请求的Url记录是保存在webviewCache.db里，而url的内容是保存在webviewCache文件夹下.
WebView中存在着两种缓存：网页数据缓存（存储打开过的页面及资源）、H5缓存（即AppCache）。

一、网页缓存

1、缓存构成
/data/data/package_name/cache/
/data/data/package_name/database/webview.db
/data/data/package_name/database/webviewCache.db

综合可以得知 webview 会将我们浏览过的网页url已经网页文件(css、图片、js等)保存到数据库表中

缓存模式(5种)
LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据
LOAD_DEFAULT: 根据cache-control决定是否从网络上取数据。
LOAD_CACHE_NORMAL: API level 17中已经废弃, 从API level 11开始作用同LOAD_DEFAULT模式
LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.
LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。
如：www.taobao.com的cache-control为no-cache，在模式LOAD_DEFAULT下，无论如何都会从网络上取数据，如果没有网络，就会出现错误页面；在LOAD_CACHE_ELSE_NETWORK模式下，无论是否有网络，只要本地有缓存，都使用缓存。本地没有缓存时才从网络上获取。
www.360.com.cn的cache-control为max-age=60，在两种模式下都使用本地缓存数据。

总结：根据以上两种模式，建议缓存策略为，判断是否有网络，有的话，使用LOAD_DEFAULT，无网络时，使用LOAD_CACHE_ELSE_NETWORK。

[java] mWebView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT); // 设置 缓存模式
// 开启 DOM storage API 功能
mWebView.getSettings().setDomStorageEnabled(true);
// 开启 database storage API 功能
mWebView.getSettings().setDatabaseEnabled(true);
String cacheDirPath = getFilesDir().getAbsolutePath()+ APP_CACAHE_DIRNAME;
// String cacheDirPath = getCacheDir().getAbsolutePath()+Constant.APP_DB_DIRNAME;
Log.i(TAG, "cacheDirPath=" + cacheDirPath);
// 设置数据库缓存路径
mWebView.getSettings().setDatabasePath(cacheDirPath);
// 设置 Application Caches 缓存目录
mWebView.getSettings().setAppCachePath(cacheDirPath);
// 开启 Application Caches 功能
mWebView.getSettings().setAppCacheEnabled(true);[/java]

清除WebView缓存

[java] public void clearWebViewCache() {

// 清理Webview缓存数据库
try {
deleteDatabase("webview.db");
deleteDatabase("webviewCache.db");
} catch (Exception e) {
e.printStackTrace();
}

// WebView 缓存文件
File appCacheDir = new File(getFilesDir().getAbsolutePath()
+ APP_CACAHE_DIRNAME);
Log.e(TAG, "appCacheDir path=" + appCacheDir.getAbsolutePath());

File webviewCacheDir = new File(getCacheDir().getAbsolutePath()
+ "/webviewCache");
Log.e(TAG, "webviewCacheDir path=" + webviewCacheDir.getAbsolutePath());

// 删除webview 缓存目录
if (webviewCacheDir.exists()) {
deleteFile(webviewCacheDir);
}
// 删除webview 缓存 缓存目录
if (appCacheDir.exists()) {
deleteFile(appCacheDir);
}
}

/**
* 递归删除 文件/文件夹
*
* @param file
*/
public void deleteFile(File file) {

Log.i(TAG, "delete file path=" + file.getAbsolutePath());

if (file.exists()) {
if (file.isFile()) {
file.delete();
} else if (file.isDirectory()) {
File files[] = file.listFiles();
for (int i = 0; i < files.length; i++) {
deleteFile(files[i]);
}
}
file.delete();
} else {
Log.e(TAG, "delete file no exists " + file.getAbsolutePath());
}
}
[/java]

五、通过WebView自带的缓存功能来实现离线阅读

转载请注明来源：Android WebView 相关知识

本文链接地址：https://ai.zhousir.top/?p=1640