Android Webview使用和遇到過(guò)的坑總結(jié)
正文
WebView 用來(lái)顯示網(wǎng)頁(yè)的一個(gè)View，它使用WebKit渲染引擎顯示web頁(yè)面，可以加載在線的或者本地的html頁(yè)面，WebView可以對(duì)頁(yè)面進(jìn)行一系列操作，如歷史頁(yè)面的向前、向后，放大和縮小，執(zhí)行文本搜索，與JS交互等等;
在使用Webview時(shí)，請(qǐng)記得在AndroidManifest.xml文件中聲明INTERNET權(quán)限：
- <uses-permission android:name="android.permission.INTERNET" />
默認(rèn)情況下，WebView不支持JavaScript，web頁(yè)面的錯(cuò)誤也會(huì)被忽略，如果只是用Webview來(lái)顯示網(wǎng)頁(yè)而不用交互，默認(rèn)配置就可以了，如果需要交互，就需要自定義配置了。
WebView初始化及加載URL
1、通過(guò)XML初始化：
- <WebView
- android:id="@+id/webview"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"/>
或者直接New：
- WebView webview = new WebView(this);
2、加載URL：
- WebView myWebView = (WebView) findViewById(R.id.webview);
- myWebView.loadUrl("http://www.example.com");
或者可以直接加載Html：
- String summary = "<html><body>You scored <b>192</b> points.</body></html>";
- myWebView.loadData(summary, "text/html", null);
如果在加載URL的時(shí)候想添加Header信息，可以復(fù)寫(xiě)loadUrl()方法，如：
- @Override public void loadUrl(String url) {
- Map<String, String> map = new HashMap<String, String>();
- map.put("ajax", "true");
- map.put("appversion", SharedPreferencesUtil.getAppVersion(getContext())); map.put("clientid", SharedPreferencesUtil.getClientId(getContext()));
- loadUrl(url, map);
- }
WebSettings
WebSettings 中可以對(duì)WebView進(jìn)行一系列配置，如：
- WebSettings settings = getSettings(); //默認(rèn)是false 設(shè)置true允許和js交互
- settings.setJavaScriptEnabled(true); // WebSettings.LOAD_DEFAULT 如果本地緩存可用且沒(méi)有過(guò)期則使用本地緩存，否加載網(wǎng)絡(luò)數(shù)據(jù) 默認(rèn)值
- // WebSettings.LOAD_CACHE_ELSE_NETWORK 優(yōu)先加載本地緩存數(shù)據(jù)，無(wú)論緩存是否過(guò)期
- // WebSettings.LOAD_NO_CACHE 只加載網(wǎng)絡(luò)數(shù)據(jù)，不加載本地緩存
- // WebSettings.LOAD_CACHE_ONLY 只加載緩存數(shù)據(jù)，不加載網(wǎng)絡(luò)數(shù)據(jù)
- //Tips:有網(wǎng)絡(luò)可以使用LOAD_DEFAULT 沒(méi)有網(wǎng)時(shí)用LOAD_CACHE_ELSE_NETWORK
- settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //開(kāi)啟 DOM storage API 功能 較大存儲(chǔ)空間，使用簡(jiǎn)單
- settings.setDomStorageEnabled(true); //設(shè)置數(shù)據(jù)庫(kù)緩存路徑 存儲(chǔ)管理復(fù)雜數(shù)據(jù) 方便對(duì)數(shù)據(jù)進(jìn)行增加、刪除、修改、查詢(xún) 不推薦使用
- settings.setDatabaseEnabled(true); final String dbPath = context.getApplicationContext().getDir("db", Context.MODE_PRIVATE).getPath();
- settings.setDatabasePath(dbPath); //開(kāi)啟 Application Caches 功能 方便構(gòu)建離線APP 不推薦使用
- settings.setAppCacheEnabled(true); final String cachePath = context.getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();
- settings.setAppCachePath(cachePath);
- settings.setAppCacheMaxSize(5 * 1024 * 1024);
Webview中可以設(shè)置的幾種緩存對(duì)比：
WebviewClient
WebCromeClient常用方法：
1、shouldOverrideUrlLoading(WebView view, String url)
在API 24以后過(guò)時(shí)，當(dāng)一個(gè)url即將被webview加載時(shí)，給Application一個(gè)機(jī)會(huì)來(lái)接管處理這個(gè)url，方法返回true代表Application自己處理url;返回false代表Webview處理url。
舉個(gè)例子，項(xiàng)目中需要處理傳過(guò)來(lái)的URL是一個(gè)事件還是一個(gè)HTTP鏈接，可以通過(guò)自定義協(xié)議頭 (nativeapi://) 來(lái)過(guò)濾，如：
- @Override
- public boolean shouldOverrideUrlLoading(WebView view, String url) {
- Uri uri = Uri.parse(url);
- String scheme = uri.getScheme();
- if (TextUtils.isEmpty(scheme)) return true;
- if (scheme.equals("nativeapi")) {
- //如定義nativeapi://showImg是用來(lái)查看大圖，這里添加查看大圖邏輯
- return true;
- } else if (scheme.equals("http") || scheme.equals("https")) {
- //處理http協(xié)議
- if (Uri.parse(url).getHost().equals("www.example.com")) {
- // 內(nèi)部網(wǎng)址，不攔截，用自己的webview加載
- return false;
- } else {
- //跳轉(zhuǎn)外部瀏覽器
- Intent intent = new Intent(Intent.ACTION_VIEW, uri);
- context.startActivity(intent);
- return true;
- }
- } return super.shouldOverrideUrlLoading(view, url);
- }
注：如果使用的是Post請(qǐng)求方式，則此方法不會(huì)被回調(diào)
2、shouldOverrideUrlLoading(WebView view, WebResourceRequest request)
在API 24以后新加的，使用同上。
3、shouldInterceptRequest(WebView view, String url)
在API 21以后過(guò)時(shí)，通知Application加載資源的請(qǐng)求并返回請(qǐng)求的資源，如果返回值是Null，Webview仍然會(huì)按正常加載資源;否則返回的數(shù)據(jù)將會(huì)被使用。
注：回調(diào)發(fā)生在子線程中,不能直接進(jìn)行UI操作
4、shouldInterceptRequest(WebView view, WebResourceRequest request)
在API 21以后新加，使用同上。
5、onPageStarted(WebView view, String url, Bitmap favicon)
通知Application頁(yè)面已經(jīng)開(kāi)始加載資源，頁(yè)面加載過(guò)程中，onPageStarted至多會(huì)被執(zhí)行一次。
6、onPageFinished(WebView view, String url)
通知Application頁(yè)面已經(jīng)加載完畢。
7、onReceivedError(WebView view, int errorCode, String description, String failingUrl)
通知Application有錯(cuò)誤發(fā)生，這些錯(cuò)誤是不可恢復(fù)的(即主要的資源不可用)。errorCode參數(shù)對(duì)應(yīng)于一個(gè)ERROR_ *常量
WebCromeClient
1、onProgressChanged(WebView view, int newProgress)
通知Application的加載進(jìn)度，newProgress取值范圍[0,100]，可以通過(guò)這個(gè)方法來(lái)編寫(xiě)一個(gè)帶加載進(jìn)度條的Webview，具體例子請(qǐng)參考：Android 編寫(xiě)一個(gè)帶進(jìn)度條的Webview
2、onReceivedTitle(WebView view, String title)
當(dāng)加載頁(yè)面標(biāo)題有改變時(shí)會(huì)通知Application，title即為新標(biāo)題。
控制Webview加載歷史網(wǎng)頁(yè)
WebView重寫(xiě)URL加載時(shí),它會(huì)自動(dòng)累積的歷史訪問(wèn)的web頁(yè)面?？梢酝ㄟ^(guò)向后goBack()和向前goForward()。
舉例，可以在Activity中的回退鍵控制向后回退到前一個(gè)頁(yè)面：
- @Override
- public boolean onKeyDown(int keyCode, KeyEvent event) {
- // Check if the key event was the Back button and if there's history
- if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) {
- webview.goBack();
- return true;
- } // If it wasn't the Back key or there's no web page history, bubble up to the default
- // system behavior (probably exit the activity)
- return super.onKeyDown(keyCode, event);
- }
Webview和Js交互
1、Js調(diào)用Android接口：
- public class WebAppInterface {
- Context mContext;
- /** Instantiate the interface and set the context */
- WebAppInterface(Context c) {
- mContext = c;
- } /** Show a toast from the web page */
- @JavascriptInterface
- public void showToast(String toast) {
- Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
- }
- }
SDK>=17(Android4.2)以上，必須添加@JavascriptInterface聲明，然后通過(guò) addJavascriptInterface() 方式供Js調(diào)用，如：
- webView.addJavascriptInterface(new WebAppInterface(this), "android");
通過(guò)上面的配置，就可以在Js中調(diào)用了：
- <input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
- <script type="text/javascript">
- function showAndroidToast(toast) {
- //調(diào)用Android中的showToast方法
- Android.showToast(toast);
- }</script>
2、Android調(diào)用Js的接口：
可以通過(guò)webview.loadUrl("javascript:JsMethod()")方式加載Js接口，如果有參數(shù)，直接加到JsMethod()里面即可，下面封裝了兩個(gè)方法，分別是加載帶參數(shù)和不帶參數(shù)的Js函數(shù)：
- /**
- * 加載帶參數(shù)的JS函數(shù)
- *
- * @param JsName JS函數(shù)名
- * @param params 不定參數(shù)
- */
- public void loadJSWithParam(String JsName, String... params) {
- String TotalParam = "";
- for (int i = 0; i < params.length; i++) {
- if (i == params.length - 1) {
- //***一個(gè)
- TotalParam += (params[i]);
- } else {
- TotalParam += (params[i] + "','");
- }
- } this.loadUrl("javascript:" + JsName + "('" + TotalParam + "')");
- } /**
- * 加載不帶參數(shù)的JS函數(shù)
- *
- * @param JsName JS函數(shù)名
- */
- public void loadJS(String JsName) {
- this.loadUrl("javascript:" + JsName + "()");
- }
Webview的一些優(yōu)化和遇到的坑
1、Webview打開(kāi)一個(gè)鏈接，播放一段音樂(lè)，退出Activity時(shí)音樂(lè)還在后臺(tái)播放，可以通過(guò)在Activity的onPause中調(diào)用webview.onPause()解決，并在Activity的onResume中調(diào)用webview.onResume()恢復(fù)，如下：
- @Override
- protected void onPause() {
- h5_webview.onPause();
- h5_webview.pauseTimers();
- super.onPause();
- } @Override
- protected void onResume() {
- h5_webview.onResume();
- h5_webview.resumeTimers();
- super.onResume();
- }
Webview的onPause()方法官網(wǎng)是這么解釋的：
Does a best-effort attempt to pause any processing that can be paused safely, such as animations and geolocation. Note that this call does not pause JavaScript. To pause JavaScript globally, use pauseTimers(). To resume WebView, call onResume().
通知內(nèi)核嘗試停止所有處理，如動(dòng)畫(huà)和地理位置，但是不能停止Js，如果想全局停止Js，可以調(diào)用pauseTimers()全局停止Js，調(diào)用onResume()恢復(fù)。
2、5.0 以后的WebView加載的鏈接為Https開(kāi)頭，但是鏈接里面的內(nèi)容，比如圖片為Http鏈接，這時(shí)候，圖片就會(huì)加載不出來(lái)，解決方法：
- if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
- webSetting.setMixedContentMode(webSetting.getMixedContentMode());
- }
原因是5.0之后不支持Https和Http的混合模式，具體可參看：Android5.0 WebView中Http和Https混合問(wèn)題
3、WebView與JavaScript相互調(diào)用時(shí)，如果是debug沒(méi)有配置混淆時(shí)，調(diào)用時(shí)沒(méi)問(wèn)題的，但是當(dāng)設(shè)置混淆后發(fā)現(xiàn)無(wú)法正常調(diào)用了，解決方法：
在proguard-rules.pro文件中配置：
- -keepattributes *Annotation*
- -keepattributes *JavascriptInterface*
- -keep public class org.mq.study.webview.DemoJavaScriptInterface{
- public <methods>;
- }
如果是內(nèi)部類(lèi)：
- -keepattributes *Annotation*
- -keepattributes *JavascriptInterface*
- -keep public class org.mq.study.webview.webview.DemoJavaScriptInterface$InnerClass{
- public <methods>;
- }
