WebView研究

我們在native與網頁相結合開發的過程中，難免會遇到關于WebView一些共通的問題。就我目前開發過程中遇到的問題以及最后得到的優化方案都將在這里列舉出來。有些是老生常談，有些則是個人摸索得出解決方法。下面就是整理得到的些干貨。

1.加快HTML網頁裝載完成的速度

默認情況html代碼下載到WebView后，webkit開始解析網頁各個節點，發現有外部樣式文件或者外部腳本文件時，會異步發起網絡請求下載文件，但如果在這之前也有解析到p_w_picpath節點，那勢必也會發起網絡請求下載相應的圖片。在網絡情況較差的情況下，過多的網絡請求就會造成帶寬緊張，影響到css或js文件加載完成的時間，造成頁面空白loading過久。解決的方法就是告訴WebView先不要自動加載圖片，等頁面finish后再發起圖片加載。

故在WebView初始化時設置如下代碼：
public void int () {
    if(Build.VERSION.SDK_INT >= 19) {
        webView.getSettings().setLoadsImagesAutomatically(true);
    } else {
        webView.getSettings().setLoadsImagesAutomatically(false);
    }
}
 

同時在WebView的WebViewClient實例中的onPageFinished()方法添加如下代碼：
@Override
public void onPageFinished(WebView view, String url) {
    if(!webView.getSettings().getLoadsImagesAutomatically()) {
        webView.getSettings().setLoadsImagesAutomatically(true);
    }
}
 

從上面的代碼，可以看出我們對系統API在19以上的版本作了兼容。因為4.4以上系統在onPageFinished時再恢復圖片加載時,如果存在多張圖片引用的是相同的src時，會只有一個p_w_picpath標簽得到加載，因而對于這樣的系統我們就先直接加載。

2.自定義出錯界面

當WebView加載頁面出錯時（一般為404 NOT FOUND），安卓WebView會默認顯示一個賣萌的出錯界面。但我們怎么能讓用戶發現原來我使用的是網頁應用呢，我們期望的是用戶在網頁上得到是如原生般應用的體驗，那就先要從干掉這個默認出錯頁面開始。當WebView加載出錯時，我們會在WebViewClient實例中的onReceivedError()方法接收到錯誤，我們就在這里做些手腳：
@Override
public void onReceivedError (WebView view, int errorCode, String description, String failingUrl) {
    super.onReceivedError(view, errorCode, description, failingUrl);
    loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
    mErrorFrame.setVisibility(View.VISIBLE);
}
 

從上面可以看出，我們先使用loadDataWithBaseURL清除掉默認錯誤頁內容，再讓我們自定義的View得到顯示（mErrorFrame為蒙在WebView之上的一個LinearLayout布局，默認為View.GONE）。

3.是否存在滾動條

當我們做類似上拉加載下一頁這樣的功能的時候，頁面初始的時候需要知道當前WebView是否存在縱向滾動條，如果有則不加載下一頁，如果沒有則加載下一頁直到其出現縱向滾動條。首先繼承WebView類，在子類添加下面的代碼：
public boolean existVerticalScrollbar () {
    return computeVerticalScrollRange() > computeVerticalScrollExtent();
}
 

computeVerticalScrollRange得到的是可滑動的最大高度，computeVerticalScrollExtent得到的是滾動把手自身的高，當不存在滾動條時，兩者的值是相等的。當有滾動條時前者一定是大于后者的。

4.是否已滾動到頁面底部

同樣我們在做上拉加載下一頁這樣的功能時，也需要知道當前頁面滾動條所處的狀態，如果快到底部，則要發起網絡請求數據更新網頁。同樣繼承WebView類，在子類覆蓋onScrollChanged方法，具體如下：
@Override
protected void onScrollChanged(int newX, int newY, int oldX, int oldY) {
    super.onScrollChanged(newX, newY, oldX, oldY);
    if (newY != oldY) {
        float contentHeight = getContentHeight() * getScale();
        // 當前內容高度下從未觸發過, 瀏覽器存在滾動條且滑動到將抵底部位置
        if (mCurrContentHeight != contentHeight && newY > 0 && contentHeight <= newY + getHeight() + mThreshold) {
            // TODO Something...
            mCurrContentHeight = contentHeight;
        }
    }
}
 

上面mCurrContentHeight用于記錄上次觸發時的網頁高度，用來防止在網頁總高度未發生變化而目標區域發生連續滾動時會多次觸發TODO，mThreshold是一個閾值，當頁面底部距離滾動條底部的高度差<=這個值時會觸發TODO。

5.遠程網頁需訪問本地資源

當我們在WebView中加載出從web服務器上拿取的內容時，是無法訪問本地資源的，如assets目錄下的圖片資源，因為這樣的行為屬于跨域行為（Cross-Domain），而WebView是禁止的。解決這個問題的方案是把html內容先下載到本地，然后使用loadDataWithBaseURL加載html。這樣就可以在html中使用 file:///android_asset/xxx.png 的鏈接來引用包里面assets下的資源了。示例如下：
private void loadWithAccessLocal(final String htmlUrl) {
    new Thread(new Runnable() {
        public void run() {
            try {
                final String htmlStr = NetService.fetchHtml(htmlUrl);
                if (htmlStr != null) {
                    TaskExecutor.runTaskOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            loadDataWithBaseURL(htmlUrl, htmlStr, "text/html", "UTF-8", "");
                        }
                    });
                    return;
                }
            } catch (Exception e) {
                Log.e("Exception:" + e.getMessage());
            }

            TaskExecutor.runTaskOnUiThread(new Runnable() {
                @Override
                public void run() {
                    onPageLoadedError(-1, "fetch html failed");
                }
            });
        }
    }).start();
}
 

上面有幾點需要注意：
從網絡上下載html的過程應放在工作線程中
html下載成功后渲染出html的步驟應放在UI主線程，不然WebView會報錯
html下載失敗則可以使用我們前面講述的方法來顯示自定義錯誤界面

完整的demo項目代碼我已放到：http://yunpan.cn/cgQPvJQxxkCBj （提取碼：6712）。

6.ViewPager里非首屏WebView點擊事件不響應

如果你的多個WebView是放在ViewPager里一個個加載出來的，那么就會遇到這樣的問題。ViewPager首屏WebView的創建是在前臺，點擊時沒有問題；而其他非首屏的WebView是在后臺創建，滑動到它后點擊頁面會出現如下錯誤日志：

 

20955-20968/xx.xxx.xxx E/webcoreglue﹕ Should not happen: no rect-based-test nodes found

解決這個問題的辦法是繼承WebView類，在子類覆蓋onTouchEvent方法，填入如下代碼：
@Override
public boolean onTouchEvent(MotionEvent ev) {
    if (ev.getAction() == MotionEvent.ACTION_DOWN) {
        onScrollChanged(getScrollX(), getScrollY(), getScrollX(), getScrollY());
    }
    return super.onTouchEvent(ev);
}
 

7.WebView硬件加速導致頁面渲染閃爍

4.0以上的系統我們開啟硬件加速后，WebView渲染頁面更加快速，拖動也更加順滑。但有個副作用就是，當WebView視圖被整體遮住一塊，然后突然恢復時（比如使用SlideMenu將WebView從側邊滑出來時），這個過渡期會出現白塊同時界面閃爍。解決這個問題的方法是在過渡期前將WebView的硬件加速臨時關閉，過渡期后再開啟，代碼如下：
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
    webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
 

.避免addJavaScriptInterface帶來的安全問題

使用開源項目Safe Java-JS WebView Bridge可以很好替代addJavaScriptInterface方法，同時增加了異步回調等支持，并且不存在了安全風險。

9.WebView與上層父元素的TouchMove事件沖突

在開發過程中你可能會遇到這樣一種情況。端里面使用ViewPager嵌套了多個WebView頁面，同時某一個WebView中的頁面元素需要響應TouchMove事件。