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中
<WebView android:id="@+id/blog_detail_webview" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#FFFFFF"/>
activity中
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代码部分相信大家都懂,可以看到WebView 和其他控件不同的地方在于其属性设置是调用mWebView.getSettings()来完成的,不知道谷歌这样设计的用意,其中:
mWebView.getSettings().setJavaScriptEnabled(false);
表示不支持js,如果想让java和js交互或者本身希望js完成一定的功能请把false改为true。
mWebView.getSettings().setSupportZoom(false);
设置是否支持缩放,我这里为false,默认为true。
mWebView.getSettings().setBuiltInZoomControls(false);
设置是否显示缩放工具,默认为false。
mWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
一般很少会用到这个,用WebView组件显示普通网页时一般会出现横向滚动条,这样会导致页面查看起来非常不方便。LayoutAlgorithm是一个枚举,用来控制html的布局,总共有三种类型:
NORMAL:正常显示,没有渲染变化。
SINGLE_COLUMN:把所有内容放到WebView组件等宽的一列中。
NARROW_COLUMNS:可能的话,使所有列的宽度不超过屏幕宽度。
mWebView.getSettings().setDefaultFontSize(18);
设置默认的字体大小,默认为16,有效值区间在1-72之间。
加载内容
(1)加载assets目录下的本地网页
一般我们都是把html文件放在assets目录下, WebView调用assets目录下的本地网页和图片等资源非常方便,使用形如
mWebView.loadUrl("file:///android_asset/html/test1.html");
的调用方法即可。
(2)加载远程网页
mWebView.loadUrl("http://www.google.com");
(3)使用 LoadData 或者 loadDataWithBaseURL方法加载内容
有时候我们的webview可能只是html片段,而不是一个完整的网页,事实上绝大多数时候都是如此,完整的网页无需做成应用,而直接在浏览器访问。
这种情况我们使用 LoadData 或者 loadDataWithBaseURL方法,后者用的最多:
void loadDataWithBaseURL (String baseUrl, String data, String mimeType, String encoding, String historyUrl) loadDataWithBaseURL()比loadData()多两个参数,可以指定HTML代码片段中相关资源的相对根路径,也可以指定历史Url,其余三个参数相同。
这里主要注意参数baseUrl,baseUrl指定了你的data参数中数据是以什么地址为基准的,因为data中的数据可能会有超链接或者是image元素,而很多网站的地址都是用的相对路径,如果没有baseUrl,webview将访问不到这些资源。
举个例子:
String body ="示例:这里有个img标签,地址是相对路径<img src='/uploads/allimg/130923/1FP02V7-0.png' />"; mWebView.loadDataWithBaseURL("http://www.jcodecraeer.com", body, "text/html", "utf-8",null);
如果baseUrl没有指定为http://www.jcodecraeer.com,那么这张图片将显示不出来。
上面的例子其实演示了loadDataWithBaseURL的用法,我们直接加载一个字符串里面的html内容,而有些时候这些内容是从assets目录下的本地网页文件中读取,下面我们将html/test1.html中的内容通过LoadData来加载:
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(); }
// 下面两种方法都可以加载成功
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里打开,否则还是启动浏览器打开.
@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; } }
android:scrollbarStyle控制滚动条位置
WebView有一个设置滚动条位置的属性:android:scrollbarStyle 可以是insideOverlay可以是outsideOverlay,两个的区别是SCROLLBARS_INSIDE_OVERLAY的样式是滚动条在整个page里,类似css中的padding,看代码下的这个图吧,很清晰.
mWebView.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY); mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
二、WebView和JavaScrip交互
分两种情况
1、js中调用android中代码
2、android中调用js代码
第一种情况js调用android代码关键步骤:
Android程序:
第一步设置webview的javascript代码可用
mWebView.getSettings().setJavaScriptEnabled(true);
第二步 实现交互接口
interface MyJavaScriptInterface { void nativeMethod(); } MyJavaScriptInterface myJavaScriptInterface = new MyJavaScriptInterface() { @Override public void nativeMethod() { Toast.makeText(WebViewActivity.this,"对话框",Toast.LENGTH_SHORT).show(); } };
第三步 添加交互接口实例到webview(关键)
/** * WebView.addJavascriptInterface(Object,String)方法 * Object 交互接口对象 * String 交互接口名称 */ mWebView.addJavascriptInterface(myJavaScriptInterface, "MyJavaScriptInterface");
html页面代码实例 :
<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>
第二种情况Android调用js代码
mWebView.loadUrl(“javascript:testByNative()”);
html页面实现javascript方法testByNative
<script> function testByNative(){ window.location.href = "http://www.yuguoxy.com/geekhome"; //跳转到指定url } </script>
三、WebView页面加载效果
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); } }); }
@Override /** *嵌入网页回退操作 */ public boolean onKeyDown(int keyCode, KeyEvent event) { if(keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) { mWebView.goBack();// 返回前一个页面 return true; } return super.onKeyDown(keyCode, event); }
四、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。
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);
清除WebView缓存
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()); } }
五、通过WebView自带的缓存功能来实现离线阅读
转载请注明来源:Android WebView 相关知识