電腦知識網: 關於webview最詳細講解（包含 h5 和android 交互）

為什麼要學習Android與H5互調？

微信，QQ空間等大量軟體都內嵌了H5，不得不說是一種趨勢。Android與H5互調可以讓我們的實現混合開發，至於混合開發就是在一個App中內嵌一個輕量級的瀏覽器，一部分原生的功能改為Html 5來開發。

優勢：使用H5實現的功能能夠在不升級App的情況下動態更新，而且可以在Android或iOS的App上同時運行，節約了成本，提高了開發效率。

原理：其實就是Java代碼和JavaScript之間的調用。

開局插入一張文章的目錄結構：

關於webview最詳細講解（包含 h5 和android 交互）

WebView簡介

要實現Android與H5互調，WebView是一個很重要的控制項，WebView可以很好地幫助我們展示html頁面,所以有必要先了解一下WebView。

一丶WebView常用方法

loadUrl

載入界面，其次還有LoadData和LoadDataWithBase方法

//載入assets目錄下的test.html文件
webView.loadUrl(“file:///android_asset/test.html”);
//載入網路資源(注意要加上網路許可權)
webView.loadUrl(“http://blog.csdn.net”);

setWebViewClient（如果用戶設置了WebViewClient，則在點擊新的鏈接以後就不會跳轉到系統瀏覽器了，而是在本WebView中顯示。注意：並不需要覆蓋 shouldOverrideUrlLoading 方法，同樣可以實現所有的鏈接都在 WebView 中打開。）

WebViewClient主要用來輔助WebView處理各種通知、請求等事件，通過setWebViewClient方法設置。以下是它的幾種常見用法：

實現對網頁中超鏈接的攔截(比如如果是極客導航的主頁，則直接攔截轉到百度主頁)：

當點擊頁面中的鏈接後，會在WebView載入URL前回調shouldOverrideUrlLoading(WebView view, String url)方法，一般點擊一個鏈接此方法調用一次。

webView.setWebViewClient(new WebViewClient()
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url)
if(“http://www.jikedaohang.com/”.equals(url))
view.loadUrl(“https://www.baidu.com/”);

return true;

);

關於shouldOverrideUrlLoading返回值的誤區：網上很多解釋是return true代表在本WebView中打開鏈接，return false代表調用系統瀏覽器打開鏈接。其實只要設置了WebViewClient，則就不會調用系統瀏覽器。

那麼shouldOverrideUrlLoading的返回值到底代表什麼呢？return true，則在打開新的url時WebView就不會再載入這個url了，所有處理都需要在WebView中操作，包含載入；return false，則系統就認為上層沒有做處理，接下來還是會繼續載入這個url的；默認return false。具體的區別展示如下：

載入百度主頁，設置WebViewClient後，重寫shouldOverrideUrlLoading(WebView view, String url)方法，第一張是返回false的截圖（點擊後正常跳轉），第二章是返回true的截圖（點擊無反應，如果希望能夠跳轉，則需要我們自己進行處理）：

關於webview最詳細講解（包含 h5 和android 交互）

還有一點需要注意的是，如果我們攔截了某個url，那麼return false 和 return true區別不大，所以一般建議 return false。

載入網頁時替換某個資源（比如在載入一個網頁時，需要載入一個logo圖片，而我們想要替換這個logo圖片，用我們assets目錄下的一張圖片替代）

我們知道我們在載入一個網頁的同時也會載入js,css,圖片等資源，所以會多次調用shouldInterceptRequest方法，我們可以在shouldInterceptRequest中進行圖片替換。

注意：shouldInterceptRequest有兩個重載：

①public WebResourceResponse shouldInterceptRequest (WebView view, String url) 【已過時】

②public WebResourceResponse shouldInterceptRequest (WebView view, WebResourceRequest request)

這兩種方法主要是第二個參數的不同，WebResourceRequest 將能夠獲取更多的信息，提供了getUrl(),getMethod,getRequestHeaders等方法。這裡主要是為了展示效果，使用了第一種回調方法。實現方法如下：

mWebView.setWebViewClient(new WebViewClient()
@Override
public WebResourceResponse shouldInterceptRequest(WebView view, String url)
WebResourceResponse response = null;
if (url.contains(“logo”))
try
InputStream logo = getAssets().open(“logo.png”);
response = new WebResourceResponse(“image/png”, “UTF-8”, logo);
catch (IOException e)
e.printStackTrace();

return response;

);

設置開始載入網頁、載入完成、載入錯誤時處理

webView.setWebViewClient(new WebViewClient()

@Override
public void onPageStarted(WebView view, String url, Bitmap favicon)
super.onPageStarted(view, url, favicon);
// 開始載入網頁時處理如：顯示”載入提示” 的載入對話框
…

@Override
public void onPageFinished(WebView view, String url)
super.onPageFinished(view, url);
// 網頁載入完成時處理如：讓載入對話框消失
…

@Override
public void onReceivedError(WebView view, int errorCode, String description, String failingUrl)
super.onReceivedError(view, errorCode, description, failingUrl);
// 載入網頁失敗時處理如：提示失敗，或顯示新的界面
…

);

處理https請求，為WebView處理ssl證書設置WebView默認是不處理https請求的，需要在WebViewClient子類中重寫父類的onReceivedSslError函數

webView.setWebViewClient(new WebViewClient()

@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error)
handler.proceed(); // 接受信任所有網站的證書
// handler.cancel(); // 默認操作不處理
// handler.handleMessage(null); // 可做其他處理

);

setWebChromeClient

WebChromeClient主要用來輔助WebView處理Javascript的對話框、網站圖標、網站標題以及網頁載入進度等。通過WebView的setWebChromeClient()方法設置。

顯示頁面載入進度在WebChromeClient子類中重寫父類的onProgressChanged函數，progress表示當前頁面載入的進度，為1至100的整數

webView.setWebChromeClient(new WebChromeClient()

public void onProgressChanged(WebView view, int progress)
setTitle(“頁面載入中，請稍候…” + progress + “%”);
setProgress(progress * 100);

if (progress == 100)
//…

);

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

//1.首先在WebView初始化時添加如下代碼
if(Build.VERSION.SDK_INT >= 19)
/*對系統API在19以上的版本作了兼容。因為4.4以上系統在onPageFinished時再恢復圖片載入時,如果存在多張圖片引用的是相同的src時，會只有一個image標籤得到載入，因而對於這樣的系統我們就先直接載入。*/ webView.getSettings().setLoadsImagesAutomatically(true);
else
webView.getSettings().setLoadsImagesAutomatically(false);

//2.在WebView的WebViewClient子類中重寫onPageFinished()方法添加如下代碼：
@Override
public void onPageFinished(WebView view, String url)
if(!webView.getSettings().getLoadsImagesAutomatically())
webView.getSettings().setLoadsImagesAutomatically(true);

setDownloadListener

通常webview渲染的界面中含有可以下載文件的鏈接，點擊該鏈接後，應該開始執行下載的操作並保存文件到本地中。

創建DownloadListener

class MyDownloadListenter implements DownloadListener
@Override
public void onDownloadStart(String url, String userAgent,String contentDisposition, String mimetype, long contentLength)
//下載任務…，主要有兩種方式
//（1）自定義下載任務
//（2）調用系統的download的模塊
Uri uri = Uri.parse(url);
Intent intent = new Intent(Intent.ACTION_VIEW, uri);
startActivity(intent);

給webview加入監聽

webview.setDownloadListener(new MyDownloadListenter());

goBack()

返回上一瀏覽頁面，通過重寫onKeyDown方法實現點擊返回鍵返回上一瀏覽頁面而非退出程序

public boolean onKeyDown(int keyCode, KeyEvent event)
//其中webView.canGoBack()在webView含有一個可後退的瀏覽記錄時返回true

if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack())
webView.goBack();
return true;

return super.onKeyDown(keyCode, event);

}

二丶WebSettings配置

獲取WebSettings對象

WebSettings webSettings = webView.getSettings();

常用設置方法

（1）支持js

settings.setJavaScriptEnabled(true);

（2）設置緩存方式，主要有以下幾種：

LOAD_CACHE_ONLY: 不使用網路，只讀取本地緩存數據。

LOAD_DEFAULT: 根據cache-control決定是否從網路上取數據。

LOAD_CACHE_NORMAL: API level 17中已經廢棄, 從API level 11開始作用同LOAD_DEFAULT模式。

LOAD_NO_CACHE: 不使用緩存，只從網路獲取數據。

LOAD_CACHE_ELSE_NETWORK：只要本地有，無論是否過期，或者no-cache，都使用緩存中的數據。

settings.setCacheMode(WebSettings.LOAD_NO_CACHE);

（3）開啟DOM storage API功能（HTML5 提供的一種標準的介面，主要將鍵值對存儲在本地，在頁面載入完畢後可以通過 JavaScript 來操作這些數據。）

settings.setDomStorageEnabled(true);

（4）設置
資料庫

緩存路徑

settings.setDatabasePath(cacheDirPath);

（5）設置Application Caches緩存目錄

settings.setAppCachePath(cacheDirPath);

（6）設置默認編碼

settings.setDefaultTextEncodingName(「utf-8」);

（7）將圖片調整到適合webview的大小

settings.setUseWideViewPort(false);

（8）支持縮放

settings.setSupportZoom(true);

（9）支持內容重新布局

settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);

（10）多窗口

settings.supportMultipleWindows();

（11）設置可以訪問文件

settings.setAllowFileAccess(true);

（12）當webview調用requestFocus時為webview設置節點

settings.setNeedInitialFocus(true);

（13）設置支持縮放

settings.setBuiltInZoomControls(true);

（14）支持通過JS打開新窗口

settings.setJavaScriptCanOpenWindowsAutomatically(true);

（15）縮放至屏幕的大小

settings.setLoadWithOverviewMode(true);

（16）支持自動載入圖片

settings.setLoadsImagesAutomatically(true);

三丶WebViewClient 的回調方法列表

WebViewClient主要用來輔助WebView處理各種通知、請求等事件，通過setWebViewClient方法設置。

（1）更新歷史記錄

doUpdateVisitedHistory(WebView view, String url, boolean isReload)

（2）應用程序重新請求網頁數據

onFormResubmission(WebView view, Message dontResend, Message resend)

（3）在載入頁面資源時會調用，每一個資源（比如圖片）的載入都會調用一次。

onLoadResource(WebView view, String url)

（4）開始載入頁面調用，通常我們可以在這設定一個loading的頁面，告訴用戶程序在等待網路響應。

onPageStarted(WebView view, String url, Bitmap favicon)

（5）在頁面載入結束時調用。同樣道理，我們知道一個頁面載入完成，於是我們可以關閉loading 條，切換程序動作。

onPageFinished(WebView view, String url)

（6）報告錯誤信息

onReceivedError(WebView view, int errorCode, String description, String failingUrl)

（7）獲取返回信息授權請求

onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host,String realm)

（8）重寫此方法可以讓webview處理https請求。

onReceivedSslError(WebView view, SslErrorHandler handler, SslError error)

（9）WebView發生改變時調用

onScaleChanged(WebView view, float oldScale, float newScale)

（10）Key事件未被載入時調用

onUnhandledKeyEvent(WebView view, KeyEvent event)

（11）重寫此方法才能夠處理在瀏覽器中的按鍵事件。

shouldOverrideKeyEvent(WebView view, KeyEvent event)

（12）在網頁跳轉時調用，這個函數我們可以做很多操作，比如我們讀取到某些特殊的URL，於是就可以不打開地址，取消這個操作，進行預先定義的其他操作，這對一個程序是非常必要的。

shouldOverrideUrlLoading(WebView view, String url)

（13）在載入某個網頁的資源的時候多次調用（已過時）

shouldInterceptRequest(WebView view, String url)

（14）在載入某個網頁的資源的時候多次調用

shouldInterceptRequest(WebView view, WebResourceRequest request)

注意：

shouldOverrideUrlLoading在網頁跳轉的時候調用，且一般每跳轉一次只調用一次。

shouldInterceptRequest只要是網頁載入的過程中均會調用，資源載入的時候都會回調該方法，會多次調用。

四丶WebChoromeClient的回調方法列表

WebChromeClient主要用來輔助WebView處理Javascript的對話框、網站圖標、網站標題以及網頁載入進度等。通過WebView的setWebChromeClient()方法設置。

（1）監聽網頁載入進度

onProgressChanged(WebView view, int newProgress)

（2）監聽網頁標題 : 比如百度頁面的標題是「百度一下，你就知道」

onReceivedTitle(WebView view, String title)

（3）監聽網頁圖標

onReceivedIcon(WebView view, Bitmap icon)

Java和JavaScript互調

為方便展示，使用addJavascriptInterface方式實現與本地js交互（存在漏洞）。也可通過其他方式實現，比如攔截ur進行參數解析l等。

Java調JS

首先是JS的一段代碼：

function javaCallJs(arg)
document.getElementById(“content”).innerHTML =
(“歡迎：”+arg );

然後是在java中調用JS中的方法

webView.loadUrl(“javascript:javaCallJs(“+”””+name+”””+”)”);

以上代碼就是調用了JS中一個叫javaCallJs(arg)的方法，並傳入了一個name參數。（具體效果下面有展示）

JS調java

webView.addJavascriptInterface(new JSInterface (),”Android”);

實現Javascript介面類

class JSInterface
@JavascriptInterface
public void showToast(String arg)
Toast.makeText(MainActivity.this,arg,Toast.LENGTH_SHORT).show();

JS中調用java代碼

window.Android.showToast(『JS中傳來的參數』)」中的」Android」即addJavascriptInterface（）中指定的，並且JS向java傳遞了參數，類型為String。而showToast(String arg)會以Toast的形式彈出此參數。

java與JS互調代碼示例

先看效果圖：

關於webview最詳細講解（包含 h5 和android 交互）

不好意思，傳錯了，是這張：

關於webview最詳細講解（包含 h5 和android 交互）

代碼非常簡單，並且加了注釋，直接看代碼就可以了。

首先是本地的JavaAndJavaScriptCall.html文件，放在asstes目錄下

請在上方輸入您的用戶名

javaCallJs是java調用JS的方法，showToast方法是JS調用java的方法

接下來是布局文件，activity_main.xml

xmlns:tools=”http://schemas.android.com/tools”
android:id=”@+id/ll_root”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical”
tools:context=”.MainActivity”>
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
android:padding=”20dp”
android:background=”#000088″>
android:id=”@+id/et_user”
android:layout_width=”0dp”
android:layout_height=”wrap_content”
android:hint=”輸入WebView中要顯示的用戶名”
android:background=”#008800″
android:textSize=”16sp”
android:layout_weight=”1″/>
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginLeft=”40dp”
android:layout_marginRight=”20dp”
android:textSize=”16sp”
android:text=”確定”
android:onClick=”click”/>

很簡單，就是一個輸入框和一個確定按鈕，點擊按鈕會調用JS中的方法。

package com.wangjian.webviewdemo;

import android.annotation.SuppressLint;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity

private WebView webView;
private LinearLayout ll_root;
private EditText et_user;

@Override
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ll_root = (LinearLayout) findViewById(R.id.ll_root);
et_user = (EditText) findViewById(R.id.et_user);
initWebView();

//初始化WebView

private void initWebView()
//動態創建一個WebView對象並添加到LinearLayout中
webView = new WebView(getApplication());
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
webView.setLayoutParams(params);
ll_root.addView(webView);
//不跳轉到其他瀏覽器
webView.setWebViewClient(new WebViewClient()
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url)
view.loadUrl(url);
return true;

);
WebSettings settings = webView.getSettings();
//支持JS
settings.setJavaScriptEnabled(true);
//載入本地html文件
webView.loadUrl(“file:///android_asset/JavaAndJavaScriptCall.html”);
webView.addJavascriptInterface(new JSInterface(),”Android”);

//按鈕的點擊事件
public void click(View view)
//java調用JS方法
webView.loadUrl(“javascript:javaCallJs(” + “”” + et_user.getText().toString()+”””+”)”);

//在頁面銷毀的時候將webView移除
@Override
protected void onDestroy()
super.onDestroy();
ll_root.removeView(webView);
webView.stopLoading();
webView.removeAllViews();
webView.destroy();
webView = null;

private class JSInterface
//JS需要調用的方法
@JavascriptInterface
public void showToast(String arg)
Toast.makeText(MainActivity.this,arg,Toast.LENGTH_SHORT).show();

需要注意的地方

參考鏈接：安卓webview的一些坑

webView.addJavascriptInterface()方法在API 17之前有一些漏洞（有興趣的可以參考本篇文章，WebView 遠程代碼執行漏洞淺析），所以在API 17以後，需要在JavaScript介面類的方法加上@JavascriptInterface註解。

仔細看的話你會發現我們上面的WebView對象並不是直接寫在布局文件中的，而是通過一個LinearLayout容器，使用addview(webview)動態向裡面添加的。另外需要注意創建webview需要使用applicationContext而不是activity的context，銷毀時不再佔有activity對象，最後離開的時候需要及時銷毀webview，onDestory()中應該先從LinearLayout中remove掉webview,再調用webview.removeAllViews();webview.destory();

如果想要webView在產生OOM的時候不影響主進程，可以另開一個進程，在androidmanifest.xml的activity標籤里加上Android:process屬性就可以了。

在activity被殺死之後，依然保持webView的狀態，方便用戶下次打開的時候可以回到之前的狀態。webview支持saveState(bundle)和restoreState(bundle)方法。

保存狀態

@Override
protected void onSaveInstanceState(Bundle outState)
super.onSaveInstanceState(outState);
wv.saveState(outState);
Log.e(TAG, “save state…”);

恢復狀態（在activity的onCreate(bundle savedInstanceState)里）

if(null!=savedInstanceState)
wv.restoreState(savedInstanceState);
Log.i(TAG, “restore state”);
else
wv.loadUrl(“http://3g.cn”);

其他一些常見問題：

1. WebViewClient.onPageFinished()。

你永遠無法確定當WebView調用這個方法的時候，網頁內容是否真的載入完畢了。當前正在載入的網頁產生跳轉的時候這個方法可能會被多次調用，StackOverflow上有比較具體的解釋（How to listen for a Webview finishing loading a URL in Android?），但其中列舉的解決方法並不完美。所以當你的WebView需要載入各種各樣的網頁並且需要在頁面載入完成時採取一些操作的話，可能WebChromeClient.onProgressChanged()比WebViewClient.onPageFinished()都要靠譜一些。

2. WebView後台耗電問題。

當你的程序調用了WebView載入網頁，WebView會自己開啟一些線程（？），如果你沒有正確地將WebView銷毀的話，這些殘餘的線程（？）會一直在後台運行，由此導致你的應用程序耗電量居高不下。對此我採用的處理方式比較偷懶，簡單又粗暴（不建議），即在Activity.onDestroy()中直接調用System.exit(0)，使得應用程序完全被移出虛擬機，這樣就不會有任何問題了。

3. 切換WebView閃屏問題。

如果你需要在同一個ViewGroup中來回切換不同的WebView（包含了不同的網頁內容）的話，你就會發現閃屏是不可避免的。這應該是Android硬體加速的Bug，如果關閉硬體加速這種情況會好很多，但無法獲得很好的瀏覽體驗，你會感覺網頁滑動的時候一卡一卡的，不跟手。

4. 在某些手機上，Webview有視頻時，activity銷毀後，視頻資源沒有被銷毀，甚至還能聽到在後台播放。即便是像剛才那樣各種銷毀webview也無濟於事，解決辦法：在onDestory之前修改url為空地址。

5.WebView硬體加速導致頁面渲染閃爍問題

關於Android硬體加速開始於Android 3.0 (API level 11),開啟硬體加速後，WebView渲染頁面更加快速，拖動也更加順滑。但有個副作用就是容易會出現頁面載入白塊同時界面閃爍現象。解決這個問題的方法是設置WebView暫時關閉硬體加速代碼如下：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB)

webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);