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