Android 中WebView的使用詳解

前言： 通過WebView控制元件可以實作加載網頁的效果，

1. 加載URL(網路或者本地assets檔案夾下的html檔案)
2. 加載html代碼
3. Native和JavaScript的相互呼叫

一、加載網頁的方法：

1. 加載網路URL
   webView.loadUrl(“https://m.baidu.com”);
2. 加載assets目錄下的html檔案
   webView.loadUrl(“file:///android_asset/web.html”);
3. 加載html代碼
   webView.loadData();
   webView.loadDataWithBaseURL();

二、網頁的前進與后退： 相關的幾個方法

1. webView.canGoBack() 當前頁面是否可以回傳
2. webView.goBack() 回傳當前頁面
3. webView.canGoForward() 當前頁面是否可以向前
4. webView.goBack() 向前進入下一個頁面
5. webView.canGoBackOrForward(int steps) 當前頁面是否可以回傳或者進入下一個頁面 回傳值為boolean
6. webView.goBackOrForward(int steps) 當前頁面要前進或者后退幾步

三、接下來我們以訪問網路百度移動站點進行演示
1.首先實作布局頁面activity_web_view.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".WebViewActivity"
    android:orientation="vertical"
    >
    <WebView
        android:id="@+id/wv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
</LinearLayout>

2.在WebViewActivity中進行加載網頁的操作：

public class WebViewActivity extends AppCompatActivity {
    private static final String TAG = "WebViewActivity";
    private WebView wv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view);
        wv = findViewById(R.id.wv);
        //加載本地中的html檔案
//        wv.loadUrl("file:///android_asset/web.html");

        //設定支持js否則有些網頁無法打開
        wv.getSettings().setJavaScriptEnabled(true);
        wv.setWebViewClient(new MyClient());
        wv.setWebChromeClient(new MyWebChromeClient());
        //加載網路url
        wv.loadUrl("https://m.baidu.com");
    }

    class MyClient extends WebViewClient{
        //監聽到頁面發生跳轉的情況，默認打開web瀏覽器
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
            //在webView中加載要打開的鏈接
            view.loadUrl(request.getUrl().toString());
            return true;
        }
        //頁面開始加載
        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            Log.e(TAG, "onPageStarted: ");
        }
        //頁面加載完成的回呼方法
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            Log.e(TAG, "onPageFinished: ");
            //在webView中加載js代碼
            wv.loadUrl("javascript:alert('hello')");
        }
    }

    class MyWebChromeClient extends WebChromeClient{
        //監聽網頁進度 newProgress進度值在0-100
        @Override
        public void onProgressChanged(WebView view, int newProgress) {
            super.onProgressChanged(view, newProgress);
        }

        //設定Activity的標題與 網頁的標題一致
        @Override
        public void onReceivedTitle(WebView view, String title) {
            super.onReceivedTitle(view, title);
            setTitle(title);
        }
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        //如果用戶按的是回傳鍵 并且WebView頁面可以回傳
        if (keyCode==event.KEYCODE_BACK&&wv.canGoBack()){
            //讓WebView回傳
            wv.goBack();
            return true;
        }
        //如果WebView不能回傳 則呼叫默認的onKeyDown方法 退出Activity
         return super.onKeyDown(keyCode, event);
    }

}

具體注釋已經在代碼中給出！
效果圖演示：