Android WebView使用常見問題以及解決方案（高級）-有解無憂

總結下WebView的一些使用方法

提醒：我們在使用WebView是最好不要把WebView寫在xml中，直接用如下動態加載WebView方法更優

WebView webView = new WebView();
frameLayout.addView(webView);//動態加載

1.打開網頁時呼叫系統瀏覽器，而沒有在本WebView中顯示，我們可以呼叫mWebView的setWebViewClient在本WebView中顯示，

mWebView.setWebViewClient(new WebViewClient(){
      @Override
      public boolean shouldOverrideUrlLoading(WebView view, String url) {
          view.loadUrl(url);
          return true;
      }
  });

2. 通過java代碼呼叫javascript

WebSettings webSettings =   mWebView .getSettings();       
webSettings.setJavaScriptEnabled(true); 
mWebView.addJavascriptInterface(new Object() {       
            public void clickOnAndroid() {       
                mHandler.post(new Runnable() {       
                    public void run() {       
                        webview.loadUrl("javascript:wave()");       
                    }       
                });       
            }       
        }, "demo");

3. 按回傳鍵時，不退出程式而是回傳上一瀏覽頁面，

public boolean onKeyDown(int keyCode, KeyEvent event) {       
        if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {       
            mWebView.goBack();       
            return true;       
        }       
        return super.onKeyDown(keyCode, event);       
    }

4. 便頁面支持縮放，

WebSettings webSettings =   mWebView .getSettings();       
webSettings.setJavaScriptEnabled(true);  
webSettings.setBuiltInZoomControls(true);
webSettings.setSupportZoom(true);

5. 打開頁面時，自適應螢屏，
Android4.4(API 版本 19) 提供了一個基于 Chromium 版本的新版本 WebView，不再是webkit了，所以在對websettings的設定中我們需要多添加如下設定：

WebSettings webSettings =   mWebView .getSettings();       
webSettings.setUseWideViewPort(true);//設定此屬性，可任意比例縮放
webSettings.setLoadWithOverviewMode(true);

6.如果webView中需要用戶手動輸入用戶名、密碼或其他，則webview必須設定支持獲取手勢焦點，

webview.requestFocusFromTouch();

 //添加后WebView獲取焦點，可輸入文本
 selectWebView.requestFocus();
 selectWebView.setFocusable(true);
 selectWebView.setFocusableInTouchMode(true);

7.WebView 加載界面主要呼叫三個方法：LoadUrl、LoadData、LoadDataWithBaseURL. ，

LoadUrl            直接加載網頁、圖片并顯示.（本地或是網路上的網頁、圖片、gif）  
LoadData           顯示文字與圖片內容 （模擬器1.5、1.6）  
LoadDataWithBase  顯示文字與圖片內容（支持多個模擬器版本）

8.WebSettings 的常用方法介紹

setJavaScriptEnabled(true);  //支持js

setPluginsEnabled(true);  //支持插件 

setUseWideViewPort(false);  //將圖片調整到適合webview的大小 

setSupportZoom(true);  //支持縮放 

setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); //支持內容重新布局 

supportMultipleWindows();  //多視窗 

setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);  //關閉webview中快取 

setAllowFileAccess(true);  //設定可以訪問檔案 

setNeedInitialFocus(true); //當webview呼叫requestFocus時為webview設定節點

webview webSettings.setBuiltInZoomControls(true); //設定支持縮放 

setJavaScriptCanOpenWindowsAutomatically(true); //支持通過JS打開新視窗 

setLoadWithOverviewMode(true); // 縮放至螢屏的大小

setLoadsImagesAutomatically(true);  //支持自動加載圖片

setRenderPriority(RenderPriority.HIGHT);  //設定提高渲染的優先級

setMediaPlaybackRequiresUserGesture(boolean require); //設定WebView是否通過手勢觸發播放媒體，默認是true，需要手勢觸發，

##特別說明：如果是跳轉百度網頁，因baidu.com對這個屬性進行了攔截，這里在有的情況，不能設定為true，使用默認就好
setSupportMultipleWindows(true);//設定WebView是否支持多屏視窗，參考WebChromeClient#onCreateWindow，默認false，不支持，

下面再新增進行編號處理：

101:setStandardFontFamily(String font)

設定WebView標準字體庫字體，默認字體“sans-serif”，

getSettings.setStandardFontFamily("sans-serif");

102:setFixedFontFamily(String font)

設定WebView固定的字體庫字體，默認“monospace”，

getSettings.setFixedFontFamily("monospace");

103:setSansSerifFontFamily(String font)

設定WebView Sans SeriFontFamily字體庫字體，默認“sans-serif”，

getSettings.setSansSerifFontFamily("sans-serif");

104、setSerifFontFamily(String font)

設定WebView seri FontFamily字體庫字體，默認“sans-serif”，

getSettings.setSansSerifFontFamily("sans-serif");

105、setCursiveFontFamily(String font)

設定WebView字體庫字體，默認“cursive”

getSettings.setCursiveFontFamily("cursive");


106、setFantasyFontFamily(String font)

設定WebView字體庫字體，默認“fantasy”，

getSettings.setFantasyFontFamily("fantasy");

107、setMinimumFontSize(int size)

設定WebView字體最小值，默認值8，取值1到72

getSettings.setMinimumFontSize(8);

108、setMinimumLogicalFontSize(int size)

設定WebView邏輯上最小字體值，默認值8，取值1到72

getSettings.setMinimumLogicalFontSize(8);

109、setDefaultFontSize(int size)

設定WebView默認值字體值，默認值16，取值1到72

getSettings.setDefaultFontSize(16);

110、setDefaultFixedFontSize(int size)

設定WebView默認固定的字體值，默認值16，取值1到72

getSettings.setDefaultFixedFontSize(16);

111、setGeolocationEnabled(boolean flag)

設定是否開啟定位功能，默認true，開啟定位

getSettings.setGeolocationEnabled(false);

112、setJavaScriptCanOpenWindowsAutomatically(boolean flag)

設定腳本是否允許自動打開彈窗，默認false，不允許

113、setAllowContentAccess (boolean allow)
是否允許在WebView中訪問內容URL（Content Url），默認允許，內容Url訪問允許WebView從安裝在系統中的內容提供者載入內容，

9.WebViewClient 的方法全解

doUpdateVisitedHistory(WebView view, String url, boolean isReload)  //(更新歷史記錄) 

onFormResubmission(WebView view, Message dontResend, Message resend) //(應用程式重新請求網頁資料) 

onLoadResource(WebView view, String url) // 在加載頁面資源時會呼叫，每一個資源（比如圖片）的加載都會呼叫一次， 

onPageStarted(WebView view, String url, Bitmap favicon) //這個事件就是開始載入頁面呼叫的，通常我們可以在這設定一個loading的頁面，告訴用戶程式在等待網路回應，
 
onPageFinished(WebView view, String url) //在頁面加載結束時呼叫，同樣道理，我們知道一個頁面載入完成，于是我們可以關閉loading 條，切換程式動作， 

onReceivedError(WebView view, int errorCode, String description, String failingUrl)// (報告錯誤資訊) 

onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host,String realm)//（獲取回傳資訊授權請求） 

onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) //重寫此方法可以讓webview處理https請求，

onScaleChanged(WebView view, float oldScale, float newScale) // (WebView發生改變時呼叫) 

onUnhandledKeyEvent(WebView view, KeyEvent event) //（Key事件未被加載時呼叫）
 
shouldOverrideKeyEvent(WebView view, KeyEvent event)//重寫此方法才能夠處理在瀏覽器中的按鍵事件， 

shouldOverrideUrlLoading(WebView view, String url) 
//在點擊請求的是鏈接是才會呼叫，重寫此方法回傳true表明點擊網頁里面的鏈接還是在當前的webview里跳轉，不跳到瀏覽器那邊，這個函式我們可以做很多操作，比如我們讀取到某些特殊的URL，于是就可以不打開地址，取消這個操作，進行預先定義的其他操作，這對一個程式是非常必要的，

shouldOverrideUrlLoading()這個方法便是 android WebView使用方法 js互動（進階），這一部分主要會講解Java ,Js互動，

10.WebSettings 的補充方法介紹（保證篇幅不至于看得眼花繚亂，在第8點為常用）

設定自適應螢屏，兩者合用
setUseWideViewPort(true);  //將圖片調整到適合webview的大小 
setLoadWithOverviewMode(true); // 縮放至螢屏的大小

setSupportZoom(true);  //支持縮放，默認為true，是下面那個的前提，
setBuiltInZoomControls(true); //設定內置的縮放控制元件，
//若上面是false，則該WebView不可縮放，這個不管設定什么都不能縮放，

setDisplayZoomControls(false); //隱藏原生的縮放控制元件

setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); //支持內容重新布局  
supportMultipleWindows();  //多視窗 
setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);  //關閉webview中快取 
setAllowFileAccess(true);  //設定可以訪問檔案 
setNeedInitialFocus(true); //當webview呼叫requestFocus時為webview設定節點
setJavaScriptCanOpenWindowsAutomatically(true); //支持通過JS打開新視窗 
setLoadsImagesAutomatically(true);  //支持自動加載圖片
setDefaultTextEncodingName("utf-8");//設定編碼格式

關于快取

快取模式

LOAD_CACHE_ONLY: 不使用網路，只讀取本地快取資料
LOAD_DEFAULT: （默認）根據cache-control決定是否從網路上取資料，
LOAD_NO_CACHE: 不使用快取，只從網路獲取資料.
LOAD_CACHE_ELSE_NETWORK，只要本地有，無論是否過期，或者no-cache，都使用快取中的資料，

結合使用（離線加載）：

if (NetStatusUtil.isConnected(getApplicationContext())) {
    webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);//根據cache-control決定是否從網路上取資料，
} else {
    webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);//沒網，則從本地獲取，即離線加載
}

webSettings.setDomStorageEnabled(true); // 開啟 DOM storage API 功能
webSettings.setDatabaseEnabled(true);   //開啟 database storage API 功能
webSettings.setAppCacheEnabled(true);//開啟 Application Caches 功能

String cacheDirPath = getFilesDir().getAbsolutePath() + APP_CACAHE_DIRNAME;
webSettings.setAppCachePath(cacheDirPath); //設定  Application Caches 快取目錄

注意： 每個 Application 只呼叫一次 WebSettings.setAppCachePath()，WebSettings.setAppCacheMaxSize()

WebViewClient

WebViewClient就是幫助WebView處理各種通知、請求事件的，
打開網頁時不呼叫系統瀏覽器，而是在本WebView中顯示：

mWebView.setWebViewClient(new WebViewClient(){
      @Override
      public boolean shouldOverrideUrlLoading(WebView view, String url) {
          view.loadUrl(url);
      return true;
      }
  });

WebViewClient方法

WebViewClient mWebViewClient = new WebViewClient()
{
    shouldOverrideUrlLoading(WebView view, String url)  最常用的，比如上面的，
    //在網頁上的所有加載都經過這個方法,這個函式我們可以做很多操作，
    //比如獲取url，查看url.contains(“add”)，進行添加操作

    shouldOverrideKeyEvent(WebView view, KeyEvent event)
    //重寫此方法才能夠處理在瀏覽器中的按鍵事件， 

    onPageStarted(WebView view, String url, Bitmap favicon) 
    //這個事件就是開始載入頁面呼叫的，我們可以設定一個loading的頁面，告訴用戶程式在等待網路回應， 

    onPageFinished(WebView view, String url)
    //在頁面加載結束時呼叫，同樣道理，我們可以關閉loading 條，切換程式動作， 

    onl oadResource(WebView view, String url) 
    // 在加載頁面資源時會呼叫，每一個資源（比如圖片）的加載都會呼叫一次， 

    onReceivedError(WebView view, int errorCode, String description, String failingUrl)
    // (報告錯誤資訊) 

    doUpdateVisitedHistory(WebView view, String url, boolean isReload)  
    //(更新歷史記錄) 

    onFormResubmission(WebView view, Message dontResend, Message resend) 
    //(應用程式重新請求網頁資料) 

    onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host,String realm)
    //（獲取回傳資訊授權請求） 

    onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) 
    //重寫此方法可以讓webview處理https請求，

    onScaleChanged(WebView view, float oldScale, float newScale) 
    // (WebView發生改變時呼叫) 

    onUnhandledKeyEvent(WebView view, KeyEvent event) 
    //（Key事件未被加載時呼叫） 
}

將上面定義的WebViewClient設定給WebView：

 webView.setWebViewClient(mWebViewClient);

WebChromeClient

WebChromeClient是輔助WebView處理Javascript的對話框，網站圖示，網站title，加載進度等 :
方法中的代碼都是由Android端自己處理，

WebChromeClient mWebChromeClient = new WebChromeClient() {


    //獲得網頁的加載進度，顯示在右上角的TextView控制元件中
    @Override
    public void onProgressChanged(WebView view, int newProgress) {
        if (newProgress < 100) {
            String progress = newProgress + "%";
        } else {
        }
    }

    //獲取Web頁中的title用來設定自己界面中的title
    //當加載出錯的時候，比如無網路，這時onReceiveTitle中獲取的標題為 找不到該網頁,
    //因此建議當觸發onReceiveError時，不要使用獲取到的title
    @Override
    public void onReceivedTitle(WebView view, String title) {
        MainActivity.this.setTitle(title);
    }

    @Override
    public void onReceivedIcon(WebView view, Bitmap icon) {
        //
    }

    @Override
    public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) {
        //
        return true;
    }

    @Override
    public void onCloseWindow(WebView window) {
    }

    //處理alert彈出框，html 彈框的一種方式
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
        //
        return true;
    }

    //處理confirm彈出框
    // Js的Prompt實際上就是一個確定彈出框，Android上一般用不上這個功能
    // 我們直接把彈出框這個功能拿來用做互動，當需要互動的時候，就把互動引數作為彈出框內容，然后在Android中攔截了就行了
    // 如果你對HTML不熟悉，就告訴你們的前段：就是js的prompt方法，然后把上面的html給他看看他肯定就知道怎么寫了
    // 這種方式我個人不太喜歡，畢竟把JsPromot給占用了
    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult 
            result) {
        //
        return true;
    }

    //處理prompt彈出框
    @Override
    public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
        //
        return true;
    }
};

同樣，將上面定義的WebChromeClient設定給WebView：

呼叫JS代碼

WebSettings webSettings = mWebView .getSettings(); 
  webSettings.setJavaScriptEnabled(true); 

  mWebView.addJavascriptInterface(new InsertObj(), "jsObj");

上面這是前提！！！
然后實作上面的類，這個類提供了四個方法，注釋的非常清楚，

class InsertObj extends Object {
    //給html提供的方法，js中可以通過：var str = window.jsObj.HtmlcallJava(); 獲取到
    @JavascriptInterface
    public String HtmlcallJava() {
        return "Html call Java";
    }

    //給html提供的有參函式 ： window.jsObj.HtmlcallJava2("IT-homer blog");
    @JavascriptInterface
    public String HtmlcallJava2(final String param) {
        return "Html call Java : " + param;
    }

    //Html給我們提供的函式
    @JavascriptInterface
    public void JavacallHtml() {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                //這里是呼叫方法
                mWebView.loadUrl("javascript: showFromHtml()");
                Toast.makeText(Html5Activity.this, "clickBtn", Toast.LENGTH_SHORT).show();
            }
        });
    }

    //Html給我們提供的有參函式
    @JavascriptInterface
    public void JavacallHtml2(final String param) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                mWebView.loadUrl("javascript: showFromHtml2('IT-homer blog')");
                Toast.makeText(Html5Activity.this, "clickBtn2", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Android 呼叫js有個漏洞：

Android WebView的Js物件注入漏洞，想必大家都理解，也就是Android4.2以前臭名昭著的遠程代碼執行漏洞，但是google在android4.2以后修復了他們，使用@JavaInterface注解的方法

WebView的方法

前進、后退

goBack()//后退
goForward()//前進
goBackOrForward(intsteps) //以當前的index為起始點前進或者后退到歷史記錄中指定的steps， 
                              如果steps為負數則為后退，正數則為前進

canGoForward()//是否可以前進
canGoBack() //是否可以后退

清除快取資料：

clearCache(true);//清除網頁訪問留下的快取，由于內核快取是全域的因此這個方法不僅僅針對webview而是針對整個應用程式.
clearHistory()//清除當前webview訪問的歷史記錄，只會webview訪問歷史記錄里的所有記錄除了當前訪問記錄.
clearFormData()//這個api僅僅清除自動完成填充的表單資料，并不會清除WebView存盤到本地的資料，

WebView的狀態：

onResume() //激活WebView為活躍狀態，能正常執行網頁的回應
onPause()//當頁面被失去焦點被切換到后臺不可見狀態，需要執行onPause動過， onPause動作通知內核暫停所有的動作，比如DOM的決議、plugin的執行、JavaScript執行，

pauseTimers()//當應用程式被切換到后臺我們使用了webview， 這個方法不僅僅針對當前的webview而是全域的全應用程式的webview，它會暫停所有webview的layout，parsing，javascripttimer，降低CPU功耗，
resumeTimers()//恢復pauseTimers時的動作，

destroy()//銷毀，關閉了Activity時，音樂或視頻，還在播放，就必須銷毀，

但是注意：
webview呼叫destory時,webview仍系結在Activity上.這是由于自定義webview構建時傳入了該Activity的context物件,因此需要先從父容器中移除webview,然后再銷毀webview:

 rootLayout.removeView(webView);
  webView.destroy();

判斷WebView是否已經滾動到頁面底端或者頂端:
getScrollY() //方法回傳的是當前可見區域的頂端距整個頁面頂端的距離,也就是當前內容滾動的距離.
getHeight()或者getBottom() //方法都回傳當前WebView這個容器的高度
getContentHeight()回傳的是整個html的高度,但并不等同于當前整個頁面的高度,因為WebView有縮放功能,所以當前整個頁面的高度實際上應該是原始html的高度再乘上縮放比例.因此,更正后的結果,準確的判斷方法應該是：

   if (webView.getContentHeight() * webView.getScale() == (webView.getHeight() + webView.getScrollY())) {
        //已經處于底端
    }

    if(webView.getScrollY() == 0){
        //處于頂端
    }

避免WebView記憶體泄露的一些方式

1.可以將 Webview 的 Activity 新起一個行程，結束的時候直接System.exit(0);退出當前行程；
啟動新行程，主要代碼： AndroidManifest.xml 組態檔代碼如下

   <activity
        android:name=".ui.activity.Html5Activity"
        android:process=":lyl.boon.process.web">
        <intent-filter>
            <action android:name="com.lyl.boon.ui.activity.htmlactivity"/>
            <category android:name="android.intent.category.DEFAULT"/>
        </intent-filter>
    </activity>

在新行程中啟動 Activity ，里面傳了一個 Url：

   Intent intent = new Intent("com.lyl.boon.ui.activity.htmlactivity");
    Bundle bundle = new Bundle();
    bundle.putString("url", gankDataEntity.getUrl());
    intent.putExtra("bundle",bundle);
    startActivity(intent);

然后在 Html5Activity 的onDestory() 最后加上 System.exit(0); 殺死當前行程，

2.不能在xml中定義 Webview ，而是在需要的時候創建，并且Context使用 getApplicationgContext()，如下代碼：

       LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        mWebView = new WebView(getApplicationContext());
        mWebView.setLayoutParams(params);
        mLayout.addView(mWebView);

3.在 Activity 銷毀的時候，可以先讓 WebView 加載null內容，然后移除 WebView，再銷毀 WebView，最后置空，
代碼如下：

   @Override
    protected void onDestroy() {
        if (mWebView != null) {
            mWebView.loadDataWithBaseURL(null, "", "text/html", "utf-8", null);
            mWebView.clearHistory();

            ((ViewGroup) mWebView.getParent()).removeView(mWebView);
            mWebView.destroy();
            mWebView = null;
        }
        super.onDestroy();
    }

回傳鍵

回傳上一次瀏覽的頁面

public boolean onKeyDown(int keyCode, KeyEvent event) {       
    if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {       
        mWebView.goBack();       
        return true;       
    }       
    return super.onKeyDown(keyCode, event);       
}

參考作者主頁：zhihu.com/people/qydq

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/112388.html

標籤：其他

上一篇：按鍵精靈移動端系列 - IOS(蘋果版)安裝1.3.8 deb

下一篇：Android四大組件之Activity啟動流程原始碼實作詳解(一)