Android WebView开发问题汇总
在native與網(wǎng)頁(yè)相結(jié)合開(kāi)發(fā)的過(guò)程中，難免會(huì)遇到關(guān)于WebView一些共通的問(wèn)題。就我目前開(kāi)發(fā)過(guò)程中遇到的問(wèn)題以及最后得到的優(yōu)化方案都將在這里列舉出來(lái)。有些是老生常談，有些則是個(gè)人摸索得出解決方法。
1.加快HTML網(wǎng)頁(yè)裝載完成的速度
默認(rèn)情況html代碼下載到WebView后，webkit開(kāi)始解析網(wǎng)頁(yè)各個(gè)節(jié)點(diǎn)，發(fā)現(xiàn)有外部樣式文件或者外部腳本文件時(shí)，會(huì)異步發(fā)起網(wǎng)絡(luò)請(qǐng)求下載文件，但如果在這之前也有解析到image節(jié)點(diǎn)，那勢(shì)必也會(huì)發(fā)起網(wǎng)絡(luò)請(qǐng)求下載相應(yīng)的圖片。在網(wǎng)絡(luò)情況較差的情況下，過(guò)多的網(wǎng)絡(luò)請(qǐng)求就會(huì)造成帶寬緊張，影響到css或js文件加載完成的時(shí)間，造成頁(yè)面空白loading過(guò)久。解決的方法就是告訴WebView先不要自動(dòng)加載圖片，等頁(yè)面finish后再發(fā)起圖片加載。
故在WebView初始化時(shí)設(shè)置如下代碼：
[java]?view plaincopy同時(shí)在WebView的WebViewClient實(shí)例中的onPageFinished()方法添加如下代碼：
[java]?view plaincopy
從上面的代碼，可以看出我們對(duì)系統(tǒng)API在19以上的版本作了兼容。因?yàn)?.4以上系統(tǒng)在onPageFinished時(shí)再恢復(fù)圖片加載時(shí),如果存在多張圖片引用的是相同的src時(shí)，會(huì)只有一個(gè)image標(biāo)簽得到加載，因而對(duì)于這樣的系統(tǒng)我們就先直接加載。
2.自定義出錯(cuò)界面
當(dāng)WebView加載頁(yè)面出錯(cuò)時(shí)（一般為404 NOT FOUND），安卓WebView會(huì)默認(rèn)顯示一個(gè)賣(mài)萌的出錯(cuò)界面。但我們?cè)趺茨茏層脩舭l(fā)現(xiàn)原來(lái)我使用的是網(wǎng)頁(yè)應(yīng)用呢，我們期望的是用戶在網(wǎng)頁(yè)上得到是如原生般應(yīng)用的體驗(yàn)，那就先要從干掉這個(gè)默認(rèn)出錯(cuò)頁(yè)面開(kāi)始。當(dāng)WebView加載出錯(cuò)時(shí)，我們會(huì)在WebViewClient實(shí)例中的onReceivedError()方法接收到錯(cuò)誤，我們就在這里做些手腳：
[java]?view plaincopy從上面可以看出，我們先使用loadDataWithBaseURL清除掉默認(rèn)錯(cuò)誤頁(yè)內(nèi)容，再讓我們自定義的View得到顯示（mErrorFrame為蒙在WebView之上的一個(gè)LinearLayout布局，默認(rèn)為View.GONE）。
3.是否存在滾動(dòng)條
當(dāng)我們做類(lèi)似上拉加載下一頁(yè)這樣的功能的時(shí)候，頁(yè)面初始的時(shí)候需要知道當(dāng)前WebView是否存在縱向滾動(dòng)條，如果有則不加載下一頁(yè)，如果沒(méi)有則加載下一頁(yè)直到其出現(xiàn)縱向滾動(dòng)條。首先繼承WebView類(lèi)，在子類(lèi)添加下面的代碼：
[java]?view plaincopycomputeVerticalScrollRange得到的是可滑動(dòng)的最大高度，computeVerticalScrollExtent得到的是滾動(dòng)把手自身的高，當(dāng)不存在滾動(dòng)條時(shí)，兩者的值是相等的。當(dāng)有滾動(dòng)條時(shí)前者一定是大于后者的。
4.是否已滾動(dòng)到頁(yè)面底部
同樣我們?cè)谧錾侠虞d下一頁(yè)這樣的功能時(shí)，也需要知道當(dāng)前頁(yè)面滾動(dòng)條所處的狀態(tài)，如果快到底部，則要發(fā)起網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)更新網(wǎng)頁(yè)。同樣繼承WebView類(lèi)，在子類(lèi)覆蓋onScrollChanged方法，具體如下：
[java]?view plaincopy上面mCurrContentHeight用于記錄上次觸發(fā)時(shí)的網(wǎng)頁(yè)高度，用來(lái)防止在網(wǎng)頁(yè)總高度未發(fā)生變化而目標(biāo)區(qū)域發(fā)生連續(xù)滾動(dòng)時(shí)會(huì)多次觸發(fā)TODO，mThreshold是一個(gè)閾值，當(dāng)頁(yè)面底部距離滾動(dòng)條底部的高度差<=這個(gè)值時(shí)會(huì)觸發(fā)TODO。
5.遠(yuǎn)程網(wǎng)頁(yè)需訪問(wèn)本地資源
當(dāng)我們?cè)赪ebView中加載出從web服務(wù)器上拿取的內(nèi)容時(shí)，是無(wú)法訪問(wèn)本地資源的，如assets目錄下的圖片資源，因?yàn)檫@樣的行為屬于跨域行為（Cross-Domain），而WebView是禁止的。解決這個(gè)問(wèn)題的方案是把html內(nèi)容先下載到本地，然后使用loadDataWithBaseURL加載html。這樣就可以在html中使用?file:///android_asset/xxx.png?的鏈接來(lái)引用包里面assets下的資源了。示例如下：
[java]?view plaincopy上面有幾點(diǎn)需要注意：
- 從網(wǎng)絡(luò)上下載html的過(guò)程應(yīng)放在工作線程中
- html下載成功后渲染出html的步驟應(yīng)放在UI主線程，不然WebView會(huì)報(bào)錯(cuò)
- html下載失敗則可以使用我們前面講述的方法來(lái)顯示自定義錯(cuò)誤界面
完整的demo項(xiàng)目代碼我已放到：http://yunpan.cn/cgQPvJQxxkCBj?（提取碼：6712）。
6.ViewPager里非首屏WebView點(diǎn)擊事件不響應(yīng)
如果你的多個(gè)WebView是放在ViewPager里一個(gè)個(gè)加載出來(lái)的，那么就會(huì)遇到這樣的問(wèn)題。ViewPager首屏WebView的創(chuàng)建是在前臺(tái)，點(diǎn)擊時(shí)沒(méi)有問(wèn)題；而其他非首屏的WebView是在后臺(tái)創(chuàng)建，滑動(dòng)到它后點(diǎn)擊頁(yè)面會(huì)出現(xiàn)如下錯(cuò)誤日志：
20955-20968/xx.xxx.xxx E/webcoreglue﹕ Should not happen: no rect-based-test nodes found
解決這個(gè)問(wèn)題的辦法是繼承WebView類(lèi)，在子類(lèi)覆蓋onTouchEvent方法，填入如下代碼：
[java]?view plaincopy
該方法的最先提出在WebView in ViewPager not receive user inputs。
7.WebView硬件加速導(dǎo)致頁(yè)面渲染閃爍
4.0以上的系統(tǒng)我們開(kāi)啟硬件加速后，WebView渲染頁(yè)面更加快速，拖動(dòng)也更加順滑。但有個(gè)副作用就是，當(dāng)WebView視圖被整體遮住一塊，然后突然恢復(fù)時(shí)（比如使用SlideMenu將WebView從側(cè)邊滑出來(lái)時(shí)），這個(gè)過(guò)渡期會(huì)出現(xiàn)白塊同時(shí)界面閃爍。解決這個(gè)問(wèn)題的方法是在過(guò)渡期前將WebView的硬件加速臨時(shí)關(guān)閉，過(guò)渡期后再開(kāi)啟，代碼如下：
[java]?view plaincopy8.避免addJavaScriptInterface帶來(lái)的安全問(wèn)題
使用開(kāi)源項(xiàng)目Safe Java-JS WebView Bridge可以很好替代addJavaScriptInterface方法，同時(shí)增加了異步回調(diào)等支持，并且不存在了安全風(fēng)險(xiǎn)。
9.WebView與上層父元素的TouchMove事件沖突
在開(kāi)發(fā)過(guò)程中你可能會(huì)遇到這樣一種情況。端里面使用ViewPager嵌套了多個(gè)WebView頁(yè)面，同時(shí)某一個(gè)WebView中的頁(yè)面元素需要響應(yīng)TouchMove事件。詳細(xì)解決方案請(qǐng)移步：http://www.pedant.cn/2014/09/23/webview-touch-conflict
10.清理Cache和歷史記錄
在開(kāi)發(fā)過(guò)程中你可能會(huì)遇到這樣一種情況。端里面使用ViewPager嵌套了多個(gè)WebView頁(yè)面，同時(shí)某一個(gè)WebView中的頁(yè)面元素需要響應(yīng)TouchMove事件。詳細(xì)解決方案請(qǐng)移步：http://www.pedant.cn/2014/09/23/webview-touch-conflict
[java]?view plaincopy
11.WebView Cookies清理
[java]?view plaincopy
12.處理WebView中的非超鏈接請(qǐng)求(如Ajax請(qǐng)求):?
有時(shí)候需要加上請(qǐng)求頭，但是非超鏈接的請(qǐng)求，沒(méi)有辦法再shouldOverrinding中攔截并用webView.loadUrl(String url,HashMap headers)方法添加請(qǐng)求頭目前用了一個(gè)臨時(shí)的辦法解決：
? ? ? 首先需要在url中加特殊標(biāo)記/協(xié)議, 如在onWebViewResource方法中攔截對(duì)應(yīng)的請(qǐng)求，然后將要添加的請(qǐng)求頭，以get形式拼接到url末尾
在shouldInterceptRequest()方法中,可以攔截到所有的網(wǎng)頁(yè)中資源請(qǐng)求，比如加載JS，圖片以及Ajax請(qǐng)求等等
Ex:
13.WebView頁(yè)面中播放了音頻,退出Activity后音頻仍然在播放
需要在Activity的onDestory()中調(diào)用
[java]?view plaincopy
[java]?view plaincopy
如上所示，webview調(diào)用destory時(shí)，webview仍綁定在Activity上。這是由于自定義webview構(gòu)建時(shí)傳入了該Activity的context對(duì)象，因此需要先從父容器中移除webview，然后再銷(xiāo)毀webview：
[java]?view plaincopy
14.WebView長(zhǎng)按自定義菜單,實(shí)現(xiàn)復(fù)制分享相關(guān)功能
這個(gè)功能首先可以從兩方面完成：
? (1) 在js中完成：
? ? 處理Android.selection.longTouch
這里推薦一個(gè)開(kāi)源項(xiàng)目進(jìn)行參考,：
https://github.com/btate/BTAndroidWebViewSelection
???(2) android層處理:
? ? ?首先使用OnTouchListener實(shí)現(xiàn)長(zhǎng)按實(shí)現(xiàn)監(jiān)聽(tīng)，然后實(shí)現(xiàn)WebView的Context menu，最后調(diào)用webview中的emulateShiftHeld()，為了適配安卓不同版本，最好使用反射方式調(diào)用。
總結(jié)
以上是生活随笔為你收集整理的Android WebView开发问题汇总的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Glide使用教程
- 下一篇： Android WebView与js交互