Android WebView使用

時間 2019-12-07

原文原文鏈接

在Android手機中內置了一款高性能webkit內核瀏覽器，在SDK中封裝爲一個叫作WebView組件。

什麼是webkit

WebKit是Mac OS X v10.3及以上版本所包含的軟件框架（對v10.2.7及以上版本也可經過軟件更新獲取）。同時，WebKit也是Mac OS X的Safari網頁瀏覽器的基礎。WebKit是一個開源項目，主要由KDE的KHTML修改而來而且包含了一些來自蘋果公司的一些組件。

傳統上，WebKit包含一個網頁引擎WebCore和一個腳本引擎JavaScriptCore，它們分別對應的是KDE的KHTML和KJS。不過，隨着JavaScript引擎的獨立性愈來愈強，如今WebKit和WebCore已經基本上混用不分（例如Google Chrome和Maxthon 3採用V8引擎，卻仍然宣稱本身是WebKit內核）。

這裏咱們初步體驗一下在android是使用webview瀏覽網頁，在SDK的Dev Guide中有一個WebView的簡單例子。

在開發過程當中應該注意幾點：
1.AndroidManifest.xml中必須使用許可"android.permission.INTERNET",不然會出Web page not available錯誤。
2.若是訪問的頁面中有Javascript，則webview必須設置支持Javascript。
webview.getSettings().setJavaScriptEnabled(true);

3.若是頁面中連接，若是但願點擊連接繼續在當前browser中響應，而不是新開Android的系統browser中響應該連接，必須覆蓋 webview的WebViewClient對象。 javascript

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

4.若是不作任何處理，瀏覽網頁，點擊系統「Back」鍵，整個Browser會調用finish()而結束自身，若是但願瀏覽的網頁回退而不是推出瀏覽器，須要在當前Activity中處理並消費掉該Back事件。

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

下一步讓咱們來了解一下android中webview是如何支持javascripte自定義對象的，在w3c標準中js有 window，history，document等標準對象，一樣咱們能夠在開發瀏覽器時本身定義咱們的對象調用手機系統功能來處理，這樣使用js就能夠隨心所欲了。 css

看一個實例： html

package com.example.hello;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class WordActivity extends Activity {
    private WebView webview;// 聲明一個webview
    private String url="http://www.baidu.com/";
    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.asd);
          //實例化WebView對象 
        webview = (WebView)findViewById(R.id.webView1); 
        //設置WebView屬性，可以執行Javascript腳本 
        webview.getSettings().setJavaScriptEnabled(true); 
        //加載須要顯示的網頁 
        webview.loadUrl("file:///android_asset/index.html");
        
        //設置Web視圖 
        webview.setWebViewClient(new HelloWebViewClient());
    }
      //Web視圖 
    private class HelloWebViewClient extends WebViewClient { 
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) { 
            view.loadUrl(url); 
            return true; 
        } 
    } 
}

咱們看addJavascriptInterface(Object obj,String interfaceName)這個方法，該方法將一個java對象綁定到一個javascript對象中，javascript對象名就是 interfaceName（demo），做用域是Global。這樣初始化webview後，在webview加載的頁面中就能夠直接經過 javascript:window.demo訪問到綁定的java對象了。來看看在html中是怎樣調用的。

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>用戶登陸</title>
        
        <link rel="stylesheet" type="text/css" href="/CSS/lofter.css" />
        <link rel="stylesheet" type="text/css" href="/CSS/Bootstrap/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="/CSS/Animate/animate-background-image.css" />

        <style type="text/css">

            html{
                width: 100%;
                height: 100%;
                
            }
            body{
                width: 100%;
                height: 100%;
                background-color: #f5f5f5;
            }
            .logo h2{
                font-family: Consolas, '微軟雅黑', 'Microsoft YaHei';
                font-weight: 500;
            }
            .login-panel{
                box-shadow: none;
                background-color: rgba(51, 51, 51, 0.6);
            }
            .login-panel p,
            .login-panel h2,
            .login-panel label{
                color: #FFF;
            }
            .login-panel div.blue-border{
                border: none;
                box-shadow: none;
            }
            a.ifotgot{
                margin-right: 8px;
                color: #FFF;
                text-decoration: none;
            }
            a.ifotgot:hover{
                margin-right: 8px;
                color: #3498DB;
            }

        </style>
    </head>

    <body>
        <div class='main'>
            <form action='' method='post' class='login-panel bg-simple'>
                <div class='logo'>
                    <h2 class='text-center'>登陸系統</h2>
                </div>

                <div class='form-block'>
                    <label for='uname'>用戶名</label>
                    <div class='li-block'>
                        <input tabIndex="1" type='text' name='username' id='uname' placeholder='請輸入用戶名' value='' />
                    </div>
                </div>

                <div class='form-block'>
                    <label for='passwd'>密碼</label>
                    <!--<a href="/Member/password/index.html" class='ifotgot pull-right'>忘記密碼</a>-->
                    <div class='li-block'>
                        <input tabIndex="2" type='password' name='password' id='passwd' placeholder='請輸入密碼' value='' />
                    </div>
                </div>

                <div class='label-block'>
                    <input style='margin-left:13px;' id='auto_login' type='checkbox' name='auto_login' value='0' >
                    <label for='auto_login'>自動登陸</label>
                </div>
                
                <div class='form-block' id='error' style='display:none;'>
                    <p class='text-center' style='margin-left:13px;color:#E74C3C;'>登陸失敗，請檢查用戶名密碼是否正確</p>
                </div>

                <div class='form-block'>
                    <button type='button' class='info-btn' onClick='doLogin()' style='width: 100%;'>
                        <span>登陸</span>
                    </button>
                </div>
            </form>
        </div>

        <script type="text/javascript" src="/JS/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src='/JS/cookie.js'></script>
        <script type="text/javascript" src='/JS/effects.js'></script>
        
    </body>
</html>

這樣在javascript中就能夠調用java對象的clickOnAndroid()方法了，一樣咱們能夠在此對象中定義不少方法（比如發短信，調用聯繫人列表等手機系統功能。）,這裏wave()方法是java中調用javascript的例子。 java

這裏還有幾個知識點：

1)爲了讓WebView從apk文件中加載assets，Android SDK提供了一個schema，前綴爲"file:///android_asset/"。WebView遇到這樣的schema，就去當前包中的 assets目錄中找內容。如上面的"file:///android_asset/index.html"
2)addJavascriptInterface方法中要綁定的Java對象及方法要運行另外的線程中，不能運行在構造他的線程中，這也是使用 Handler的目的。 jquery

運行程序後的效果圖： android