Android WebView詳解和調用JS

前言

Android開發的過程的中，如今愈來愈多的項目接入網頁來顯示數據，那麼就要求咱們會使用WebView來顯示網頁內容，今天就簡單講解一下WebView的簡單使用。

WebView在Android平臺上是一個特殊的View， 他能用來顯示網頁，這個類能夠被用來在你的app中僅僅顯示一張在線的網頁，還能夠用來開發瀏覽器。WebView內部實現是採用渲染引擎來展現view的內容，提供網頁前進後退，網頁放大，縮小，搜索等。

WebView的基本使用

（1）能夠在XML佈局中添加WebView：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.zhjy.hxf.hzwebview.MainActivity"
    tools:showIn="@layout/activity_main">

    <LinearLayout
        android:id="@+id/linearlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:visibility="visible">

        <ProgressBar
            android:id="@+id/progressBar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="3dip"
            android:progressDrawable="@drawable/proessbar_bg"
            android:visibility="gone" />

        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>

    <RelativeLayout
        android:id="@+id/relativwlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone">

        <ProgressBar
            android:id="@+id/progressbar1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" />
    </RelativeLayout>
</RelativeLayout>

而後在Activity中綁定的你空間：

WebView mWebView = (WebView)findViewById(R.id.webview);

（2）建立WebView的實例加入到Activity的view中：

WebView mWebView = new WebView(this);
setContentView(mWebView);

等均可以實現WebView的使用。

（3）而後就能夠在網頁：

//WebView加載web資源
 mWebView.loadUrl("https://www.baidu.com/");

實例使用

（1）設置網頁頂部加載進度條（判斷頁面加載過程）：

WebSettings mWebSettings = mWebView.getSettings();
        mWebSettings.setJavaScriptEnabled(true);
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
                if (newProgress == 100) {
                    mProgressBar.setVisibility(View.GONE);
                } else {
                    mProgressBar.setVisibility(View.VISIBLE);
                    mProgressBar.setProgress(newProgress);
                }
            }
        });

（2）若是但願瀏覽的網頁後退而不是退出瀏覽器，須要WebView覆蓋URL加載，讓它自動生成歷史訪問記錄，那樣就能夠經過前進或後退訪問已訪問過的站點。

/**
     * 在onKeyDown中設置webView在返回的時候
     * 自動記錄瀏覽記錄
     * @param keyCode
     * @param event
     * @return
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK){
            if (mWebView.canGoBack()){
                mWebView.goBack();
                return true;
            }else {
                finish();
            }
        }
        return super.onKeyDown(keyCode, event);
    }

（3）建立一個本身的WebViewClient，經過setWebViewClient關聯

//覆蓋WebView默認使用第三方或系統默認瀏覽器打開網頁的行爲，使網頁用WebView打開
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                //返回值是true的時候控制去WebView打開，爲false調用系統瀏覽器或第三方瀏覽器
                view.loadUrl(url);
                return true;
            }

            /**
             * 1.網頁頁面開始加載的時候，執行的回調方法，能夠實現加載等待界面
             * 2.在此方法中設置一個超時計時器
             * @param view
             * @param url
             * @param favicon
             */
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                mLinearLayout.setVisibility(View.GONE);
                mRelativeLayout.setVisibility(View.VISIBLE);
            }

            /**
             * 1.網頁加載結束的時候，也要隱藏等待界面
             * 2.onPageFinished指頁面加載完成,完成後取消計時器
             * @param view
             * @param url
             */
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                mLinearLayout.setVisibility(View.VISIBLE);
                mRelativeLayout.setVisibility(View.GONE);
            }

            /**
             * 加載異常的界面
             * @param view
             * @param request
             * @param error
             */
            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                super.onReceivedError(view, request, error);
                Log.d("testTimeout", "-----------加載異常");
            }
        });

（4）訪問的頁面中有Javascript，則webview必須設置支持Javascript

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

（5）緩存的使用

優先使用緩存

mWebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);

不使用緩存

mWebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

特殊使用

先給你們說說怎麼獲取這個html的標題title

應用開發的時候使用WebView這個組件的過程當中可能會接觸到WebViewClient與WebChromeClient，那麼這兩個類到底有什麼不一樣呢 ，WebViewClient主要幫助WebView處理各類通知、請求事件的，好比：

onLoadResource
        onPageStart
        onPageFinish
        onReceiveError
        onReceivedHttpAuthRequest

        WebChromeClient主要輔助WebView處理Javascript的對話框、網站圖標、網站title、加載進度等好比
        onCloseWindow(關閉WebView)
        onCreateWindow()
        onJsAlert (WebView上alert無效，須要定製WebChromeClient處理彈出)
        onJsPrompt
        onJsConfirm
        onProgressChanged
        onReceivedIcon
        onReceivedTitle

咱們在 WebChromeClient 中的 onReceivedTitle() 方法裏判斷html頁面的標題中是否含有 「error」，若是有，則證實html加載失敗，設置加載失敗的標記，讓在 WebViewClient 的完成是回 調的 onPageFinish() 方法裏顯示自定義的加載失敗的頁面。

使用的是不要忘了添加網絡權限：

<uses-permission android:name="android.permission.INTERNET"/>

最後張貼一下所有代碼：

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;
    private ProgressBar mProgressBar;
    private LinearLayout mLinearLayout;
    private RelativeLayout mRelativeLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        init();
    }

    private void init() {
        mWebView = (WebView)findViewById(R.id.webview);
        mProgressBar = (ProgressBar)findViewById(R.id.progressBar);
        mLinearLayout = (LinearLayout)findViewById(R.id.linearlayout);
        mRelativeLayout = (RelativeLayout)findViewById(R.id.relativwlayout);

        //WebView加載web資源
        mWebView.loadUrl("https://www.baidu.com/");
        /**
         * 對WebView設置監聽器
         */
        WebSettings mWebSettings = mWebView.getSettings();
        mWebSettings.setJavaScriptEnabled(true);
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
                if (newProgress == 100) {
                    mProgressBar.setVisibility(View.GONE);
                } else {
                    mProgressBar.setVisibility(View.VISIBLE);
                    mProgressBar.setProgress(newProgress);
                }
            }
        });

        //覆蓋WebView默認使用第三方或系統默認瀏覽器打開網頁的行爲，使網頁用WebView打開
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                //返回值是true的時候控制去WebView打開，爲false調用系統瀏覽器或第三方瀏覽器
                view.loadUrl(url);
                return true;
            }

            /**
             * 1.網頁頁面開始加載的時候，執行的回調方法，能夠實現加載等待界面
             * 2.在此方法中設置一個超時計時器
             * @param view
             * @param url
             * @param favicon
             */
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                mLinearLayout.setVisibility(View.GONE);
                mRelativeLayout.setVisibility(View.VISIBLE);
            }

            /**
             * 1.網頁加載結束的時候，也要隱藏等待界面
             * 2.onPageFinished指頁面加載完成,完成後取消計時器
             * @param view
             * @param url
             */
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                mLinearLayout.setVisibility(View.VISIBLE);
                mRelativeLayout.setVisibility(View.GONE);
            }

            /**
             * 加載異常的界面
             * @param view
             * @param request
             * @param error
             */
            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                super.onReceivedError(view, request, error);
                Log.d("testTimeout", "-----------加載異常");
            }
        });

        //設置訪問文件
        mWebSettings.setAllowContentAccess(true);
        mWebSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
    }


    /**
     * 在onKeyDown中設置webView在返回的時候
     * 自動記錄瀏覽記錄
     * @param keyCode
     * @param event
     * @return
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK){
            if (mWebView.canGoBack()){
                mWebView.goBack();
                return true;
            }else {
                finish();
            }
        }
        return super.onKeyDown(keyCode, event);
    }
}

WebView調用JS的使用方式

（1）首先寫js文件 js_test.js

function alertFromJs(content){
    alert("From js:" + content);
}

簡單的一個函數，功能就是彈出一個alert。

寫html文件 index.html，在html里加載js文件，注意路徑。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="file:///android_asset/JsTest/js_test.js"></script>
    <title>JS Test</title>
</head>
<body>
<p>加載HTML網頁成功!</p>
</body>
</html>

將index.html和js_test.js放到JsTest文件夾裏，將JsTest放入到安卓工程assets中。 寫xml佈局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btnCallJSAlert"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="CALL JS ALERT" />

    <WebView
        android:id="@+id/wvTest"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

MainActivity的全部代碼：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private WebView wvTest;
    private Button btnCallJSAlert;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        wvTest = (WebView) findViewById(R.id.wvTest);
        btnCallJSAlert = (Button) findViewById(R.id.btnCallJSAlert);
        btnCallJSAlert.setOnClickListener(this);

        //處理Javascript的對話框，加載進度等。咱們是一個用js彈出對話框的程序，因此這句必須加。
        wvTest.setWebChromeClient(new WebChromeClient());
        //拿到WebSettings
        WebSettings webSettings = wvTest.getSettings();
        //設置編碼格式
        webSettings.setDefaultTextEncodingName("utf-8");
        //支持js
        webSettings.setJavaScriptEnabled(true);
        wvTest.loadUrl("file:///android_asset/JsTest/index.html");
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btnCallJSAlert:
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                    wvTest.evaluateJavascript("javascript:alertFromJs('加載網頁的wvTest.evaluateJavascript')", new ValueCallback<String>() {
                        /**
                         * 網頁上的Button回調方法
                         * @param value
                         */
                        @Override
                        public void onReceiveValue(String value) {
                            Log.i("TAG","網頁上的Button回調方法：value = "+value);
                        }
                    });
                } else {
                    wvTest.loadUrl("javascript:alertFromJs('加載網頁的wvTest.loadUrl')");
                }
                break;
        }
    }
}

轉載請註明出處：

【定陶黃公子】 （歡迎你們留言，討論探討）

博客轉載：http://blog.csdn.net/huang3513/article/details/53639029

源碼下載：http://download.csdn.net/detail/huang3513/9711162