揭開WebView的神祕面紗系列（一）之WebView簡介

時間 2020-12-01

標籤 css html android web 算法數據庫編程瀏覽器緩存安全欄目 CSS 简体版

原文原文鏈接

前言

WebView絕不誇張的說就是一個微型的瀏覽器，WebView讓開發者能夠在Native中展現Web頁面，而在Hybrid方案大行其道的今天，WebView在開發過程當中更是扮演着不可或缺的角色，雖然Webiew簡單易用，只要簡單的建立一個實例，而後調用loadUrl方法就能夠運行展現一個Web頁面，然而你真的瞭解Webview嗎?它如何與Native交互？又是如何向展現的Web頁面去注入JS以達到開發的目的？就讓咱們跟隨這一系列的文章去揭開WebView神祕的面紗。css

WebView

//銷燬webview
    public void destroy() {
    }
    
    //load url
    public void loadUrl(String url) {
    }
    
    //加載內容
    public void loadData(String data, String mimeType, String encoding) {
    }
    
    //使用baseUrl加載內容
    public void loadDataWithBaseURL(String baseUrl, String data,
            String mimeType, String encoding, String failUrl) {
    }
    
    //中止加載
    public void stopLoading() {
    }
    
    //從新加載頁面
    public void reload() {
    }
    
    //設置能夠回退到上一頁面
    public boolean canGoBack() {
        return false;
    }
    
    //回退到上一頁面
    public void goBack() {
    }
    
    //是否能夠前進
    public boolean canGoForward() {
        return false;
    }
    
    //前進一頁
    public void goForward() {
    }
    
    // 是否前進或者後退，正表示前進，反以後退
    public boolean canGoBackOrForward(int steps) {
        return false;
    }
    
    // 正表示前進，反以後退
    public void goBackOrForward(int steps) {
    }
    
    //上翻一晚上
    public boolean pageUp(boolean top) {
        return false;
    }
    
    //下翻一頁
    public boolean pageDown(boolean bottom) {
        return false;
    }

    //請求最近觸摸的圖像的url，msg.getData()得到
    public void requestImageRef(Message msg) {
    }
    
    //獲取頁面url
    public String getUrl() {
        return null;
    }
    
    //獲取頁面標題
    public String getTitle() {
        return null;
    }
    
    //獲取頁面的Favicon
    public Bitmap getFavicon() {
        return null;
    }
    
    //獲取頁面加載進度
    public int getProgress() {
        return 0;
    }
    
    //獲取頁面的高度
    public int getContentHeight() {
        return 0;
    }
    
    //清除緩存
    public void clearCache() {
    }
    
    //清除表單數據
    public void clearFormData() {
    }
    
    //清除瀏覽歷史
    public void clearHistory() {
    }
    
    // 查詢文檔中是否有圖片，查詢結果將被髮送到msg.getTarget()
    // 若是包含圖片，msg.arg1 爲1，不然爲0
    public void documentHasImages(Message response) {
    }
    
    //設置WebViewClient
    public void setWebViewClient(WebViewClient client) {
    }
    
    //設置WebChromeClient
    public void setWebChromeClient(WebChromeClient client) {
    }
    
    //注入JS對象
    public void addJavascriptInterface(Object obj, String interfaceName) {
    }

      // 移除已注入的Javascript對象，下次加載或刷新頁面時生效
    public void removeJavascriptInterface(String name);
    
    // 此函數添加於API19，必須在UI線程中調用，回調也將在UI線程
    public void evaluateJavascript(String script, ValueCallback<String> resultCallback)

WebViewClient

WebViewClient主要是處理各類通知和請求事件html

// 攔截頁面加載，返回true表示宿主app攔截並處理了該url，不然返回false由當前WebView處理
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
        return false;
    }
    
    //頁面開始加載
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
    }

      //頁面完成加載
    public void onPageFinished(WebView view, String url) {
    }

    //頁面開始加載資源，其中的url就是資源的url
    public void onLoadResource(WebView view, String url) {
    }

       // 這個回調添加於API23，僅用於主框架的導航
    // 通知應用導航到以前頁面時，其遺留的WebView內容將再也不被繪製。
    // 這個回調能夠用來決定哪些WebView可見內容能被安全地回收，以確保不顯示陳舊的內容
    // 它最先被調用，以此保證WebView.onDraw不會繪製任何以前頁面的內容，隨後繪製背景色或須要加載的新內容。
    // 當HTTP響應body已經開始加載並體如今DOM上將在隨後的繪製中可見時，這個方法會被調用。
    // 這個回調發生在文檔加載的早期，所以它的資源(css,和圖像)可能不可用。
    // 若是須要更細粒度的視圖更新，查看 postVisualStateCallback(long, WebView.VisualStateCallback).
    // 請注意這上邊的全部條件也支持 postVisualStateCallback(long ,WebView.VisualStateCallback)
    public void onPageCommitVisible(WebView view, String url) {
    }

      //攔截加載的請求，且容許返回數據，這個調用不是在主線程中，因此對ui的操做就不要放在這裏。
    @Nullable
    public WebResourceResponse shouldInterceptRequest(WebView view,
            WebResourceRequest request) {
        return shouldInterceptRequest(view, request.getUrl().toString());
    }

    //通知應用加載資源錯誤
    public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
        if (request.isForMainFrame()) {
            onReceivedError(view,
                    error.getErrorCode(), error.getDescription().toString(),
                    request.getUrl().toString());
        }
    }

      //通知應用發生http錯誤
    public void onReceivedHttpError(
            WebView view, WebResourceRequest request, WebResourceResponse errorResponse) {
    }

     //是否從新提交表單，默認不重發
    public void onFormResubmission(WebView view, Message dontResend,
            Message resend) {
        dontResend.sendToTarget();
    }

    //將當前url添加到數據庫，只會添加一次，回退前進將不會重複添加
    public void doUpdateVisitedHistory(WebView view, String url,
            boolean isReload) {
    }

   //通知應用發生ssl錯誤，默認行爲是取消請求
    public void onReceivedSslError(WebView view, SslErrorHandler handler,
            SslError error) {
        handler.cancel();
    }
    

   //返回false webview處理點擊事件，反之webview不處理
    public boolean shouldOverrideKeyEvent(WebView view, KeyEvent event) {
        return false;
    }

    // WebView老是消費按鍵事件，除非是系統按鍵或shouldOverrideKeyEvent返回true
    // 此方法在按鍵事件分派時被異步調用
    public void onUnhandledKeyEvent(WebView view, KeyEvent event) {
        onUnhandledInputEventInternal(view, event);
    }

    /// 通知應用頁面縮放係數變化
    public void onScaleChanged(WebView view, float oldScale, float newScale) {
    }

WebSettings

WebSettings 主要用於對WebView進行配置android

WebSettings settings = web.getSettings();

// 存儲(storage)
// 啓用HTML5 DOM storage API，默認值 false
settings.setDomStorageEnabled(true); 
// 啓用Application Caches API，必需設置有效的緩存路徑才能生效，默認值 false
// 此API已廢棄，參考：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Using_the_application_cache
settings.setAppCacheEnabled(true); 
settings.setAppCachePath(context.getCacheDir().getAbsolutePath());

// 定位(location)
settings.setGeolocationEnabled(true);

// 是否保存表單數據
settings.setSaveFormData(true);
// 是否當webview調用requestFocus時爲頁面的某個元素設置焦點，默認值 true
settings.setNeedInitialFocus(true);  

// 是否支持viewport屬性，默認值 false
// 頁面經過`<meta name="viewport" ... />`自適應手機屏幕
settings.setUseWideViewPort(true);
// 是否使用overview mode加載頁面，默認值 false
// 當頁面寬度大於WebView寬度時，縮小使頁面寬度等於WebView寬度
settings.setLoadWithOverviewMode(true);
// 佈局算法
settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);

// 是否支持Javascript，默認值false
settings.setJavaScriptEnabled(true); 
// 是否支持多窗口，默認值false
settings.setSupportMultipleWindows(false);
// 是否可用Javascript(window.open)打開窗口，默認值 false
settings.setJavaScriptCanOpenWindowsAutomatically(false);

// 資源訪問
settings.setAllowContentAccess(true); // 是否可訪問Content Provider的資源，默認值 true
settings.setAllowFileAccess(true);    // 是否可訪問本地文件，默認值 true
// 是否容許經過file url加載的Javascript讀取本地文件，默認值 false
settings.setAllowFileAccessFromFileURLs(false);  
// 是否容許經過file url加載的Javascript讀取所有資源(包括文件,http,https)，默認值 false
settings.setAllowUniversalAccessFromFileURLs(false);

// 資源加載
settings.setLoadsImagesAutomatically(true); // 是否自動加載圖片
settings.setBlockNetworkImage(false);       // 禁止加載網絡圖片
settings.setBlockNetworkLoads(false);       // 禁止加載全部網絡資源

// 縮放(zoom)
settings.setSupportZoom(true);          // 是否支持縮放
settings.setBuiltInZoomControls(false); // 是否使用內置縮放機制
settings.setDisplayZoomControls(true);  // 是否顯示內置縮放控件

// 默認文本編碼，默認值 "UTF-8"
settings.setDefaultTextEncodingName("UTF-8");
settings.setDefaultFontSize(16);        // 默認文字尺寸，默認值16，取值範圍1-72
settings.setDefaultFixedFontSize(16);   // 默認等寬字體尺寸，默認值16
settings.setMinimumFontSize(8);         // 最小文字尺寸，默認值 8
settings.setMinimumLogicalFontSize(8);  // 最小文字邏輯尺寸，默認值 8
settings.setTextZoom(100);              // 文字縮放百分比，默認值 100

// 字體
settings.setStandardFontFamily("sans-serif");   // 標準字體，默認值 "sans-serif"
settings.setSerifFontFamily("serif");           // 襯線字體，默認值 "serif"
settings.setSansSerifFontFamily("sans-serif");  // 無襯線字體，默認值 "sans-serif"
settings.setFixedFontFamily("monospace");       // 等寬字體，默認值 "monospace"
settings.setCursiveFontFamily("cursive");       // 手寫體(草書)，默認值 "cursive"
settings.setFantasyFontFamily("fantasy");       // 幻想體，默認值 "fantasy"


if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    // 用戶是否須要經過手勢播放媒體(不會自動播放)，默認值 true
    settings.setMediaPlaybackRequiresUserGesture(true);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // 5.0以上容許加載http和https混合的頁面(5.0如下默認容許，5.0+默認禁止)
    settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    // 是否在離開屏幕時光柵化(會增長內存消耗)，默認值 false
    settings.setOffscreenPreRaster(false);
}

if (isNetworkConnected(context)) {
    // 根據cache-control決定是否從網絡上取數據
    settings.setCacheMode(WebSettings.LOAD_DEFAULT);
} else {
    // 沒網，離線加載，優先加載緩存(即便已通過期)
    settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
}

WebChromeClient

WebChromeClient主要是輔助 WebView 處理 Javascript 的對話框,網站圖標,網站標題等等web

// 得到全部訪問歷史項目的列表，用於連接着色。
public void getVisitedHistory(ValueCallback<String[]> callback) {
}

// <video /> 控件在未播放時，會展現爲一張海報圖，HTML中可經過它的'poster'屬性來指定。
// 若是未指定'poster'屬性，則經過此方法提供一個默認的海報圖。
public Bitmap getDefaultVideoPoster() {
    return null;
}

// 當全屏的視頻正在緩衝時，此方法返回一個佔位視圖(好比旋轉的菊花)。
public View getVideoLoadingProgressView() {
    return null;
}

// 接收當前頁面的加載進度
public void onProgressChanged(WebView view, int newProgress) {
}

// 接收文檔標題
public void onReceivedTitle(WebView view, String title) {
}

// 接收圖標(favicon)
public void onReceivedIcon(WebView view, Bitmap icon) {
}

// Android中處理Touch Icon的方案
// http://droidyue.com/blog/2015/01/18/deal-with-touch-icon-in-android/index.html
public void onReceivedTouchIconUrl(WebView view, String url, boolean precomposed) {
}

// 通知應用當前頁進入了全屏模式，此時應用必須顯示一個包含網頁內容的自定義View
public void onShowCustomView(View view, CustomViewCallback callback) {
}

// 通知應用當前頁退出了全屏模式，此時應用必須隱藏以前顯示的自定義View
public void onHideCustomView() {
}


// 顯示一個alert對話框
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
    return false;
}

// 顯示一個confirm對話框
public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
    return false;
}

// 顯示一個prompt對話框
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
    return false;
}

// 顯示一個對話框讓用戶選擇是否離開當前頁面
public boolean onJsBeforeUnload(WebView view, String url, String message, JsResult result) {
    return false;
}


// 指定源的網頁內容在沒有設置權限狀態下嘗試使用地理位置API。
// 從API24開始，此方法只爲安全的源(https)調用，非安全的源會被自動拒絕
public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
}

// 當前一個調用 onGeolocationPermissionsShowPrompt() 取消時，隱藏相關的UI。
public void onGeolocationPermissionsHidePrompt() {
}

// 通知應用打開新窗口
public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) {
    return false;
}

// 通知應用關閉窗口
public void onCloseWindow(WebView window) {
}

// 請求獲取取焦點
public void onRequestFocus(WebView view) {
}

// 通知應用網頁內容申請訪問指定資源的權限(該權限未被受權或拒絕)
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public void onPermissionRequest(PermissionRequest request) {
    request.deny();
}

// 通知應用權限的申請被取消，隱藏相關的UI。
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public void onPermissionRequestCanceled(PermissionRequest request) {
}

// 爲'<input type="file" />'顯示文件選擇器，返回false使用默認處理
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
    return false;
}

// 接收JavaScript控制檯消息
public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
    return false;
}

WebView加載頁面流程分析

當咱們用webveiw來展現頁面時，webview到底作了什麼，讓咱們以加載http://www.baidu.com 爲例來探索一下，結果如圖：

如圖咱們能夠看出了，當咱們loadurl一個url是，首先調用shouldInterceptRequest請求資源，而後是onPageStarted，若是發生重定向，調用shouldOverrideUrlLoading，而後調用onPageStarted，接着調用shouldOverrideUrlLoading請求資源，而後就顯示onPageFinished，然然後面還在請求資源，看源碼發現onPageFinished是由main frame調用，並非整個頁面渲染完成後調用，以後仍是在請求資源。算法